Ready, Set, Code! Activity: Creating art using coding

April 29th, 2020

In this edited activity extract from Ready, Set, Code! Coding Activities for Kids you can learn how to create awesome art with only a computer.

Section of Scratch coding overlaid on digital artwork.

 

Cover of Ready, Set, Code! featuring the title on a green background

Released in February 2020, Ready, Set, Code! is packed full of simple and fun activities to get children creating with code, teaching them the value of a creative mindset and helping them to become technology creators rather than technology users. The below coding activity is an edited extract from Chapter 3: The Art of Code.

Creating art with code is like having an infinite supply of paint, a 3D canvas that can change whenever you want, and the ability to create images that change through time as well as space.

Even better – it’s easy to learn, and there are lots of different programs to try. Just code, create and repeat!

 

Note: this activity uses a free coding program called Scratch. You can find out more about Scratch and create your own coding projects through the Scratch website (external link). For more information, check out the Scratch FAQs (external link).

 

In this activity, we’re going to make our own digital art using Scratch. If you want to use an object from around the house for your artwork, first take some pictures of coins, stickers, food or other interesting shapes.

 

Step 1.  Create a new project in Scratch.

 

Step 2.  Choose a background.

 

Step 3.  Choose a sprite for your project.

Sprites are the characters that you will give instructions to in your Scratch coding projects. When you start a new project, the sprite is automatically a cat, but you can change it to another character.

 

Step 4.  There are many ways to make art with code. An easy place to start is by picking a favourite shape and repeating it over and over.

We’ve begun by using a circle-shaped sprite, a black background, and the following code (you can try other combinations.)

You won’t see the blocks called ‘erase all’ and ‘stamp’ right away. They are hidden inside the extensions area. To use them, click on ‘Extensions’ (the blue block below.)

Light blue tile with two white horizontal lines and a superscript plus sign.

Next, click on ‘Pen’ to access all the blocks you need to create art with your sprites.

Green tile with text 'Pen: Draw with your sprites' and graphic of a white pen with rainbow ink.

Code instructions: When green flag clicked. Pen erase all. Forever [Go to random position. Set ghost effect to 25. Set colour effect to pick random 1 to 200. Set size to pick random 50 to 150 per cent. Pen stamp.]

Digital artwork of multicoloured semi-transparent circles of different sizes on a black background.

 

Step 5.  You can change any of the effects to see how it alters the way your artwork looks.

What does the ‘ghost’ effect do? Try changing it to a higher or lower number to see what happens to your artwork.

Sometimes a really simple change, like changing the colour of your background, can make a big change to the overall feel of your art.

Digital artwork of multicoloured semi-transparent circles of different sizes on a pink-purple gradient background.

 

Step 6.  Now try choosing a different sprite by clicking on the ‘Choose a Sprite’ button. You can choose to use a pre-made sprite, draw your own or upload a picture from your computer.

Light blue circular tile with a white graphic of a cat head and superscript plus sign.

Below, we have chosen the melon sprite. You might like to try a different shape, or even photograph a familiar object and upload the photo to see how it looks. You will need to add code to the melon sprite to tell it what to do. This picture was made using the same code as in step 4.

Digital artwork of multicoloured semi-transparent watermelon slices of different sizes on a pink-purple gradient background.

 

Step 7.  If you choose a shape that isn’t symmetrical, like the melon sprite, you can start to play with the direction it points by adding an extra line of code.

Code instructions: When green flag clicked. Pen erase all. Forever [Go to random position. Set ghost effect to 25. Set colour effect to pick random 1 to 200. Set size to pick random 50 to 150 per cent. INSERT NEW LINE OF CODE: Point in direction pick random 1 to 360. Pen stamp.]

 

Step 8.  If you want more control over where your shapes appear on screen, you can get the shapes to follow your mouse by making simple changes to the code.

Code instructions: When green flag clicked. Pen erase all. Forever [EDIT LINE OF CODE: Go to mouse-pointer. Set ghost effect to 25. Set colour effect to pick random 1 to 200. Set size to pick random 50 to 150 per cent. Point in direction pick random 1 to 360. Pen stamp.]

 

Digital artwork of a spiral of multicoloured semi-transparent watermelon slices of different sizes on a black background.

This design is made by following the mouse pointer.

 

Step 9.  How about having even more control? You can change your code so that copies of the shape only appear when you click the sprite.

Change your code in the way shown below.

Code instructions: When green flag clicked. INSERT NEW LINE OF CODE: Set drag mode draggable. Pen erase all. Forever [Go to random position. Set ghost effect to 25. Set colour effect to pick random 1 to 200. Set size to pick random 50 to 150 per cent. Point in direction pick random 1 to 360.] INSERT NEW SECTION OF CODE: When this sprite clicked. Pen stamp.

 

 

 

Improvements

The great thing about computer-generated art is that you are in charge. If you can’t decide on the shape or the colour of the background, how about adding some buttons to your project so that the user can decide?

Step 1.  We have added three buttons to our project – one to change the background, one to change the sprite costume, and one to stop the code in case you want to take a picture of your art.

 

Step 2.  Changing the background

Choose a button sprite. On the ‘Costume’ tab, you can use the tools to add text to your button to make it clear what the button does. Add the code below, and make sure you have more than one backdrop in your project. You can add more backgrounds by clicking the ‘Choose a backdrop’ button in the bottom-left corner of the screen.

Orange button titled Change Backdrop. Code instructions: When this sprite clicked. Switch backdrop to next backdrop.

 

Step 3.  Changing the sprite’s costume

It’s a bit trickier to change the sprite’s costume with a button.

First, choose a button just like before, and add some text to it.

Next, choose the ‘send broadcast message’ block from the ‘Controls’ menu. This block lets you control other sprites by sending them hidden messages.

Orange button titled Change Costume. Code instructions: When this sprite clicked. Broadcast message1.

Finally, you need to tell your main sprite what to do when it receives a message. In this project, we want the costume to change each time a message is received.

Code instructions: When I receive message1. Next costume.

Don’t limit yourself to sprites inside the Scratch library! Remember that you can upload photos of things around the house to Scratch and add them to your project. We’ve used a drawing of a leaf in our example below.

 

Step 4.  Stop it!

Our last button is a stop button. This lets you stop the creation of the art when you are happy with it. You might like to print your art out and use it on cards. (Tip: you can add ‘hide’ blocks to the code for each of the buttons when you finish your artwork, if you want to save a picture of it without the buttons showing.)

Orange button titled Stop. Code instructions: When this sprite clicked. Stop all.

Digital artwork of multicoloured leaf stencils on a white background.

Our final artwork was made using a drawing of a leaf as the sprite.

 

You can view the finished project for this digital artwork activity on the Scratch website (external website).

 

 

Cover of Ready, Set, Code! featuring the title on a green background

Ready, Set, Code! Coding Activities for Kids introduces children to coding with illustrated step-by-step instructions for hands-on projects. Kids will learn how to create a chatbot, translate messages into different languages, construct a burglar alarm, make digital art and music, and launch a citizen science project – all while learning how to stay safe online.

Parents and educators can also get more out of this book with free PDF Teacher Notes. To find out more or purchase your copy, visit our website.

 

Heather Catchpole is a children’s author and founder of the phenomenally successful Careers with Code magazines. Heather is a passionate advocate for science, technology, engineering and maths and an entrepreneur and co-founder of Refraction Media.

Nicola O’Brien is the founder of Code Rangers, a start-up that teaches kids to code and helps teachers to bring coding to their schools. She currently works at the Australian Computing Academy, creating engaging curriculum-aligned content on digital technologies.