Ready, Set, Code! Activity: Creating art using coding
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.)
Next, click on ‘Pen’ to access all the blocks you need to create art with your sprites.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.)
You can view the finished project for this digital artwork activity on the Scratch website (external website).
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.