Objectives of this tutorial: 1. Learn to build shapes 2. Learn to transform shapes Exercises: 1. Click on the Code Set 1. A) Change one of the shapes to a circle Try: ChangeBack to Tutorials Next Tutorial
ngon 5 50to
circle 20then click COMPILE. B) Increase the size of the circle to any number you like (Example:
circle 35) ***If your shapes are getting cut off, change your canvas size which is
collage 300 300to
collage 700 700or any other size to fit your screen! C) Change the colour of the shapes. Choose a simple colour you like, since some colours may not be built into the colour module. Try: Change
filled redD) Then make a second circle by repeating the line of code that makes a circle. (Remember to stay inside the square brackets and separate each shape with a comma and remember to close all brackets!) An example of this is:
[ ngon 4 50 -- this is the first shape |> filled red -- this is its colour |> move (0,0) -- this is where it gets positioned on the canvas , circle 36 -- this is a 2nd shape |> filled red -- its colour |> move (20,20) -- where its positioned on the canvas , (circle 36) |> filled red |> move (-20,20) ]E) If you want to choose between a variety of colours, you can use the hsl function: Replace
filled (hsl 0 1 0.4), and press COMPILE. Did you notice a difference? NO! because (hsl 0 1 0.4) is the colour code for red ! Every colour can be represented by writing 3 decimal numbers beside the word hsl ! You can make custom colours by generating colour codes through our Colour Picker! Click here to get hsl colour codes for some other commonly used custom colours. F) Change the position of your shapes by filling the blanks in
move (_,_), the first blank makes your shape move left and right, and the second blank makes your shape move up and down movement. (Use negative numbers to move your shape left or down, and positive numbers to move it right or up). These two numbers are called Cartesian coordinates. Try: Add
|> move (0,0)to one of your shapes Then change
|> move (0,0)to
move (100,100). (This moves your shape 100 pixels up and 100 pixels right.) >> CHALLENGE: Re-arrange all 3 shapes to make a heart >> BONUS: Create anything you like and if we like it, we will put it on the Hall of Fame! Syntax Reference: Put a number in place of each underscore! Shapes: The first number after ngon represents the number of sides of the shape. The second is the size.
ngon _ _Oval:
oval _ _(Oval with a width and height) Triangle: Triangle has 3 sides
ngon 3 _Rectangle:
rect _ _Square: Width and height are the same length for a square
square _Polygon: A list of points that are connected to form any shape possible
polygon [( _ , _ ), ( _ , _ ), ( _ , _ ),( _ , _ ) … ]Functions to apply to shapes: Place these functions to the right of the shape that you would like to modify.
|> rotate (degrees _ )
|> scale _
|> move ( _ , _ )Code links and examples: Code Set 1 Code Set 2 For more references visit this link!