Exercise
Modify the example to do the following:
The start and end point of the the animation path is to be defined by mouse click
The ellipse should move forward and backwards endlessly
Code Block | ||
---|---|---|
|
...
let startPos;
let endPos;
let curTime = 0;
let animSpeed = 5;
let animDuration = 2000;
let drawFlag = false;
function setup()
{
createCanvas(640, 480);
smooth();
startPos = createVector(0,0);
endPos = createVector(0,0);
}
function draw()
{
background(51);
// calc. the anim time
curTime += animSpeed;
if(curTime >= animDuration) {
curTime = 0;
}
// calc. the proportion of completion in the animation
var normTime = curTime * 1.0 / animDuration;
if(drawFlag)
{
stroke(255);
line(startPos.x,startPos.y,endPos.x,endPos.y);
// calculate the position of the circle on the line
let dir = p5.Vector.sub(endPos, startPos);
let pos = p5.Vector.add(startPos, p5.Vector.mult(dir,normTime));
ellipse(pos.x,pos.y, 20,20);
}
}
function mousePressed()
{
drawFlag = true;
curTime = 0;
startPos.set(mouseX,mouseY,0);
get(startPos.x, startPos.y);
}
function mouseDragged()
{
endPos.set(mouseX,mouseY,0);
}
function mouseReleased()
{
drawFlag = false;
print("released");
} |
...
Exercise 11
Modified the example to do the following:
- The start and end point of the the animation path is to be defined by mouse click
- The ellipse should move forward and backwards endlessly
...
Example Solution
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
let startPos; let endPos; let curTime = 0; let animSpeed = 5; let animDuration = 2000; let drawFlag = false; let animEndFlag = false; let clickFlag = false; function setup() { createCanvas(640, 480); smooth(); startPos = createVector(0,0); endPos = createVector(0,0); } function draw() { background(51); // calc. the anim time curTime += animSpeed; if(curTime >= animDuration) { curTime = 0; } // calc. the proportion of completion in the animation var normTime = curTime * 1.0 / animDuration; if(drawFlag) { stroke(255); line(startPos.x,startPos.y,endPos.x,endPos.y); // calculate the position of the circle on the line let dir = p5.Vector.sub(endPos, startPos); // move the circle on the line let pos = p5.Vector.add(startPos, p5.Vector.mult(dir,normTime)); ellipse(pos.x,pos.y, 20,20); } } function mousePressed() { if (clickFlag == false) { stroke(255, 0, 0); fill(255,0,0); drawFlag = true; curTime = 0; startPos.set(mouseX, mouseY, 0); clickFlag = true; } else { stroke(255); fill(255); endPos.set(mouseX, mouseY, 0); clickFlag = false; } print(clickFlag); } function mouseMoved() { if (clickFlag == true) { endPos.set(mouseX, mouseY, 0); } } |
Alternative Solution with Object
Code Block | ||
---|---|---|
| ||
let clickFlag = false; var myAnimators = []; let count; function setup() { createCanvas(640, 480); smooth(); stroke(200); fill(255); myAnimators = new Animator(); } function draw() { background(51); for(var i = 0; i < myAnimators.length; i++) { myAnimators.get(i).drawAnimator(); } } function mousePressed() { if (clickFlag == false) { myAnimators = new Animator(mouseX, mouseY); clickFlag = true; } else { myAnimators.endClick(mouseX, mouseY); clickFlag = false; } print(clickFlag); } function mouseMoved() { if (clickFlag == true) { myAnimators.endClick(mouseX, mouseY); } } class Animator { constructor(x, y){ this.drawFlag = true; this.curTime = 0; this.startPos = createVector(x,y,0); this.endPos= this.startPos; this.animSpeed = 5; this.animDuration = 2000; this.animEndFlag = false; } endClick(X, Y) { this.endPos.set(X, Y, 0); } drawAnimator() { // calc. the anim time if (this.curTime >= this.animDuration) { this.animEndFlag = true; } if (this.curTime <= 0) { this.animEndFlag = false; } if (this.animEndFlag) { this.curTime -= this.animSpeed; } else { this.curTime += this.animSpeed; } // calc. the proportion of completion in the animation var normTime = this.curTime * 1.0 / this.animDuration; if (this.drawFlag) { line(this.startPos.x, this.startPos.y, this.endPos.x, this.endPos.y); // calculate the position of the circle on the line let dir = p5.Vector.sub(this.endPos, this.startPos); let pos = p5.Vector.add(this.startPos, p5 |
...
.Veector.mult(dir, normTime));
ellipse(pos.x, pos.y, 20, 20);
}
}
} |