Animate with code :: Varvara Guljajeva and Mar Canet

Animate with Code

1. Create a new butterfly.

Write the following line of code to create a new butterfly:

myButterfly = new butterfly();

Press RUN to compile your code

RESET / NEXT

2. Set a colour

Choose a colour for your butterfly using the Colour Picker below. Once selected copy the number into the second line of code, after the #, like in the example below.

myButterfly.setHexColor('#FF0000');

Click Colour Picker below to open

Press RUN to compile your code

BACK / NEXT

3. Set a scale

Scale refers to the size of an object. The number in brackets is the number that original size of the butterfly will be multiplied by. For example an input of (5) will make butterfly 5 times bigger.

myButterfly.setScale(5);

Press RUN to compile your code

BACK / NEXT

4. Set a shape

Setting a shape will give your butterfly a different wing pattern. Input a number between 1-5. Try all the numbers to see which one you like the most.

myButterfly.setShapeModel(2);

Press RUN to compile your code

BACK / NEXT

5. Set a speed

0 is no speed and 1 is the fastest. Input a speed between 0 and 1. Then select a decimal number, such as 0.01, to see what effect this has.

myButterfly.setSpeed(0.01);

Press RUN to compile your code

BACK / NEXT

6. Set a fly mode

Setting the fly mode changes the spread of the wings. Input a number between 1 and 3. Input 1 for the wings to touch and 3 for the wings to be furthest apart.

myButterfly.setFlyMode(3);

Press RUN to compile your code

BACK / NEXT

7. Set a position

Set the position of your butterfly in the 3D space. Input a value between 1 and 10 for each axis: The x-axis co-ordinate can change the position of the butterfly left or right; the y-axis up and down and the z-axis backwards or forwards.

myButterfly.setPosition(x,y,z);

Press RUN to compile your code

BACK / NEXT

8. Set a rotation

Setting the rotation of your butterfly in the 3D space. Keep the first and third numbers (x and z co-ordinates) set to 0, and only change the angle for the middle number (y co-ordinate), so that more of the wings are visible.

myButterfly.setRotation(0,Math.radians(90),0);

Press RUN to compile your code

BACK / NEXT

9. Add more butterflies

You can make more than one butterfly by copying the code from lines 1 - 8, and pasting it on a new line. Once pasted add '2' to instanceName to ‘myButterfly2’.

myButterfly2 = new butterfly();

At first you won’t see the new butterfly. You must change the position of the second butterfly to uncover it from underneath the first. Go back to 7 Set a position.

Press RUN to compile your code

BACK / NEXT

10. Create a GIF of your butterfly

When you’re happy with your butterfly animation you can save it as a GIF.

CREATE AND DOWNLOAD GIF

RESTART / BACK





Set fullscreen