2D - Art - Dot Shadows (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will learn how to make a “dot” version of another sprite, such as a fish:

Step 1 - Create a New Project

First, please create a new project, remove Sprite1 with Cody, and rename the “Empty1” sprite to “Pen”. Please also add a “Fish” sprite from the library.

Your project should look like this:

Step 2 - Adjust the Fish Sprite

Next, please make the fish sprite larger. You can set its size to 300. Also, please go to its “Costumes” tab and select the “fish-c” costume:

Step 3 - Make the Pen Sprite a Small Dot

Next, select the “Pen” sprite’s costume, and draw a small dot as its costume.

Step 4 - Add the Pen Extension

Now we are ready to add some code. First, please add the “Pen” extension, then add these 2 blocks to the “Pen” sprite to clear the stage when the project starts:

Step 5 - Make the Dot Scan from Left to Right

To scan the entire stage, we need to move the “Pen” sprite to different x positions. To do that, create a new variable “x”, and use a for-loop to make x go from -240 to 240, at a step size of 10. In other words, x will start at -240, then change by 10 to -230, then -200, and keep increasing until it becomes 240.

Now you should see the dot sliding from left to right:

Step 6 - Scan Bottom Up

Instead of scanning only one row, we can make the dot scan the entire stage bottom up as well. We can use another for-loop for and a new variable “y”. Y should go from -180 to 180, also at the step of 10:

Now for every X position, we make the dot go through all Y positions before we move the dot to the right.

Step 7 - Draw a Dot at Each Position

Now let’s draw a small dot at each position. First, we need to set the pen’s size to 10, so it draws a circle of size 10. Second, we need to make the pen go down and then go up right after we move it.

You should get a lot of small dots like this:

Step 8 - Make the Dots Move Faster

It is probably too slow for the dot to completely scan the entire stage. Let’s speed it up by increasing the pen size and step size to a larger number, such as 30:

Now we get bigger dots, and they can cover the entire stage pretty quickly:

Step 9 - Only Draw Dots Under the Fish

Now we are ready to scan for the fish sprite. We can add a condition that we would only draw a dot if the Pen sprite is touching the Fish sprite, using the “touching object” block. To make our scan accurate, you need to set the size of the Pen sprite to a small value like 1.

Step 10 - Skip Screen Refresh

To make our program run much faster, we are going to use a very useful technique. Make a new block in the “Pen” sprite called “draw dots”, and select “run without screen refresh”:

Next, move all blocks into this new block’s definition stack. This way, the computer will not update what we see on screen until the “draw dots” stack completes running.

Now your project should run much faster:

Step 11 - Switch back to smaller dots

To make the dots match the fish better, we can use smaller dots. Since our program runs much faster without screen refreshes, we can afford to use more dots as well. For example, this is what you get when the dot size and the step size are 20:

Step 12 - Set Pen to Random Colors

For the last step, let’s make our pen color random for each dot. To do that, you need to use the “set pen color” block, and also the “color” block to calculate a new random color:

Here is the final result:

Creative Ideas

There are many ways you can modify this project with your own creative ideas. Here are some examples:

Different Sprites: You can replace the fish with any other sprites, such as an animal or some words.
Multiple Sprites: You can make “dot shadows” for multiple sprites. To do that, you just need to change the condition to make a dot when the pen is touching any of those sprites.