Shapes

Create Images using just 2D shapes!

Shapes



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: Change ngon 5 50 to circle 20 then 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 300 to collage 700 700 or 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 clearGrey to filled red

    D) 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 red with 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!

Back to Tutorials Next Tutorial