Up next in 10
How to Create Concentric Circles Animation in Scratch 3
30K views
Apr 13, 2024
This video provides a step-by-step guide to creating an engaging animation of concentric circles in Scratch 3. It involves a sprite (such as a cat) drawing circles sequentially, with increasing radius, changing pen color, and pen size.
View Video Transcript
0:00
Hello everyone, in this video, I will show you how to draw concentric circles in SQ3
0:08
First I will run the example to let you see the result, and I will introduce the example
0:17
source code during the sprite drawing the concentric circles. In this example, I will use the pen extension in SQ3, so you should click the add extension
0:30
button on the bottom left corner of the SQ3 editor to add the pen category to it
0:37
After that, you will see the pen category blocks. In this example, there is a custom variable with the name timeRadius
0:50
This custom variable is used to store each circle's radius, so it is called timeRadius
0:58
Because the circle's radius is now the same, the outer circle's radius is bigger than the
1:04
inner circle's radius. And when it draws different circles' time radius will also be changed
1:13
And there are also two custom blocks, one is initialize, the other is drawCircle
1:18
The initialize custom block is used to initialize different values. For example, it will call the pen category's eraseAll block to erase all drawings on the
1:30
screen to make the screen clear. And then it will call the sizeSizeTo 30% block in the looks category to make the spline smaller
1:45
And then it will call the sizePenSize and sizePenColor custom block to initialize the
1:53
pen size and pen color. And at last, it will initialize the custom variable timeRadius to 10
2:02
This is the radius of the first circle drawing on the screen
2:08
The custom block drawCircle is used to draw one circle. It has three input parameters, one is centerX, the other is centerY, and one is the radius
2:19
The centerX and the centerY are the center point coordinates of the circle and the radius
2:25
is the circle's radius. At first, it will call the pen category's penUp block to lift the pen because this can
2:36
avoid the sprite drawing unwanted lines on the screen. Then it will go to a point with X value, centerX, and Y value, centerY plus radius
2:53
This is one circle's topmost point here. For each circle, it is this point, topmost point
3:00
CenterX is the circle's center point X, Y coordinate, and Y, centerY plus radius is
3:08
the topmost point of each circle's Y coordinate. And then it will drag the point in direction, point in direction, where is it
3:21
Yes, here, point in direction, to the right side, make the sprite face to the east, to
3:31
the right side. And then it will use a penDown block. The penDown block is used here and then all the later movement of the sprite will draw lines
3:47
In this example, it will draw a circle. The other side is a repeat block
3:54
Repeat block in the control category, repeat. It will repeat 180 times
4:00
For each time, it will rotate to right 2 degrees. So after the repeat block, the sprite will rotate 360 degrees, which is a circle's degree
4:15
But for each loop, for each repeat, it will move some steps to rotate to 2 degrees before
4:23
rotate to 2 degrees. The steps is calculated by this formula. Because we know the circumference of the circle is calculated by 2 times pi times radius
4:38
and because the sprite will move 180 times, so for each time, it will move 2 times pi
4:46
times radius divided by 180. It will repeat 360 times in the loop
4:59
So for each time, it will turn 1 degree. So after the 360 times repeat, the sprite will rotate around the center part
5:18
And the steps, each loop step will be calculated by 2 times pi times radius divided by 360
5:30
You know? Okay, but if you use 360, the sprite will move slower
5:36
So we change it to 180. And each time, it will rotate to right 2 degrees
5:49
After the loop, the sprite will complete draw the circle. So call the pinup again
6:02
Then the sprite will now draw lines before it draws the next circle
6:11
The main block is here. When the green flag is clicked, block
6:20
And then call the initialize block. And then call the show block in the looks category
6:28
This will show the sprite. And it will repeat 10 times. For each time, it will draw one circle
6:35
So it will draw 10 circles. In one loop, it will call the draw circle custom block
6:45
And the coordinates are 0, 0, and the radius is time radius
6:52
After it draws one circle, it will change the time radius by 15
6:56
Then the next circle will be larger than the inner circle. And change the pin size by 1 and change the pin color by 10
7:05
This is what you can see on the screen. After the repeat, it will call the hide block in the looks
7:15
category to hide the sprite. OK. This is all for this video
7:20
Thank you very much
#Comics & Animation
#Crafts
#Programming
#Software
#Visual Art & Design