January Post 1
- Chelsea Yang
- Feb 5, 2021
- 2 min read
I practiced moving a shape. The shape moves off the right of the screen when the value of the x variable is greater than the width of the window. The value of x continues to increase, but the shape is not on the screen anymore. By using an if loop, I enabled the shape to move back to the left edge if it is off screen. The code tests if the value of x has increased beyond the width of the screen, and if it has, the value of x is set back to a negative value so that it enters the screen from the left again.
Next, I learnt how to bounce the shape back when it reaches an edge. The code flips the shape’s direction by changing the sign of the direction variable - if the direction variable is positive when the shape reaches an edge, the code flips it to negative.
I then experimented with how a group of variables can move a shape from any location to another at a range of speeds by calculating the tween postions.
var startX = 20; //initial x coordinate
var stopX = 160; //final x coordinate
var startY = 30; //initial y coordinate
var stopY = 80; //final y coordinate
var x = startX; //current x coordinate
var y = startY //current y coordinate
var step = 0.005; //createCanvas of each step(0.0 to 1.0)
var pct = 0.0; //percentage traveled(0.0 to 1.0)
function setup(){
createCanvas(240,120);
}
function draw(){
background(0);
if(pct<1.0){
x = startX + ((stopX-startX)*pct);
y= startY + ((stopX-startX)*pct);
pct += step;
}
ellipse(x,y,20,20);
}
Next, learnt how to bounce the shape back when it reaches an edge. The code flips the shape’s direction by changing the sign of the direction variable - if the direction variable is positive when the shape reaches an edge, the code flips it to negative.


I also learnt how to generate random values, and how to transform them into motion. The values from random() increase and the movement becomes more exaggerated. Using random values, I learnt how to move shapes around on screen. Random values can generate images that are more natural in appearance. When the background() function is not used, past locations are traced, so they new shapes only build on top of past ones. There is also a constrain() function to keep the circle from leaving the green. It limits a value to a specific range, which can be used to keep x and y within the boundaries of the drawing canvas.


Comments