I'm trying to draw arcs using the Canvas library. I get the first blue arc to be drawn, but then nothing is happening inside the setInterval (same behaviour with setTimeout). How can I use the Canvas to build stuff dynamically?
Here is my code:
var canvas = Canvas.createView();
canvas.begin();
canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0);
canvas.lineWidth(10);
canvas.strokeStyle('blue');
canvas.stroke();
var pointFrom = 1.5;
var interval = setInterval(function() {
var pointTo = pointFrom - 0.5;
console.log('pointFrom : ' + pointFrom);
console.log('pointTo : ' + pointTo);
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1);
canvas.lineWidth(15);
canvas.strokeStyle('red');
canvas.stroke();
pointFrom = pointTo;
if (pointFrom < 0) clearInterval(interval);
}, 2000);
my_view.add(canvas);
Thanks
The
canvas.begin()
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1)
canvas.stroke()
canvas.commit()
must be in the interval function.
Related
This is my code, written on code.org, link here. the error is in the last 'if' statement. What I don't understand is how this is failing when another program of mine, written the exact same way (I copy-pasted it into this program) works!
I just don't know what could possibly be breaking this, and the error message is just some obscure thing that I can't find anywhere else in the same context! Whyyyyy!?
var R; var G; var B;
createCanvas('pattern');
setActiveCanvas('pattern');
var data = getImageData(0, 0, 320, 450);
//R = x * 0.796875;
//G = Math.ceil(y * 0.02222222) * 25.5;
//B = (y * 0.3333333) * 17 - Math.floor(y * 0.02222222) * 255;
for (var x = 0; x < 320; x+=2) {
for (var y = 0; y < 450; y+=2) {
setRGB(data, x, y, x * 0.7968, Math.ceil(y * 0.0222) * 25.5, (y * 5.6661) - Math.floor(y * 0.0222) * 255);
}
}
putImageData(data, 0, 0);
{
createCanvas('canvas');
createCanvas('buffer');
hideElement('buffer');
setActiveCanvas('canvas');
setStrokeWidth(1);
setStrokeColor(rgb(255,255,255,255));
setFillColor(rgb(255,255,255,255));
rect(0, 0, 320, 450);
var bufferData = getImageData(0, 0, 320, 450);
var imgData = getImageData(0, 0, 320, 450);
setStrokeColor('black');
setFillColor('black');
var circleX;
var circleY;
var redValue = getRed(bufferData, 50, 50);
}
for (var i = 0; i < 200; i++) {
setActiveCanvas('buffer');
setStrokeColor('white');
setFillColor('white');
rect(0, 0, 320, 450);
setStrokeColor('black');
setFillColor('black');
circleX = 160 + Math.cos(i * 0.0314) * 40;
circleY = 225 + Math.sin(i * 0.0314) * 40;
circle(circleX, circleY, 50);
imgData = getImageData(0, 0, 320, 450);
setStrokeColor('white');
setFillColor('white');
rect(0, 0, 320, 450);
bufferData = getImageData(circleX - 50, circleY - 50, 100, 100);
for (var drawX = circleX - 50; drawX < circleX + 49; drawX++) {
for (var drawY = circleY - 50; drawY < circleY + 49; drawY++) {
if (getRed(imgData, drawX, drawY)==0) {
setRGB(bufferData, drawX, drawY, 0,0,0,0);
}
}
}
setActiveCanvas('canvas');
putImageData(bufferData, 0, 0);
}
function loads many issues
function loadImages(sources, call) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function()
{
if(++loadedImages >= numImages)
{
call(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = { img1: '1.jpeg', img2: '2.jpeg', img3: '1.jpeg', img4: '2.jpeg', img5: '1.jpeg', img6: '2.jpeg', img7: '1.jpeg' };
loadImages(sources, function(images) {
context.drawImage(images.img1, 0, 0, 140, 120);
context.drawImage(images.img2, 150, 0, 140, 120);
context.drawImage(images.img3, 300, 0, 140, 120);
context.drawImage(images.img4, 450, 0, 140, 120);
context.drawImage(images.img5, 600, 0, 140, 120);
context.drawImage(images.img6, 750, 0, 140, 120);
context.drawImage(images.img7, 900, 0, 140, 120);
});
This function add the rounded corners.
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img1=new Image();
img1.onload=function()
{
ctx.save();
roundedImages ( 10,10,140,120,10);
ctx.clip();
ctx.drawImage ( img1,10,10,140,120);
ctx.restore();
}
function roundedImages(x,y,width,height,radius)
{
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
img1.src="1.jpeg";
});
using cocos2d-x-3.13.1
I have create ScrollView with 88 buttons to start different in game levels.
Functionality i have: User can starts selected level. But only can scroll if initial tap position is not on button.
Functionality i want: User can scroll a ScrollView if his initial touch position is on button.
Creating ScrollView
containerLayer = cocos2d::LayerColor::create();
containerLayer->setContentSize(Size(visibleSize.width, visibleSize.height * 4.5));
containerLayer->setPosition(Point(0, -visibleSize.height * 3.7));
auto scrollView = cocos2d::extension::ScrollView::create();
scrollView->setContentSize(Size(containerLayer->getContentSize().width, containerLayer->getContentSize().height));
scrollView->setPosition(Point(visibleSize.width * 0.05, visibleSize.height * 0.05));
// set the scroll-direction for scroll-view
scrollView->setDirection(cocos2d::extension::ScrollView::Direction::VERTICAL);
scrollView->setViewSize(Size(visibleSize.width * 0.90, visibleSize.height * 0.8));
// set the content offset of the scrollview
scrollView->setContentOffset(Vec2(0, 0));
scrollView->setTouchEnabled(true);
// add / set the container-layer to the scrollview.
scrollView->setContainer(containerLayer);
// add scroll-view to your scene-layer.
this->addChild(scrollView, 100);
Adding buttons
int level = 1;
const Size buttonSize(100,50);
for (int h = 0; h < 22; h++) {
for (int w = 0; w < 4; w++) {
const Color4B buttonColor(random(0, 255), random(0, 255), random(0, 255), 255);
auto button = ui::Widget::create();
button->setContentSize(buttonSize);
button->setPosition(Point(containerLayer->getContentSize().width * 0.15 + this->getContentSize().width * 0.2 * w, containerLayer->getContentSize().height - containerLayer->getContentSize().height / 23 * (h + 1) + containerLayer->getContentSize().height / 46));
button->setTouchEnabled(true);
button->addClickEventListener([=](Ref* _sender)
{
auto scene = GameScene::createSceneWithLevel(level);
Director::getInstance()->replaceScene(TransitionFade::create(1.0, scene, Color3B(0, 0, 0)));
});
button->addChild(LayerColor::create(buttonColor, buttonSize.width, buttonSize.height));
scrollView->addChild(button);
level++;
}
}
One dirty way is to create a subclass of button, in which you could store the pointer of a ScrollView as the member variable:
auto button = _YourBtnClass_::create(pScrollView);
and you need to disable touch of that ScrollView:
pScrollView->setTouchEnabled(false);
finally, override onTouchBegan,onTouchMoved,onTouchEnded and onTouchCancelled in YourBtnClass, in which you would call the corresponding functions of pScrollView
Instead of cocos2d::extension::ScrollView I used cocos2d::ui::ScrollView, cocos2d::ui::Button and it met my requirements for ScrollView.
scrollView = cocos2d::ui::ScrollView::create();
scrollView->setDirection(ui::ScrollView::Direction::VERTICAL);
scrollView->setContentSize(Size(visibleSize.width * 0.9, visibleSize.height * 0.8)); // What user see
scrollView->setInnerContainerSize(Size(visibleSize.width * 0.9, visibleSize.height * 0.8 * 4.5));
scrollView->setBounceEnabled(true);
scrollView->setAnchorPoint(Point(0.5, 0.5));
scrollView->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height * 0.45 + origin.y));
int level = 1;
for (int h = 0; h < 22; h++) {
for (int w = 0; w < 4; w++) {
auto button = ButtonLevel::create(this, Point(scrollView->getInnerContainerSize().width / 5 * (w + 1), scrollView->getInnerContainerSize().height - scrollView->getInnerContainerSize().height / 22 * (h + 1) + scrollView->getInnerContainerSize().height / 44), level, canBePlayed);
button->addClickEventListener([=](Ref* _sender)
{
auto scene = GameScene::createSceneWithLevel(level);
Director::getInstance()->replaceScene(TransitionFade::create(1.0, scene, Color3B(0, 0, 0)));
});
scrollView->addChild(button);
level++;
}
}
this->addChild(scrollView, 100);
Also #include "ui/CocosGUI.h" is needed
How can I plot an array to an imageview as a graph?
I've been testing this in Playground and it works, but how can plot this as an imageview in an actual project?
let sineArraySize = 64
let frequency1 = 4.0
let phase1 = 0.0
let amplitude1 = 2.0
let sineWave = (0..<sineArraySize).map {
amplitude1 * sin(2.0 * M_PI / Double(sineArraySize) * Double($0) * frequency1 + phase1)
}
func plotArrayInPlayground<T>(arrayToPlot:Array<T>, title:String) {
for currentValue in arrayToPlot {
XCPCaptureValue(title, currentValue)
}
}
plotArrayInPlayground(sineWave, "Sine wave 1")
One way you could do this:
// this function creates a plot of an array of doubles where it scales to the provided width and the x-axis is on half height
func plotArray(arr: [Double], width: Double, height: Double) -> NSImage {
if arr.isEmpty { return NSImage() }
let xAxisHeight = height / 2
let increment = width / Double(arr.count)
let image = NSImage(size: NSSize(width: width, height: height))
image.lockFocus()
// set background color
NSColor.whiteColor().set()
NSRectFill(NSRect(x: 0, y: 0, width: width, height: height))
let path = NSBezierPath()
// line width of plot
path.lineWidth = 5
path.moveToPoint(NSPoint(x: 0, y: arr[0] * increment + xAxisHeight))
var i = increment
for value in dropFirst(sineWave) {
path.lineToPoint(NSPoint(x: i, y: value * increment + xAxisHeight))
i += increment
}
// set plot color
NSColor.blueColor().set()
path.stroke()
image.unlockFocus()
return image
}
var imageView = NSImageView()
imageView.image = plotArray(sineWave, 500, 200)
// have fun
I have a plane/board, with a grid, that is about 1100 x 1100. I have panning, zooming, and rotating working except for the fact that the board moves back to the center of the screen after it has been panned. So, if I don't pan the board at all then everything works. After I pan the board it moves back to the center of the screen when I try to rotate it. I cannot figure out how to change the origin of the camera so that it rotates around the center of the board. It seems like it rotates around the center of the camera.
var radius = 1500, theta = 45 * 0.5, onMouseDownTheta = 45 * 0.5;
var fov = 45;
var mouse2D = new THREE.Vector3(0, 10000, 0.5);
cameraX = radius * Math.sin(THREE.Math.degToRad(theta));
cameraY = 1000;
cameraZ = radius * Math.cos(THREE.Math.degToRad(theta));
camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(cameraX, cameraY, cameraZ);
scene = new THREE.Scene();
camera.lookAt(scene.position);
render();
ThreeBoard.prototype.render = function() {
mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse2D.y = - (event.clientY / window.innerHeight) * 2 + 1;
// rotate
if (isMouseDown && isShiftPressed && !isCtrlPressed) {
theta = ((event.pageX - mouse2D.x) * 0.5) + onMouseDownTheta;
cameraX = radius * Math.sin(THREE.Math.degToRad(theta));
cameraZ = radius * Math.cos(THREE.Math.degToRad(theta));
camera.position.set(cameraX, cameraY, cameraZ);
camera.lookAt(scene.position);
}
// pan
if (isMouseDown && isShiftPressed && isCtrlPressed) {
theta = ((event.pageX - mouse2D.x) * 0.5) + onMouseDownTheta;
cameraX += 10 * mouse2D.x;
// cameraY += 10;
cameraZ -= 10 * mouse2D.y;
camera.position.set(cameraX, cameraY, cameraZ);
// camera.lookAt(scene.position);
}
renderer.render(scene, camera);
};