- design of user experiences and algorithms incorporating branching and iterations - testing, modification and implementation of digital solutions - evaluation of information systems and their solutions in terms of meeting needs, innovation and sustainability • investigating and designing some common algorithms for generating graphics • checking the accuracy of an algorithm before it is implemented • using structured English to express algorithmic instructions • developing and modifying digital solutions by implementing instructions contained in algorithms through programs • developing digital graphics that manipulates models of real-world objects • implement algorithms in both block-based and text-based code The Art of Code: 2D Monday, 11 March 2019 9:39 AM Term 2 - The Art of Code 2D Page 1
Transcript
- design of user experiences and algorithms incorporating branching and iterations
- testing, modification and implementation of digital solutions
- evaluation of information systems and their solutions in terms of meeting needs, innovation and sustainability
• investigating and designing some common algorithms for generating graphics• checking the accuracy of an algorithm before it is implemented• using structured English to express algorithmic instructions• developing and modifying digital solutions by implementing instructions contained in algorithms through programs • developing digital graphics that manipulates models of real-world objects • implement algorithms in both block-based and text-based code
The Art of Code: 2DMonday, 11 March 2019 9:39 AM
Term 2 - The Art of Code 2D Page 1
- design of user experiences and algorithms incorporating branching and iterations
- testing, modification and implementation of digital solutions
• investigating and designing some common algorithms for generating graphics• checking the accuracy of an algorithm before it is implemented• using structured English to express algorithmic instructions• developing and modifying digital solutions by implementing instructions contained in algorithms through programs • developing digital graphics that manipulates models of real-world objects • implement algorithms in both block-based and text-based code
Getting Started in Scratch
1. Go to https://scratch.mit.edu/
2.
3. Follow the steps, making sure to use your school email address.4. Open your school email address to confirm your registration – look for an email from scratch5. Sign in6. Go to my stuff
7. Create new project
8. Call the first project “shapes” by changing the name at the top
9. it should automatically save, but just in case,
Add pen extensionGo to the extension button in the bottom left:
Choose:
Initialisation sequence
You should always initialise your program.This means that you set everything towhere/what it should be at the start of theprogram, e.g.:Clearing the screen
Move to the starting position
Resetting variables (more on this later)
When the code blocks are run one after another, it’s called a SEQUENCE. Remember this, you might be tested on this later!!
-240 -180
Term 2 - The Art of Code 2D Page 3
Use the blocks below to put the cat sprite in the middle and point upwards, hide itself, clear the screen and put the pen down.- You should know which numbers to put in for x and y!
Move ForwardYou can tell it how far to move (pixels), using:
Add a block to draw a line 100 pixels
Now for Python1. Go to https://trinket.io/2. Sign up with your school email account3. Make a trinket and choose Python
Initialisation sequence Term 2 - The Art of Code 2D Page 4
Initialisation sequenceTurtle Modulesturtle is a Python module. It's an extra part of the Python language, so we need to import its functions by putting an import statement at the top of each program:
from turtle import *
The * means everything, so this imports all of the functions from the turtle module.
Let's make the turtle move!
from turtle import *forward(100)
When you run the Python code, it makes the turtle move forward!The number is the number of turtle steps to move. A bigger number will move the turtle further.
Write a program to make the turtle move forward 100 turtle steps.
Algorithm:
It should look like this when you run it:
Term 2 - The Art of Code 2D Page 5
- design of user experiences and algorithms incorporating branching and iterations
- testing, modification and implementation of digital solutions
• investigating and designing some common algorithms for generating graphics• checking the accuracy of an algorithm before it is implemented• using structured English to express algorithmic instructions• developing and modifying digital solutions by implementing instructions contained in algorithms through programs • developing digital graphics that manipulates models of real-world objects • implement algorithms in both block-based and text-based code
Draw a SquareYou’ll probably know from your geometry lessons that a square is made up of four lines of equal width, and four right angles of 90 degrees. When telling the computer how to draw a square, you can tell it how far to move (pixels), and how far to turn (degrees)
Draw a square by repeating
4 times and turning 3 times. You need to decide which way to turn and by how many degrees.Hint: try right-clicking and using duplicate.
Stop Repeating Yourself!
Draw a SquareThursday, 21 March 2019 8:28 AM
Term 2 - The Art of Code 2D Page 6
In Algorithm terms, this is known as ITERATION
Add a
control block and make your algorithm more efficient.
Python: RotationThe turtle always starts off facing to the right.
If you want to change which way the turtle is facing, you can turn left or turn right. These functions need the angle to turn in degrees. Here we're turning left by 90° (a right angle):
from turtle import *left(90)
Now the turtle is facing the top of the screen.
If you turn a total of 360° then the turtle will end up facing the same way as how it started, because 360° is a full circle:from turtle import *right(90)right(180)right(90)
Given part of a program which tells the turtle to draw a square, your task is to finish it!
Term 2 - The Art of Code 2D Page 7
Given part of a program which tells the turtle to draw a square, your task is to finish it!
from turtle import *
forward(100)right(90)forward(100)
Algorithm:
When it's finished, the turtle should draw a square like this:
Write a Turtle program to draw a rectangle, with a width (top and bottom sides) of 120 turtle steps, and height (the left and right sides) of 50 turtle steps. The output of your program should look like this:
Going Loopy!You have probably noticed that you repeat yourself a lot in turtle programs. Using loops makes turtle much less repetitive!
We can use a loop to repeat certain instructions. Then, we don't have to repeat the same two instructions over and over again.
Here's a much shorter way of drawing a square, using loops:
from turtle import *
Term 2 - The Art of Code 2D Page 8
for count in range(4): forward(50) right(90)
For loopA for loop repeats instructions a set number of times, in this case 4 times. A for loop has an associated variable (called count here). In this example, count starts from 0 and increases by 1 each time. Let's look at what's happening here.
range(4) is acting like a repeat, counting up four times – sneakily, starting at 0, and counting up 4 times, so 0, 1, 2 and 3.For each different value (which is saved in count each time), the body of the loop is run. That is, the forward(50) and right(90) commands are run. Then, the loop restarts!
for count in range(4): forward(50) right(90)
Don't forget the colon! The for line has to end with a :, or else the loop won't work!The body of the loop is all the lines that are indented, - that is, that start with two spaces in the example above.Make sure all the instructions in your body are indented to the same amount! We recommend you try two spaces.
Write a program to draw a square below the turtle.
Try using a for loop to make life easier!
Each side should be 50 turtle steps long.
Algorithm:
Term 2 - The Art of Code 2D Page 9
- design of user experiences and algorithms incorporating branching and iterations
- testing, modification and implementation of digital solutions
• investigating and designing some common algorithms for generating graphics• checking the accuracy of an algorithm before it is implemented• using structured English to express algorithmic instructions• developing and modifying digital solutions by implementing instructions contained in algorithms through programs • developing digital graphics that manipulates models of real-world objects • implement algorithms in both block-based and text-based code
How good is your Geometry?
Create an efficient algorithm for each of these shapes. You can calculate the turn by dividing 360 by the number of sides.
PolygonsThursday, 21 March 2019 8:34 AM
Term 2 - The Art of Code 2D Page 10
Eg a trun for a triangle will be 360/3 = 120 degrees
Also, experiment with these blocks
Seeing StarsChanging backrops
1. Change to the backdrops tab
2. Change the fill colour to black and draw a rectangle
Note: you can use the
block to code this and mace it change.
Drawing Stars
This is similar to polygons but you need to use a different formular to calculate how many degrees to turn
Change the backdrop
Now try drawing the equivalent star
Term 2 - The Art of Code 2D Page 11
Use the formula:
rotate = multiplier*360/sides
Again, try different pen sizes and colours.
Python: Changing Colourspencolor functionWe can set the colour that we're drawing with using pencolor function. Eg.
One of the objects (class) in the turtle module is Screen(). We can pass some parameter values to the .bgcolor method (function) to change the background colour (for Red, Green, Blue).To use the Screen() class object, we need to declare an instance of it within our code
from turtle import *screen = Screen()
Then we can pass parameter values to the bcolor method:
screen.bgcolor(255, 255, 0) # yellow
OR put the values in a variable first:
R = 255G = 255B = 0
screen.bgcolor((R, G, B))
You can also use this method with the turtle:
turtle = Turtle()
R = 255G = 0B = 124
turtle.color(R, G, B)
Let's add some colour to our square!
Write a program to draw a skyblue square using the turtle.
Each side should be 80 turtle steps long.
Also, change the background to mistyrose
Term 2 - The Art of Code 2D Page 12
Try some other colour names! But be careful, you have to use a colour that the turtle knows about, and you must spell it correctly.Here are some of our favourite colours:
You can see the whole list of colour names that Turtle understands here.
We can change how thick the pen is using pensize.
eg pensize(5)
Try it out with different sizes!
How to Hide the Turtle(Arrow Head)You may not need the turtle to appear in your drawing as you just need a line.
hideturtle()
How to Set the Heading of the Turtle
By default the turtle faces the east, to change the direction in which the turtle is facing.The syntax is,
setheading(angle)
Angle 90 sets the turtle to face the North.Angle 180 sets the turtle to face the West.Angle 270 sets the turtle to face the South.Angle 360 or 0 set turtle to face the East
Try this out to get a square with a different orientation
More Polygons
Write an inefficient program to draw an equilateral triangle, with the sides being 100 turtle steps long.
Algorithm
Now write an efficient program, with an efficient algorithm
Now write an efficient program, with an efficient algorithm
Now try a Hexagon. Remember
How about a Star?
Fill ShapesAs well as changing the colour of lines, we can also fill shapes with colour. This can only be done in python and not Scratch as Scratch does not a have a fill function
To fill a shape, we need to tell the turtle when to begin filling and when to end filling.We use begin_fill at the beginning of the shape we want to fill, and end_fill at the end.We also need to set the fillcolor to the colour we want!
Try guessing what this program will draw before running the example! Then try changing the fill colour!
We've already seen how drawing shapes is easier with loops, let's draw some shapes with both loops and fills!
from turtle import *
fillcolor('cornflowerblue')begin_fill()for count in range(4): forward(100) left(90)end_fill()
The begin_fill and end_fill need to be wrapped around the whole shape you want to fill in.
In this case, that means putting them outside the for loop.
Want to know more?
Term 2 - The Art of Code 2D Page 14
Term 2 - The Art of Code 2D Page 15
Term 2 - The Art of Code 2D Page 16
Term 2 - The Art of Code 2D Page 17
- design of user experiences and algorithms incorporating branching and iterations
- testing, modification and implementation of digital solutions
• investigating and designing some common algorithms for generating graphics• checking the accuracy of an algorithm before it is implemented• using structured English to express algorithmic instructions• developing and modifying digital solutions by implementing instructions contained in algorithms through programs • developing digital graphics that manipulates models of real-world objects • implement algorithms in both block-based and text-based code
Challenges
Papel Picado
In Mexico decorations for parties and festivals often include Papel picado. These are very colourful squares of paper which have beautiful cut-out designs.
You're going to make the turtle draw a string of 5 simple colourful Papel picado.
The five flags should be squares that are 20 turtle steps long on each side, there will need to be an extra line to join the flags together, this will also be 20 turtle steps long. To make it super colourful you need to get the turtle to fill with hot pink.
Swim between the flags!
In Australia it's very important when we go to the beach to swim between the flags. The flags are a very specific colour pattern to make them easy to recognise. They have a red rectangle on the top and a golden yellow colour on the bottom.
Get the turtle to draw a lifesaving flag. It should have one rectangle on the top that is red and one rectangle on the bottom that is yellow. The rectangles should be 120 turtle steps long and 45 turtle stepshigh.
The turtle should start on the left in the middle of the flag:
Fallout Shelter
The symbol for a fallout shelter is three black triangles on a yellow background.
Let's draw this symbol with the turtle!
Set the pencolor to dimgrey so the edges stand out.
Set the pencolor to dimgrey so the edges stand out.
Each side of each triangle is 100 turtle steps long and the triangles have all angles of 60 degrees. The angle between each triangle is also 60 degrees.
The output of your program should look like this:
Term 2 - The Art of Code 2D Page 19
2019 7DIGItem 2 Te...
The goal of this project is to create your own pendant. You already know how to use arbitrary squares, rectangles, triangles, polygons, and other 2D shapes.
You can build the Peace Symbol,
various astrology symbols such as Mars, or Venus
ancient alchemy symbols such as Air,
ProjectThursday, 21 March 2019 8:52 AM
Term 2 - The Art of Code 2D Page 20
You can create ancient symbols like the Pentagram,
or perhaps the first letter of your name.
Really, the sky is the limit! Feel free to create anything you want!
- Identify the kind of design that you will make by assembling a mood boardEG
Term 2 - The Art of Code 2D Page 21
Term 2 - The Art of Code 2D Page 22
Term 2 - The Art of Code 2D Page 23
design of user experiences
- Make a sketch of your proposed design
Term 2 - The Art of Code 2D Page 24
eg
- Develop your algorithm in Scratch
eg
Inalise1. Draw a circle2. Draw one side to other
3. Draw first leg at 45 degrees
4. Draw other leg at 135 degrees
5. Add loop for necklace
6.
Term 2 - The Art of Code 2D Page 25
design of user experiences and algorithms incorporating branching and iterations
- Test your algorithm in Scratch, taking care to record each test and iteration
testing, modification and implementation of digital solutions
- Implement your solution in Python- Produce your Pendant
testing, modification and implementation of digital solutions
- evaluate the process and the product
evaluation of information systems and their solutions in terms of meeting needs, innovation and sustainability
Resources
Creating an SVG
- download inkscape: https://inkscape.org/ or get from G:\StudentCommon\BYOx Installs
from turtle import Turtlet=Turtle()t.screen.bgcolor("black")t.color("red")t.hideturtle()t.fd(100)t.left(90)t.fd(100)t.left(90)t.fd(100)t.left(90)t.fd(100)
The above program first changes the window background to black and the turtle to red using t.screen.bgcolor(“black”) and t.color(“red”).
The turtle is then made invisible using this line of code t.hideturtle()
The turtle moves 100 pixels to the east (t.fd(100)) and draws a horizontal line.
It then faces the north by rotating 90degrees(t.left(90)) to the left and moves 100 pixels to the north, drawing a vertical line.
t.left(90) makes the turtle face the west by rotating it 90 degrees left. It then moves 100 pixels to the west, drawing a horizontal line.
t.left(90) makes the turtle face the south by rotating it 90 degrees left. It then moves 100 pixels to the south, drawing a vertical line.
The turtle turns 90 degrees left to face the east, it then moves 100 pixels to the east which is the default position of the turtle.
Finally, a square is drawn.
We can improve the efficiency of the code by using a loop for the square
for steps in range(4): t.fd(100) t.left(90)
Say, we want to draw a larger picture with combinations of square and triangles and other shapes, we can improve the efficiency of our code, and type less, by using functions
def square(length): for steps in range(4): t.fd(length) t.left(90)
square(100)
What is a function in Python?In Python, function is a group of related statements that perform a specific task.
Functions help break our program into smaller and modular chunks. As our program grows larger and larger, functions make it more organized and manageable.
Furthermore, it avoids repetition and makes code reusable.
Syntax of Function
"""docstring"""statement(s)
def function_name(parameters):
Above shown is a function definition which consists of following components.
Keyword def marks the start of function header.1.
Extension - PyTurtleThursday, 21 March 2019 9:48 AM
Term 2 - The Art of Code 2D Page 28
Keyword def marks the start of function header.1.A function name to uniquely identify it. Function naming follows the same rules of writing identifiers in Python.2.Parameters (arguments) through which we pass values to a function. They are optional.3.A colon (:) to mark the end of function header.4.Optional documentation string (docstring) to describe what the function does.5.One or more valid python statements that make up the function body. Statements must have same indentation level (usually 4 spaces).6.An optional return statement to return a value from the function.7.
Example
def square(length): for steps in range(4): t.fd(length) t.left(90)
How to call a function in python?Once we have defined a function, we can call it from another function, program or even the Python prompt. To call a function we simply type the function name with appropriate parameters.
Example
square(100)
ApplicationTo draw a house:
square(100)triangle(100)
To draw a snowman:
circle(100)circle(80)circle(40)
How to Draw a CircleThe circle() method is used to draw a circle and it can accept three arguments which are:
radiusextentsteps
The most important is radius and extent. Though, extent and steps are optional(i.e a circle can still be drawn without including them.)
The radius accepts an integer which is the radius of the circle.
The extent accepts an integer which is an angle. To cut short the technical explanation, it determines the part of the circle that will be drawn.
If you assign 360, a full circle will be drawn, 180 will draw a semi-circle.
Example
from turtle import Turtle
t=Turtle()
t.circle(50,360)
t.hideturtle()
How to PenupImagine the turtle as a paint brush in the hand of an artist. The artist can lift up the brush off the canvas to place it on another position on the canvas.
To do a similar action with the turtle, you use this syntax below,
t.up()
To put back the turtle on the canvas, use this syntax below,
t.down()
Note:
No drawing is done when the turtle is up.
Drawing is done when the turtle is down.
Term 2 - The Art of Code 2D Page 29
Drawing is done when the turtle is down.
How to Write Text with Python TurtleTo write on your computer screen, use the write() method.
The write() method accepts four arguments, which are:
arg– this is the string object of the text you want to write to the TurtleScreen.•move– this argument is optional and it can only be assigned to the value “True” or “False”. When True a line will be drawn below the text.•align– you assign this argument either to the left, right or centre. This argument is also optional•font– this argument basically determines the font name, font size, font type of your text.•
Example
from turtle import Turtlet = Turtle()t.hideturtle()t.write("Hello World",move=True,align="center",font=("Freestyle Script",50,"normal"))
Basic Geometric ArtThis is generated by drawing a shape, rotating a factor of 360 degrees and repeating. The rotation is calculated by the rotation factor. For example, if you rotate by 30 degrees, then you need to repeat for 360/30 = 12 rotations.
Example
The code to draw one dodecagon would be something like this:
import turtlet = turtle.Pen()for y in range(0, 12): t.forward(50) t.left(30)So the turtle moves forward 50 pixels, then turns left 30 degrees, and loops 12 times.To draw the pattern, we add another loop (looping 12 times again), and turn left 30 degrees after drawing each shape:
import turtlet = turtle.Pen()for x in range(0, 12):
for y in range(0, 12): t.forward(50) t.left(30) t.left(30)
for i in range(100): turtle.circle(5*i) turtle.circle(-5*i) turtle.left(i)
turtle.exitonclick()
# Python program to draw# Rainbow Benzene # using Turtle Programming import turtle colors = ['red', 'purple', 'blue', 'green', 'orange', 'yellow'] t = turtle.Pen() turtle.bgcolor('black') for x in range(360): t.pencolor(colors[x%6]) t.width(x/100 + 1) t.forward(x) t.left(59)
More examples
https://youtu.be/QPf-fQj88zA
turtle graphics in Scratch: https://scratch.mit.edu/studios/3745811/
For creating a spiral we will go 10 points forward and then turn right . then we will go 20 points forward and turn right , then 30 point and turn right .. till 100 point
Lets use the for loop to create a Spiral , I initial value will be 10 the jumping will be of 10 till i =100.
for [i 10 100 10] [fd :i rt 90]
User InputThe turtle functions, like forward, only work with numbers. So if we ask the user for information using input, if it's a number, we need to make sure we use int to save it as a
number.
from turtle import *distance = input('How far? ')forward(distance)
Because we're calling forward with '50' (a string), instead of 50 (an integer), it complains with a TypeError:
How far? 50Traceback (most recent call last): File "program.py", line 3, in <module> forward(distance) File "/tmp/tmpbgmiSJ/turtle.py", line 632, in forward raise TypeError('Expected integer or float argument')TypeError: Expected integer or float argument
Wow, this looks scary, but it isn't! Look at the last line. It says the TypeError occurred in our call to forward on line
3 of program.py (our code). The forward function is defined in turtle.py (the turtle module
Notice that where the error is detected isn't where the mistake was made (the missing int). This is very common in programming.
We need to convert the string into an integer, like this:
from turtle import *distance = int(input('How far? '))forward(distance)
and now it works, because forward is given an integer, not a string.
Turtles would be boring if they drew the same shape every time.
Now that we can ask the user for information using input, let's ask them how high our top hat should be:
from turtle import *
hat_height = int(input('What height should the hat be? '))forward(30)left(90)forward(hat_height)right(90)forward(30)right(90)forward(hat_height)left(90)forward(30)
Try it
Write a program which asks the user what size square to draw, then draws it and fills it with purple.
The user will type a side length, and your program should use that side length input (in turtle steps) to draw the square.
We've started you off with some code that will read in the user's answer, and convert it to an integer using int.
The square should be filled with the colour 'purple'.
Side length: 80
More Art
Term 2 - The Art of Code 2D Page 34
from turtle import *
pensize(5)pencolor('skyblue')
for i in range(6): forward(100) right(45) forward(50) backward(50) left(90) forward(50) backward(50) right(45) backward(100) right(60)
The goal of this project is to create your own pendant. You already know how to use arbitrary squares, rectangles, triangles, polygons, and other 2D shapes.
You can build the Peace Symbol,
various astrology symbols such as Mars, or Venus
ancient alchemy symbols such as Air,
You can create ancient symbols like the Pentagram,
ASSIGNMENT *COPY*Tuesday, May 21, 2019 10:14 AM
Term 2 - The Art of Code 2D Page 48
or perhaps the first letter of your name.
Really, the sky is the limit! Feel free to create anything you want!
- Identify the kind of design that you will make by assembling a mood boardEG
design of user experiences
- Make a sketch of your proposed design
eg
Term 2 - The Art of Code 2D Page 49
- Develop your algorithm in Scratch
eg
Initialise1. Draw a circle
2. Draw a line vertically down middle
3. Draw 4. Draw 5. Add loop for
6.
design of user experiences and algorithms incorporating branching and iterations
- Test your algorithm in Scratch, taking care to record each test and iteration
testing, modification and implementation of digital solutions
- Implement your solution in Python- Produce your Pendant
testing, modification and implementation of digital solutions
- evaluate the process and the product
evaluation of information systems and their solutions in terms of meeting needs, innovation and sustainability
To begin with we were asked to use our skills for Scratch Art to create a unique design of our own using a number of MakeCode Blocks. We had to include one of each of the following:
1.
Term 2 - The Art of Code 2D Page 50
One thing that I learnt as a part of the process of completing my 'Art of Code' Assignment:
2.
One thing you would do differently to improve your design if you had to do the Assignment again:
3.
Resources
Creating an SVG
- download inkscape: https://inkscape.org/ or get from G:\StudentCommon\BYOx Installs
