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);
}
}
} |