Exploding things with JavaScript

JavaScript is a programming language that adds interativity to a website. It allows us to create Animations, Games and much more. Mo.js is a JavaScript animation library that lets you create an animation called a burst.

Getting started

1. Let's start by writing code in the console. Click on this link https://youngcoders-mo-remix.glitch.me/ to get started.

2. You should see a page with nothing but black.

3. Right click on the black page and then click Inspect.

4. Click on the Console tab shown below. You should see a message saying hi.



Now we can start writing some JavaScript! 😁

Let’s write some JavaScript!

In the console let's create a Variable (var) called burst. Type in the following code. When you have finished typing the code, hit the enter key.

You just wrote some JavaScript! 😎

Did you see the pink coloured burst at the centre of the screen? If not you can press the up arrow ▲ on your keyboard and press the enter key to see the burst again.

If you get any errors, you can click on the button to clear the console.

Now let’s try something a little more complicated

We can now start adding other settings to our burst. Type in the code below and hit the enter key. Feel free to adjust the numbers to whatever you like. This will change the settings.

var burst = new mojs.Burst({
  radius: { 0: 100 },
  count: 20,
  angle: { 0: 90 },
  opacity: { 1: 0 },
})
.play();

Here is a list of some of the burst settings and what they do.

// Create a variable called burst. This variable will store the Mo.js burst function.
var burst = new mojs.Burst({

  // Radius. How far the burst will spread. It starts at 0 and will grow to a size of 100.
  radius: { 0: 100 },
  
  // Count. How many circles will be in the burst.
  count: 20,
  
  // Angle. Start the burst at 0 and rotate 90 degrees.
  angle: { 0: 90 },
  
  // Opacity. 
  opacity: { 1: 0 },
})

// Play the Mo.js animation.
.play();

Now we can start adding some children to our burst. Children are the particles inside the burst. They have their own settings too!

var burst = new mojs.Burst({
  radius: { 40: 100 },
  count: 10,
  children: {
  
    // Shape of the particle. Other shapes include 'polygon', 'rect', 'polygon', 'zig-zag', 'curve', 'cross'
    shape: 'circle',
    
    // Radius of the child particle. Start at 0 radius and grow to 30.
    radius: { 0: 30 },
    
    // The colour of the child particle. Start at Cyan and change to Yellow
    fill: { 'blue' : 'red' },
    
    // Instead of the above, you can also add an array with square brackets [ ]. This means that each particle will have a different colour.
    fill: [ 'blue', 'red', 'yellow', 'white' ]
    
    // The duration of the animation. 2000 is 2 seconds.
    duration: 2000,
  }
})
.play();

We can also create Shapes.

Shapes have some different settings to bursts.

// Create a variable.
var circleBurst = new mojs.Shape({

  // The burst has no fill colour and will be hollow.
  fill: 'none',

  // Radius of the burst size in px.
  radius: 150,

  // Start at 0 and grow to 200px radius.
  scale: { 0 : 1 },

  // Stroke color. 'blue', 'red', 'yellow', 'pink', 'green'.
  stroke: 'white',

  // Stroke width.
  strokeWidth: 8,

  // Opacity of the stroke will start at .8 and transform to 0. i.e the circle will fade out.
  opacity: { .8 : 0 },

  // The duration of the animation. 2000 is 2 seconds.
  duration: 2000
})

// Play the animation.
.play();

Now let's write our code in Glitch!

To start a new workspace, click on the Remix button below.

Now write some code. Refer to this cheatsheet if you get stuck. Add as many animations as you like and experiment with changing settings.

To see your animation click on the Show Live button at the top left.

To see the animation again refresh the page or press the keyboard keys ctrl+r.

Below is an example of 2 animations that will play at the same time. You can add as many animations as you like.

var smallCircle = new mojs.Shape({
  fill: 'white',
  opacity: { 0.5 : 0 },
  radius: 50,
  scale: { 0 : 1 },
  duration: 600
}).play();

var largeCircle = new mojs.Shape({
  fill: 'none',
  opacity: { 0.8: 0 },
  radius: 200,
  scale: { 0: 1 },
  stroke: 'white',
  strokeWidth: 8,
  duration: 600
}).play();

var burst = new mojs.Burst({
  count: 6,
  radius: { 40: 90 },
  children: {
    fill: [ 'red', 'green', 'yellow', 'blue', 'hotpink', 'purple' ],
    opacity: 0.6,
    scale: 1,
    radius: { 7: 0 },
    duration: 1500,
    delay: 300,
  }
}).play();