How to Draw a Circle in Scratch 2
Scratch Resources
In Drawing a foursquare we used the commands "move 50 steps" and "plough clockwise 90 degrees" four times each. To shorten this job we can utilise the repeat command. Wrapping blocks in a echo allows us to reuse the logic. Draw a Circle A calculator can only draw directly lines, but nosotros can create the […]Command Activity Kickoff a sequence of commands running when the flag above the stage is clicked. Go forward a number of steps (or astern for negative steps) Rotate pen to correct Rotate pen to left Clear the cartoon Return pen to the middle of screen Do not depict a line as sprite moves Depict a […]This tutorial is based off an extract from The Absolute Beginner'due south Guide to Coding Using Scratch hard copies and digital copies tin be purchased on Amazon Drawing in Scratch is a lot like drawing with a pen and paper, except in guild to draw something in Scratch, you take to tell the computer in which […]This tutorial is based off an excerpt from The Absolute Beginner'southward Guide to Coding Using Scratch hard copies and digital copies tin can be purchased on Amazon On the Scratch website, click the Create menu particular at the peak of the spider web page. When you commencement open Scratch you will run into something similar to the sketch […]If we wanted to keep track of the score in a game, we stored the electric current score in a variable. But what if we had a game with 100 levels and we wanted to keep runway of the score that the player got at each level? Unfortunately, variables tin can just shop Ane affair at time, […]Adding images is a bully mode to add to a program. Simply in that location are some things to keep in mind: Your project must be saved! Your image must exist saved in the same directory every bit your project Your epitome must be saved equally one of the post-obit formats: GIF, JPG, TGA, or PNG If we […]Processing has several functions like ellipse(), rect(), and fill() Those functions are provided past the makers of Processing to brand our life easier when drawing and coloring shapes. We can also make our ain functions! Functions are swell for making reusable lawmaking. If we perform the same chore over and over again, we can simply […]For loops do the verbal same thing as while loops except they are formatted differently. Merely like while loops, nosotros use for loops to make the boring, repetitive tasks of programming a lot easier. Some programmers like for loops meliorate than while loops because they are more readable, while other programmers like while loops better […]If you wanted to draw 10 identical ellipses in a row, you could write 10 ellipse functions like then: Writing out 10 ellipse functions is non very hard, simply what if you wanted to describe 200 ellipses or yard ellipses? It would be a lot of work to write all those ellipse functions (and even […]We are going to create a program in which a ball bounces off the four walls of the screen. Each time the ball hits a wall, it changes color. When programmers write large programs, they beginning write a tiny clamper of the program and then check to encounter if it is working before they motility […]
Repeat
In Drawing a foursquare nosotros used the commands "movement l steps" and "turn clockwise 90 degrees" 4 times each. To shorten this task nosotros can use the repeat command. Wrapping blocks in a echo allows us to reuse the logic.
Describe a Circle
A figurer tin only draw straight lines, merely we can create the appearance of a curved line by drawing a bunch of of tiny lines that, when connected together, await like a circle
Since a circle has 360 degrees, we can create a circle by making 360 tiny lines, each one pixel long. Later on each line is fatigued, we turn the pen 1 caste to the right.
What if you wanted to draw a circle to the left? You could repeat the aforementioned commands except change the command "right" to the command "left."
To brand the circle bigger nosotros can change the length of line (For case: move iii).
Drawing a Triangle
Nosotros can also utilise the echo command to easily make an equilateral triangle (a triangle in which the length of all three sides are equal). Since each of the internal angles must besides be equal we can create a triangle by rotating the pen 120 degrees after each line is drawn.
Common Tasks
Drawing a Foursquare
This tutorial is based off an excerpt from The Accented Beginner'south Guide to Coding Using Scratch hard copies and digital copies can be purchased on Amazon
Drawing in Scratch is a lot like cartoon with a pen and paper, except in society to depict something in Scratch, you accept to tell the figurer in which direction to describe the line and how far to describe the line.
By convention, we will use a sprite that looks similar a green triangle when drawing every bit an aid to visibility. You tin can think of this triangle as a pen. Whichever direction the pen is pointing is the direction the line will be drawn. It is ok to continue using the cat sprite or you tin can choice your own shape.
Step i
The first thing we need to do is draw a direct line. To do this, nosotros volition demand to put the pen down. Pen down is a control cake in the Pen section of the block palette. So we will need to move the sprite. Move is a command in the Motion section. Fix movement to 50 steps.
Step ii
When you click on the flag above the stage, the pen volition move across the screen and in that location will be a line from where the pen started to where the pen concluded.
Footstep 3
At present nosotros want to describe the side of the rectangle. To change the direction of pen use the turn clockwise cake. Set the turn to ninety degrees. This tells the program to rotate the pen 90 degrees to the right. The pen will change direction and will at present be facing down.
Side by side, describe the side if the square past connecting another move fifty steps block. Your programme should look like this.
And when your program runs, it should draw 2 sides of a foursquare like and so:
Step 4
Yous can encounter where this is going. Snap together a couple more plow and move command blocks to complete your programme.
We manage to create a foursquare! In futures chapters nosotros will learn how to describe triangles and circles
Scratch – Basic Program
This tutorial is based off an extract from The Accented Beginner'south Guide to Coding Using Scratch hard copies and digital copies can be purchased on Amazon
On the Scratch website, click the Create menu detail at the top of the web page. When yous first open Scratch you will see something like to the sketch below.
I of the kickoff thing y'all will notice is that at that place is a picture of a cat in the middle of the phase area. The true cat is called a
sprite
. A sprite is an object that performs actions in the program. You tin can change your sprite's image by clicking on the Costumes Tab in the Block Palette.
Making a program in Scratch is a snap because everything we want to tell the computer to do can exist made by plumbing equipment together the command blocks. For our first program we will make the cat say "Hello World."
Step 1
The first thing nosotros need is a way to start the program running. Click on
Events
in the block palette.
This volition reveal a the issue command blocks. Nosotros would like the program to start running whenever the dark-green flag higher up the stage area is clicked. Elevate the when flag clicked block into the script surface area.
Step 2
Next, click on
Looks
in the block palette. Drag the
say
block into the script area, connecting it to the when flag clicked block.
Footstep 3
Double click the world "Hello!" and modify it to "Howdy Globe"
That's it. You have written your starting time plan in Scratch.
Running your program
To run your program, click on the dark-green flag above the phase area. Yous should see your sprite say "Hi World."
Arrays
If we wanted to continue rails of the score in a game, we stored the current score in a variable. Simply what if we had a game with 100 levels and we wanted to go on rails of the score that the player got at each level?
Unfortunately, variables can only store Ane thing at time, which means nosotros would accept to declare and initialize 100 variables in our program. Doing all that writing is very tedious, which is why we use arrays to initialize a lot of variables at one time. An array is like a list of variables.
How Arrays Work
Every particular in the array must be the same data blazon, which means that an array can merely store all integers or all data type array proper noun nosotros are initializing the assortment with five elements the brackets hateful that we are declaring an assortment booleans or all strings.
An array has a stock-still size. This ways that when y'all declare the array, you must tell Processing how many items you lot are going to store in the assortment. So if yous tell Processing you lot desire five items in your assortment you lot tin can not increase the assortment size to 6 or subtract the array size to 2 later in your program.
Adding or Changing Values in an Array
Now that we've instantiated an array, we need to learn how to add together a value or modify a value in an array. We can call up of arrays as a bunch of boxes lined up in a row, the first box is labeled with 0, the second with 1, the tertiary with 2, and so on, for all the boxes in the array. These numbers are chosen
alphabetize positions
and they are the aforementioned for every assortment.
We assign a value to the array by writing the array name and the index position of of the value between brackets.
int[] scores = new int[5]; scores[0] = iii; scores[one] = 2; scores[2] = 3; scores[3] = 5; scores[4] = 1;
int[] scores = new int[v]; scores[0] = 3; scores[ane] = 2; scores[2] = 3; scores[three] = v; scores[4] = 1; for (int i = 0; i < scores.length; i++) { println("Score " + i + " is " + scores[i]); }
Finding the size of an Array
To apace find the size of the array, nosotros can suspend the .length function to the array name. In the post-obit example, Processing will print to the panel: "The size of times is: 6."
int[] times = {12, 34, 56, 14, 39, 13}; println("The size of times is: " + times.length); Images
Adding images is a great way to add to a plan. Merely there are some things to keep in mind:
- Your project must be saved!
- Your image must exist saved in the aforementioned directory equally your projection
- Your prototype must exist saved as one of the post-obit formats: GIF, JPG, TGA, or PNG
If we wanted to utilize an image called turtle.jpg in a plan chosen TurtleImage, we would salve information technology into the same directory as the programme.
Make sure your images are saved to the right place! You can quickly notice the directory your project is saved in past going to Sketch > Show sketch folder.
When we use an paradigm in a program, we must first load the image into a variable with the datatype of PImage. We load the image inside the setup() function considering loading the image elsewhere will reduce the speed of the programme.
Bouncing Epitome
To add an prototype to your projection you must first relieve your project somewhere on your computer. And then you must salve the images y'all want to use to the aforementioned directory equally the project the image is existence used in
int xPos = 100; int yPos = 100; int xSpeed = two; int ySpeed = iii; PImage turtle; int turtleImageHeight = 80; int turtleImageWidth = 125; void setup() { size(500, 300); turtle = loadImage("turtle.jpg"); } void draw() { groundwork(255, 255, 255); // Check if turtle hitting right wall if (xPos > width - (turtleImageWidth / 2)) { xSpeed *= -1; } // Check if turtle hit left wall if (xPos < 0 + (turtleImageWidth / 2)) { xSpeed *= -ane; } // Bank check if turtle hit bottom wall if (yPos > elevation - (turtleImageHeight / 2)) { ySpeed *= -one; } // Bank check if turtle hit pinnacle wall if (yPos < 0 + (turtleImageHeight / 2)) { ySpeed *= -1; } /* Adjust the x and y-coordinates of the center of the circle */ xPos += xSpeed; yPos += ySpeed; imageMode(CENTER); prototype(turtle, xPos, yPos); } If your epitome is not showing up in your project, check to make sure that you spelled the name of the image exactly every bit it appears in the file directory (including the format of the image, like .jpg or .png)
Functions
Processing has several functions like ellipse(), rect(), and fill() Those functions are provided past the makers of Processing to make our life easier when drawing and coloring shapes.
We can too make our own functions! Functions are cracking for making reusable code. If we perform the same chore over and once more, nosotros can simply call the function rather than rewriting the same block of code over and over again.
Why utilize functions?
We as well use functions to break upwards our lawmaking into small, easily read parts. So far, we have only made small programs with one big chunk of lawmaking, only when you create a program with 200 or more than lines, breaking your lawmaking upwardly into functions volition help you non only read your code but too fix errors in your code
Syntax
Sometimes nosotros use functions to summate a value and then return that value to the main programme. It is important to note that a role tin only return Ane value. Notwithstanding, we can pass as many parameters as we want to the function.
The
role name
is the proper noun we call whenever we want to utilise a function in our programme
The
render type
is the information type that the function will return A function that returns a value must use the return keyword in the program. The
render
keyword tells Processing to return a particular value from the program.
Parameters
are the values inside the parenthesis. A function tin take as many parameters as you want. Each parameter must have a information type associated with information technology.
Using a Part:
In order to utilize a part, we must call it from our primary trunk of code. To phone call a function nosotros simply write the office'due south name followed by the parameters expected by the role. For example, nosotros would phone call the above programme like so:
multiplyTwoNumbers(4, v);
Since the function is expecting ii integers as parameters, you lot MUST call the role with two integers. An fault will occur if you pass the wrong data type or if you pass also many or as well little parameters.
Role Example
int multiplyByFive(int n) { return due north * five; } void setup() { println("Multiply 3 by 5: " + multiplyByFive(iii)); } Sometimes we practise not want to return annihilation from a function. When that happens the return type is chosen
void
. When the return type is void we do non use the return keyword.
The setup() and depict() Functions
Two functions, setup() and describe() are special functions offered by Processing. These two functions are never chosen by u.s.a., rather Processing calls them automatically.
For Loops
For loops do the exact aforementioned thing as while loops except they are formatted differently. Just like while loops, we use for loops to brand the boring, repetitive tasks of programming a lot easier. Some programmers like for loops better than while loops considering they are more than readable, while other programmers like while loops better because they are easier to empathize.
We are using the variable "count" to count the number of times we volition repeat the cake of code. There are three parts to the for loop, the first part,
int count = 0
, tells the computer to start with the value 0 for count. The second part of the loop,
count < 4
, tells Processing to keeping running the loop while the count is less than 4. The third part of the loop,
count++
, tells Processing to increment the count variable by 1 every time the loop finishes.So, in the example above, if nosotros outset at 0 and cease at four we will loop a total of 4 times (count = 0, count = 1, count = 2, count = 3) .
Example
Lets say nosotros desire to sum all the integers from i to 10 (e.g. 1 + 2 + 3 +… + 9 + 10). An easy fashion to do this would be to use a for loop.
int sum = 0; for (int count = 1; count <= 10; count++) { sum += count; } println("The sum of all integers from one to x is: " + sum); Lets examine what is happening in this loop. We start at 1 (count = 1), and finish at 11 (count <= 10). Kickoff, Processing checks to meet if 1 is less than or equal to xi. Since it is, Processing executes the code in the loop body. In the loop body we practise a unproblematic math functioning, which is calculation the current count to the sum. When the loop is finished, which ways that it reaches the closing curly bracket ( } ), the count is incremented by one. Processing then checks to see if the count is less than or equal to 10, if so, information technology executes the code in the loop body. It will keep looping until the count is greater than x.
When the loop is finished, Processing will impress:
The sum of all integers from 1 to 10 is: 55
While Loops
If you wanted to draw 10 identical ellipses in a row, you could write 10 ellipse functions like so:
size(500, 300); //Declare and initialize variables int xPos = xxx; int yPos = 150; int diameter = 40; int space = 49; // Draw 10 circles ellipse(xPos, yPos, bore, bore); ellipse(xPos + space, yPos, diameter, diameter); ellipse(xPos + 2 * space, yPos, diameter, bore); ellipse(xPos + 3 * space, yPos, diameter, diameter); ellipse(xPos + 4 * space, yPos, diameter, diameter); ellipse(xPos + 5 * space, yPos, diameter, bore); ellipse(xPos + six * space, yPos, diameter, diameter); ellipse(xPos + 7 * space, yPos, diameter, diameter); ellipse(xPos + viii * infinite, yPos, diameter, diameter); ellipse(xPos + ix * infinite, yPos, diameter, diameter);
Writing out 10 ellipse functions is not very hard, but what if y'all wanted to draw 200 ellipses or thou ellipses? It would be a lot of work to write all those ellipse functions (and even more work if you make a error in your calculations and accept to correct every ellipse part).
Luckily, in that location is something called a while loop that allows united states of america to describe as many ellipses as nosotros want in only a few lines of code.
The text between the parentheses is called the
loop status
. The loop condition must ever be a boolean, which means that the loop status must exist true or false. The code between the curly brackets ( { } ) is called the loop body. The loop body is what gets executed if the loop condition is true.
int counter = 0; int i = 0; while(counter < 10) { i += v; counter++; } When Processing gets to a while loop in a program, information technology first checks the loop conditional (in the case above, the loop provisional is counter < 10) to see if the statement is true. If information technology is truthful, information technology executes all the code in the loop body.
When Processing reaches the end bracket, information technology checks again to see if the provisional (counter < x) is still true. If information technology is, Processing jumps back to the commencement bracket and processes all the code in the loop body.
As long equally the conditional is true, Processing volition proceed to execute the lawmaking in the loop body. Processing tin can not go out the loop until the conditional is false.
While loops can be hard to understand at starting time.
It can be very helpful to walk through the lawmaking yourself line past line in gild to understand what Processing is doing when information technology executes a while loop
int counter = viii; while (counter < 12) { println("counter is: " + counter); counter++; } println("counter is greater than or equal to 12, exit the while loop"); counter is: eight
counter is: 9
counter is: x
counter is: xi
counter is greater than or equal to 12, exit the while loop
Drawing Circles
size(500, 300); // Declare and initialize variables int counter = 0; int xPos = thirty; // Draw 10 identical circles in a row while (counter < ten) { // Draw the ellipse ellipse(xPos, 150, 40, xl); // Shift the ten-coordinate of the eye of the circumvolve // over by 49 pixels xPos += 49; // Increment the counter by i counter++; 
Bouncing Circle
When programmers write large programs, they first write a tiny chunk of the program and then check to come across if it is working before they move onto writing the next department of the programme. Fixing errors in a minor part of the program is much easier than trying to fix multiple errors in a huge program.
one
In the first section of the plan, we want to be able to adjust both the x and y-coordinates of the center of the circle so the circle tin can move at a diagonal and not but in a directly line. 
int xPos = fifty; int yPos = 50; void setup() {  size(500, 300); } void draw() {  background(255, 255, 255); fill up(39, 58, 150); ellipse(xPos, yPos, 100, 100); xPos += 1; yPos += 1; } 2
We manage to get the circle moving at a diagonal, but it disappears off the screen. In this program, nosotros want to have the brawl bounciness off the screen. The easiest way to get the ball to bounce is to have two more variables for the speed of the 10 and y-coordinates of circle. Nosotros will add together the speed to the 10 and y-coordinates of the circle in order to get the circumvolve to motility. The reason we want to take separate variables for the speed is considering it will allow us not just add the speed to the x and y-coordinates it will likewise allow us to subtract the speed. There is a little trick that will allow u.s. to two switch between calculation and subtracting the speed: every time the ball hits the wall, we will multiply the speed by negative one (-1). Why does this work? If the speed is positive, multiplying by -1 will brand the speed negative. When you add together the speed to the x and y-coordinates, you are actually subtracting the speed. On the other hand, if the speed is negative, multiplying by -one will make the speed positive, because multiplying two negatives makes a positive.
int xPos = fifty; int yPos = 50; int xSpeed = two; int ySpeed = 3; void setup() { size(500, 300); } void draw() { background(255, 255, 255); make full(39, 58, 150); // Cheque if ball hit correct wall if (xPos > width) { xSpeed *= -1; } // Check to see if ball hit left wall if (xPos < 0) { xSpeed *= -i; } // Check to see if ball striking bottom wall if (yPos > peak) { ySpeed *= -ane; } // Check to meet if ball hit meridian wall if (yPos < 0) { ySpeed *= -1; } /* Adjust the 10 and y-coordinates of the center of the circumvolve */ xPos += xSpeed; yPos += ySpeed; ellipse(xPos, yPos, 100, 100); } 3
The brawl bounces off the wall, but half of the circle disappears off the screen before the ball bounces. Let'south adjust the program so the ball bounces whenever an edge of of the circle comes into contact with a wall. In order to do this we will have to adapt the if statements to account for the fact the the xPos and yPos variables go along rail of the center of the ellipse. 
int yPos = fifty; int xSpeed = ii; int ySpeed = 3; void setup() { size(500, 300); } void draw() { background(255, 255, 255); fill(39, 58, 150); // Check if ball hit right wall //decrease 1/2 of the width of the brawl from the width of the screen if (xPos > width - (100 / 2)) { xSpeed *= -1; } // Bank check if brawl hit left wall if (xPos < 0 + (100 / 2)) { xSpeed *= -1; } // Check if brawl hit lesser wall if (yPos > height - (100 / 2)) { ySpeed *= -ane; } // Cheque if brawl hit meridian wall if (yPos < 0 + (100 / 2)) { ySpeed *= -1; } /* Arrange the 10 and y-coordinates of the middle of the circle */ xPos += xSpeed; yPos += ySpeed; ellipse(xPos, yPos, 100, 100); }</div> <img src="http://cs4all.cs.mtu.edu/wordpress/wp-content/uploads/2016/07/double-back-circles.jpg" /> <div course="separate">4</div> Finally, nosotros want to modify the color of the ball whenever information technology bounces off a wall. In order to exercise this we will demand to store the color of the ellipse in a variable. To store a color we will need to utilise a data type that we haven't seen before chosen "colour." To change the color when the brawl bounces off the wall we volition utilize the random role to generate a random number betwixt 0 and 255 (Retrieve that each part of a RGB value must be a value between 0 and 255). <div form="code">int xPos = 50; int yPos = l; int xSpeed = 2; int ySpeed = iii; color circleColor = color(39, 58, 150); void setup() { size(500, 300); } void describe() { background(255, 255, 255); // Check if ball hit right wall if (xPos > width - (100 / ii)) { xSpeed *= -1; circleColor = colour(random(255), random(255), random(255)); } // Check if ball striking left wall if (xPos < 0 + (100 / 2)) { xSpeed *= -1; circleColor = colour(random(255), random(255), random(255)); } // Check if ball hit bottom wall if (yPos > meridian - (100 / two)) { ySpeed *= -i; circleColor = colour(random(255), random(255), random(255)); } // Check if brawl hit peak wall if (yPos < 0 + (100 / 2)) { ySpeed *= -1; circleColor = colour(random(255), random(255), random(255)); } /* Adjust the 10 and y-coordinates of the centre of the circle */ xPos += xSpeed; yPos += ySpeed; fill(circleColor); noStroke(); ellipse(xPos, yPos, 100, 100); }
Source: https://cs4all.cs.mtu.edu/wordpress/scratch/
0 Response to "How to Draw a Circle in Scratch 2"
Post a Comment