Why not celebrate National Coding week from 21st to 25th by using J2code?

Core

In this lesson, learners will programme a very simple animation using J2Code. The animation involves a helicopter flying across the computer screen and writing a good luck message for their favourite Olympic Hero.

This coding exercise can be used as a stand-alone activity or as an end point to a literacy-based research project where learners research and support different Olympic and Paralympic heroes.

Although it would be ideal to implement the idea during the Rio 2016 Games, the idea is transferable to a number of other contexts.

Aim

  • To create a simple animation using a visual code language.

Learning Outcomes

  • All children will create a simple animation of a sprite.
  • Most children will animate a second sprite and make the sprites “speak”.
  • Some children will experiment and make their own animations and interactions.

Learning Intentions

  • To develop an understanding of block coding.
  • To create a simple animation.
  • To write a simple program that accomplishes a specific goal.
  • To celebrate your Rio 2016 Olympic hero’s.

Cross curricular / Interdisciplinary learning Links

  • Literacy: Olympic research and project work
  • Maths: geometry – position and direction

Vocabulary

code, sprite, action window

Teaching Steps

Step One – Login to Glow and add a link tile

J2Code is part of the complete J2e toolsuite which can be purchased through the ‘App Library’, however if you do not wish to do this you can add J2Code as a free resource to your Launch Pad very easily.

Click on ‘App Library’ and then ‘Add Tile’ at the bottom right of the screen.

Glow

Fill in the required fields, click on ‘generate thumbnail’ then click ‘OK’.

Add title

You will be asked to confirm whose Launch Pads you would like to install J2Code on.  Click ‘SAVE’ and close the box. You’ve just added your first tile to Glow….well done!

To find J2Code click on ‘App Library’ on the top left of your screen.

Search ‘J2Code’ and click ‘Add to my Launch Pad’.  J2Code will now appear on your Launch Pad (you may have to scroll through a few pages to find it!)

 Step 2 – Open J2Code: Visual

This is the start screen…..don’t worry it’ll all become crystal clear soon!

Step 3 – Move the sprite

Unify

Use your mouse to move the sprite (currently a penguin) to the bottom left hand corner of the green square (the ‘action’ window). The action window is where you will see your computer animation start to take shape once you have written some code.

As you move the sprite you will notice the ‘x’ and ‘y’ co-ordinates change. Everything that happens in the action window is linked to a co-ordinate.

Step 4 – Change and re-name the sprite from a penguin to a helicopter

Click on the sprite button (it currently shows a little picture of a penguin).

A new menu will appear and you can pick from a range of sprites. Find and select the first helicopter sprite.

unify

Now use the ‘+’ button to select the second helicopter sprite. Your screen should now look like this and the penguin will have changed to the helicopter.

unify

Re-name the ‘sprite 1’ to ‘helicopter’ by clicking on the sprite tab along the top of the screen and selecting ‘rename’.

coding 23

Step 5 – Give your animation a background

The Helicopter (sprite) is just one ‘layer’ of your animation. You can add a new ‘layer’ by clicking on the ‘+’ tab.

coding 35

Click on the ‘+’ tab and select ‘backgrounds’ from the left hand menu.

coding 9

Select the picture of the sky and click ‘ok’.

Unify

Re-name the tab ‘sky’.

Step 6 – Move your helicopter

To get the helicopter to move we need to add some code using the visual code language. To do this click on the ‘</>’ tab.

We want our helicopter to move from the bottom left of the screen, to the middle of the screen, then turn right and fly across the screen. In order to get it to do this we need to drag in sections of the visual code into the programming window.

Click on ‘motion’ and drag in the block of visual code that says ‘move forward by’.

change the ‘100’ to ‘200’  unify

Now drag in the block of visual code that says ‘turn right by’ – the two blocks of code will slot together like a jigsaw.

Now drag in the block of visual code that says ‘move forward by’.



Re-cap: you have written some code that tells your helicopter to ‘move forward’, ‘turn right’ and ‘move forward’. Now you need to tell it when it should do this.

From the ‘events’ blocks select ‘when space key pressed’ and drag this around your existing move code.

Re-cap: Now you have written some code that tells your helicopter to ‘move forward’, ‘turn right’ and ‘move forward’ when you ‘press the space key’.



You can test your animation by pressing the ‘play button’   and then starting your animation by pressing the ‘space key’.

Step 7 – Review your code so far

One of the nice things about J2Code is that you can review what your code looks like in Javascript at anytime. Each block is essentially a block of javascript. To review your code click on the JS tab.

Step 8 – Add your skywriting

Now we are going to add some writing that will appear after the helicopter makes its 90-degree turn. To do this we are going to select the ‘print “???” at top left of the display’ block.

Drag the block into your program after the ‘turn right by 90-degree command block’. Between the speech marks type your good luck message.

You can test your animation by pressing the ‘play button’  and then starting your animation by pressing the ‘space key’.

Step 9 – Improve your animation

Now we are going to think about improving the animation sequence.

The first thing we are going to do is to get the writing to appear in the centre of the screen so it looks like the helicopter has written it. To do this we will change the print block to read ‘centre of the display’.

You can test that your animation has changed by pressing the ‘play button’  and then starting your animation by pressing the ‘space key’.

Next, we will get the helicopter to fly in smaller stages rather than just ‘up’ and ‘across’. We will also get it to fly off the screen.

To do this we will add more lines of ‘move’ code.

You can test your animation has changed by pressing the ‘play button’  and then starting your animation by pressing the ‘space key’.

Finally, we will improve the look of the helicopter by switching between the ‘helicopter 1’ sprite and ‘helicopter 2’ sprite every time the helicopter moves.

To do this we will introduce a block for the ‘Looks’ menu called ‘switch costume to’. We will add this block in after every ‘move forward’ alternating between ‘helicopter 1’ sprite and ‘helicopter 2’.

You can test your animation has changed by pressing the ‘play button’  and then starting your animation by pressing the ‘space key’.

Step 10 – Play with your code

You have created a great animation is just a few minutes. Now spend some time playing with the variables and code blocks to see if you can get your helicopter to do or say different things. For example, see if you can move the ‘print’ block to later on in the sequence so that the helicopter doesn’t fly over it.

Links to the Curriculum for Excellence

This idea can contribute to gathering evidence for the following Experiences and Outcomes.

 

This lesson plan was featured in a Glow Brochure which was sent to every school in Scotland, if you did not receive the brochure and would like us to send you one please email rmunify@rm.com 

Found this lesson useful? Tweet us a picture of your class @RMUnify using this lesson idea and you could be in with a chance to win £100 worth of amazon vouchers.

Post Comment

Blog Comments

back to top button Let's talk