
META TOPICPARENT 
name="IntroToCSF2018" 
Konva Group Activity 

Now we want to move the ball at a certain speed. Let's say 200 pixels per second. What we want to do is update the Y coordinate by 1/frameRate * dy, where dy is the distance to move per second (200):
%CODE{"javascript"}% 

> >  var dy=200;
circleRadius = 40; 
 // animate the circle
var newY=circle.y()+(1 / frame.frameRate) * dy;
circle.setY(newY); 

ay = 9.8 m/s^{2} 

< <  This gives the amount of acceleration that occurs each second. Of course we don't move in meters per second, we move in pixels per second. What this means is the thing falling increases it speed by 9.8 m/s for each second pasts. So, in out case we start a 0 velocity. For each second that something falls, the speed increases by 9.8 m/s more. What I have found to be a good amount is to increase the speed by 20 each second. Thus we should see the following (in pixels per second), if starting from y=50 on the screen: 
> >  This gives the amount of acceleration that occurs each second. Of course we don't move in meters per second, we move in pixels per second. What this means is the thing falling increases it speed by 9.8 m/s for each second pasts. So, in our case we start a 0 velocity. For each second that something falls, the speed increases by 9.8 m/s more. What I have found to be a good amount is to increase the speed by 20 each second. Thus we should see the following (in pixels per second), if starting from y=50 on the screen: 

Time 
Accel 
Velocity 
Position 
0s 
20 p/s^{2} 
0 p/s 
50 


x: Math.random() * (stage.getWidth()  radius) + radius,
y: Math.random() * (stage.getHeight()  radius) + radius, 

< <  radius: radius, 
> >  radius: circleRadius, 
 fill: "green",
stroke: 'black',
strokeWidth: 4, 