Difference: KonvajsActivity (1 vs. 8)

Revision 82019-05-01 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Konva Group Activity

Line: 95 to 95
  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"}%
Added:
>
>
var dy=200; circleRadius = 40;
  // animate the circle var newY=circle.y()+(1 / frame.frameRate) * dy; circle.setY(newY);
Line: 119 to 121
 
ay = 9.8 m/s2
Changed:
<
<
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/s2 0 p/s 50
Line: 134 to 136
  x: Math.random() * (stage.getWidth() - radius) + radius, y: Math.random() * (stage.getHeight() - radius) + radius,
Changed:
<
<
radius: radius,
>
>
radius: circleRadius,
  fill: "green", stroke: 'black', strokeWidth: 4,

Revision 72019-03-18 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Konva Group Activity

Changed:
<
<
To be done in class as a group. Each student turns in result by Dec 14

Moodle

>
>
To be done in class as a group. Each student turns in result by May 2

Moodle
 

Goal

Learn how to use an object oriented graphic library in javascript.

Revision 62018-12-12 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Konva Group Activity

Line: 73 to 73
  Consider the following code: %CODE{"javascript"}%
Changed:
<
<
var square.angle = 0; var square.rps = 0.05; // revolutions per second
>
>
square.angle = 0; square.rps = 0.05; // revolutions per second
 %ENDCODE%

Now lets make a function to update the square:

Revision 52018-12-03 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"
Changed:
<
<

Konva Activity

>
>

Konva Group Activity

To be done in class as a group. Each student turns in result by Dec 14

Moodle

 

Goal

Learn how to use an object oriented graphic library in javascript.

Revision 42018-11-29 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Konva Activity

Goal

Line: 69 to 69
  Consider the following code: %CODE{"javascript"}%
Changed:
<
<
var angle = 0; var rps = 0.05; // revolutions per second var anim = new Konva.Animation(function(frame) {
>
>
var square.angle = 0; var square.rps = 0.05; // revolutions per second %ENDCODE%

Now lets make a function to update the square: %CODE{"javascript"}% function updateSquare(frame) {

  // Animate the square
Changed:
<
<
angle = frame.timeDiff/1000 * rps * 360; square.rotate(angle);
>
>
square.angle = frame.timeDiff / 1000 * square.rps * 360; square.rotate(square.angle); }

var anim = new Konva.Animation(function(frame) { updateSquare(frame);

 }, layer);
Added:
>
>
 anim.start(); %ENDCODE%
Step 3 - bounce circle
Line: 89 to 98
  circle.setY(newY); %ENDCODE%
Changed:
<
<
Of course it doesn't bounce, how do we do that? Use stage.getHeight() to get the height of the screen.
>
>
Of course it doesn't bounce, how do we do that? Use stage.getHeight() to get the height of the screen.
 %CODE{"javascript"}% if ((newY + circleRadius) > stage.getHeight() || (newY - circleRadius) < 0) {
Line: 102 to 110
  We don't update the position on a bounce. Why?
Changed:
<
<
Note that we use || for or in javascript. WE use && for and! Also note that you can still drag it!
>
>
Note that we use || for or in javascript. WE use && for and! Also note that you can still drag it!
 
Step 4 - bounce circle like a ball!

To this we need to simulate gravity and the dampening effect from each bounce. First we need to model the acceleration of gravity when falling, and the deceleration caused by gravity on rising. Consider:

Line: 121 to 127
 
5s 20 p/s2 100 p/s 250
Let's look at some code to do this! %CODE{"javascript"}%
Changed:
<
<
var dy = 0; // current speed of the ball in pixels per second var dir = 1; // direction accel (1 down, -1 up); var accel = 20; // acceleration in pixels/s^2 var damp = 0.8; // amount of velocity to retain after bounce

%ENDCODE%

Step 5 - Throw the ball

What if we want to throw the ball using the mouse? We want to "pick up the ball and throw it". What does this mean in a program.

First, think about what we are doing to an object when we throw it.

Now we know how to drag a ball with the mouse, can we infer the direction and velocity of the ball from the movement of the ball while we drag it?

<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->
>
>
circle = new Konva.Circle({
 
Changed:
<
<
next
<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

next</pre> %CODE{"javascript"}%

>
>
x: Math.random() * (stage.getWidth() - radius) + radius, y: Math.random() * (stage.getHeight() - radius) + radius, radius: radius, fill: "green", stroke: 'black', strokeWidth: 4, draggable: true }); circle.dy = 0; // current speed of the ball in pixels per second circle.accel = 20; // acceleration in pixels/s^2 circle.damp = 0.90; // velocity to retain after bounce circle.dx = Math.random() * 100; // current x speed of the ball in pixels per second %ENDCODE%

Now let's look at some code to bounce the ball... %CODE{"javascript"}% function updateCircle(frame) { // animate the circles

var newY = circle.y() + frame.timeDiff / 1000 * circle.dy; // Check if we hit the floor if ((newY + circle.radius()) > stage.getHeight()) { circle.dy = circle.dy * -1; circle.dy = circle.dy * circle.damp; circle.dx = circle.dx * circle.damp; // Check if we hit the ceiling } else if (newY + circle.radius() < 0) { circle.dy = circle.dy * -1; } else { circle.setY(newY); } // compute the newx speed based on the effect of gravity circle.dy = circle.dy + circle.accel;

 
Added:
>
>
// compute x movement var newX = circle.x() + frame.timeDiff / 1000 * circle.dx; if ((newX + circle.radius()) > stage.getWidth() || (newX - circle.radius()) < 0) { circle.dx = circle.dx * -1; circle.dx = circle.dx * circle.damp; } else { circle.setX(newX); } }
 %ENDCODE%
Changed:
<
<
>
>
Step 5 - Can we do more?
  • Add multiple circles?
  • Compute a collision between objects?
  • Make the cirles "throwable"?
Get at less steps 1-4 working, and on more feature, and turn in link.
 
META FILEATTACHMENT attachment="Screen_Shot_2018-11-26_at_10.09.13_AM.png" attr="" comment="" date="1543245013" name="Screen_Shot_2018-11-26_at_10.09.13_AM.png" path="Screen_Shot_2018-11-26_at_10.09.13_AM.png" size="8142" user="JimSkon" version="1"
META FILEATTACHMENT attachment="Screen_Shot_2018-11-26_at_10.11.29_AM.png" attr="" comment="" date="1543245099" name="Screen_Shot_2018-11-26_at_10.11.29_AM.png" path="Screen_Shot_2018-11-26_at_10.11.29_AM.png" size="9245" user="JimSkon" version="1"

Revision 32018-11-26 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Konva Activity

Goal

Line: 119 to 119
 
3s 20 p/s2 60 p/s 110
4s 20 p/s2 80 p/s 170
5s 20 p/s2 100 p/s 250
Changed:
<
<
fgg
>
>
Let's look at some code to do this!
 %CODE{"javascript"}%
Added:
>
>
var dy = 0; // current speed of the ball in pixels per second var dir = 1; // direction accel (1 down, -1 up); var accel = 20; // acceleration in pixels/s^2 var damp = 0.8; // amount of velocity to retain after bounce
  %ENDCODE%
Added:
>
>
Step 5 - Throw the ball

What if we want to throw the ball using the mouse? We want to "pick up the ball and throw it". What does this mean in a program.

First, think about what we are doing to an object when we throw it.

Now we know how to drag a ball with the mouse, can we infer the direction and velocity of the ball from the movement of the ball while we drag it?

 
Deleted:
<
<
next
 
<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

Revision 22018-11-26 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="IntroToCSF2018"

Konva Activity

Goal

Line: 6 to 6
 Learn how to use an object oriented graphic library in javascript.
Step 1 - Getting Started
Added:
>
>
We can use jsfiddle, as before, to do our coding. Here is a link to a jsfiddle that includes Konva: https://jsfiddle.net/jimskon/ahm4xc50/
 Let's start with a simple draggable circle: %CODE{"javascript"}% var stage = new Konva.Stage({
Line: 105 to 107
 
Step 4 - bounce circle like a ball!

To this we need to simulate gravity and the dampening effect from each bounce. First we need to model the acceleration of gravity when falling, and the deceleration caused by gravity on rising. Consider:

Deleted:
<
<
ay = -10.3 m/s2
 
Changed:
<
<
This gives the amount of acceleration that occurs each second. Of
>
>
ay = 9.8 m/s2

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:

Time Accel Velocity Position
0s 20 p/s2 0 p/s 50
1s 20 p/s2 20 p/s 50
2s 20 p/s2 40 p/s 70
3s 20 p/s2 60 p/s 110
4s 20 p/s2 80 p/s 170
5s 20 p/s2 100 p/s 250

fgg

 
<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

Revision 12018-11-26 - JimSkon

Line: 1 to 1
Added:
>
>
META TOPICPARENT name="IntroToCSF2018"

Konva Activity

Goal

Learn how to use an object oriented graphic library in javascript.

Step 1 - Getting Started

Let's start with a simple draggable circle:

<-- SyntaxHighlightingPlugin -->
var stage = new Konva.Stage({
  container: 'container',   // id of container <div>
  width: 500,
  height: 500
});

// then create layer
var layer = new Konva.Layer();

// create our shape
var circle = new Konva.Circle({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

// add the shape to the layer
layer.add(circle);
stage.add(layer);
<-- end SyntaxHighlightingPlugin -->
Step 2 - add a square

Look here for Konva documentation: https://konvajs.github.io/docs/overview.html

Can we add a square? How? Let's add a regular polygon!

<-- SyntaxHighlightingPlugin -->
var square = new Konva.RegularPolygon({
  x: (stage.getWidth() / 4)*3,
  y: stage.getHeight() / 2,
  sides: 4,
  radius: 70,
  fill: 'blue',
  stroke: 'black',
  strokeWidth: 4
});
layer.add(square);
<-- end SyntaxHighlightingPlugin -->

Screen_Shot_2018-11-26_at_10.11.29_AM.png

Can we rotate the square?

<-- SyntaxHighlightingPlugin -->
square.rotate(45);
<-- end SyntaxHighlightingPlugin -->
Step 2 - spin square

Can we animate the square by making it spin?

We can use the Konva animation object. This runs and updates the screen quickly (I get around 60 frames a second). What does this mean? It means that you run code that changes the objects on the screen by the amount desired for every frame.

We need know how much time has passed since the frame, and thus how much change to make. We can access the time since the last frame with frame.timeDiff, the time in milliseconds since the last frame. This number changes with system load. But if we make changes based on the time, the screen changes will be constant despite the variation in frame rate (this is true for all animation systems). You can allow access frame.frameRate, the current number of frames per second.

If we multiply the timeDiff/1000 times the amount to rotate per second, we get the amount to rotate for the last frame time.

Consider the following code:

<-- SyntaxHighlightingPlugin -->
var angle = 0;
var rps = 0.05; // revolutions per second
var anim = new Konva.Animation(function(frame) {
  // Animate the square
  angle = frame.timeDiff/1000 * rps * 360;
  square.rotate(angle);
}, layer);
anim.start();
<-- end SyntaxHighlightingPlugin -->
Step 3 - bounce circle

Let's make the ball bounce. First let's reduce the ball size to 30.

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):

<-- SyntaxHighlightingPlugin -->
// animate the circle
  var newY=circle.y()+(1 / frame.frameRate) * dy;
  circle.setY(newY);
<-- end SyntaxHighlightingPlugin -->

Of course it doesn't bounce, how do we do that? Use stage.getHeight() to get the height of the screen.

<-- SyntaxHighlightingPlugin -->
if ((newY + circleRadius) > stage.getHeight() ||
        (newY - circleRadius) < 0) {
        dy = dy * -1;
      } else {
        circle.setY(newY);
      }
<-- end SyntaxHighlightingPlugin -->

We don't update the position on a bounce. Why?

Note that we use || for or in javascript. WE use && for and! Also note that you can still drag it!

Step 4 - bounce circle like a ball!

To this we need to simulate gravity and the dampening effect from each bounce. First we need to model the acceleration of gravity when falling, and the deceleration caused by gravity on rising. Consider:

ay = -10.3 m/s2

This gives the amount of acceleration that occurs each second. Of

<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

next

<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

next

<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

next</pre>

<-- SyntaxHighlightingPlugin -->

<-- end SyntaxHighlightingPlugin -->

META FILEATTACHMENT attachment="Screen_Shot_2018-11-26_at_10.09.13_AM.png" attr="" comment="" date="1543245013" name="Screen_Shot_2018-11-26_at_10.09.13_AM.png" path="Screen_Shot_2018-11-26_at_10.09.13_AM.png" size="8142" user="JimSkon" version="1"
META FILEATTACHMENT attachment="Screen_Shot_2018-11-26_at_10.11.29_AM.png" attr="" comment="" date="1543245099" name="Screen_Shot_2018-11-26_at_10.11.29_AM.png" path="Screen_Shot_2018-11-26_at_10.11.29_AM.png" size="9245" user="JimSkon" version="1"
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback