Select Lesson

### Objective

### Reading PaperScript functions

#### 5 mins

### Drawing regular shapes

#### 5 mins

### Drawing irregular shapes

#### 5 mins

### Preparation

### Instructions

### Answer

### JavaScript IDE

#### 0 mins

### Adding 2D graphics to a webpage

#### 5 mins

### PaperScript shapes

Lesson Notes

### Objective

### Reading PaperScript functions

#### 5 mins

### Drawing regular shapes

#### 5 mins

### Drawing irregular shapes

#### 5 mins

### Preparation

### Instructions

### Answer

### JavaScript IDE

#### 0 mins

### Adding 2D graphics to a webpage

#### 5 mins

30 mins

# Drawing shapes with PaperScript functions

This is drawing worksheet that can be completed in pairs or individually.

### Objective

Learn about **coordinates**, shapes and **functions** by interpreting PaperScript instructions into shapes.

### Concepts

### Reading PaperScript functions

Computers can create **graphics** from very simple instructions. To make shapes we are using PaperScript, code from pre-made JavaScript library called 2D.

To access the code in this library, you **call** a **function**... meaning you write the name of the shape.

For example, `Rectangle(0,0,3,5)`

goes and finds the drawing instructions for the function Rectangle and uses the numbers in the brackets, called **parameters** to draw the shape.
This example would draw a 3 by 5 rectangle at the top-left of your screen, if you were in **Drawing Flags - JS103** or **Flags Challenge - JS112**.

### Print a cheat sheet

This printable reference pdf reminds you of the **parameters** when drawing 2d shapes on a computer (or by hand) using **PaperScript** shape **functions**.

### Concepts

### Drawing regular shapes

**Regular** shapes can be drawn in a systematic way, because of this we can create functions that will draw shapes for us, we just have to enter the values for the shape in a specific order.

We have functions to draw:

- Rectangle
- Circle
- Star
- Other regular polygons (Extra)

### Rectangle

`Rectangle(x,y,width,height)`

will draw a rectangle.

Rectangles are equal in height, equal in width and have 90° corners.

The first two numbers are the **coordinates** for the starting point of the shape, the **top left** corner of the rectangle will be at this point.

The width of the rectangle is counted across in pixels.

The height of the rectangle is counted down in pixels.

### Circle

`Circle(x,y,radius)`

will draw a circle.

A circle is the same radius all the way around.

The circles' coordinates set the **center** of the circle, not the top left like the rectangle.

The radius is then drawn from that point.

### Star/Polygon

`Star(x,y,points,outerRadius,innerRadius)`

will draw a star.
Stars are fun, and a little tricky.

Imagine we are drawing 2 circles and connecting them with a number of zigzag of lines.

- The first two values, x and y, give the
**coordinates**for the center of our star.`new Path.Star(`

**3 across, 2 down,**4, 1, 0.5) - The third value is the number of points on our star. If it is 4, the star will have four points on the outer circle and four points on the inner circle, spaced equally apart.
`new Path.Star(3, 2,`

**4**, 1, 0.5); - The fourth value,
*outer-radius*, draws the size of the first invisible circle.`new Path.Star(3, 2, 4,`

**1**, 0.5); - The last value,
*inner-radius*, draws the size of the second invisible circle.`new Path.Star(3, 2, 4, 1,`

**0.5**); - The computer then draws lines between each point of the 2 circles in a zig zag.

#### Outer radius and inner radius

The outer and inner **radii** can be adjusted to make some pretty cool shapes.

- The outer radius is
**smaller**than the inner radius`var inner = new Path.Star(50, 50, 6,`

**20**, 40); - The outer radius is
**bigger**than the inner radius`var outer = new Path.Star(50, 50, 6, 40,`

**20**); - The outer radius is
**equal to**the inner radius`var equal = new Path.Star(50, 50, 6,`

**30, 30**);

### Regular polygons

You can make any **regular** shape by adding half the number of points you want and setting the outer and inner radii to the same number. (Because a 5 pointed star really has 5 points on each circle so 10 points and 10 sides).
`var shape = new Path.Star(40, 40, `

**1.5**, 30, 30);

Play around with all the different values and see what fantastic shapes you can create!

### Concepts

### Drawing irregular shapes

Irregular shapes are drawn by naming (with coordinates) every corner of the shape:

- Use paths for
- Lines,
- Triangles,
- Weird-sided shapes,

- Semi-circles—
`arcTo`

### Paths

Paths can make any shape, you simply have to give the coordinates of each point and it join them all together.
`Path(x,y)(x,y)(x,y)`

for three different points will draw a triangle.

As with all coordinates, the first number is across from the top left of the screen and the second number is down from the top left of the screen.

### Semi circle

Path(x,y)arcTo(x,y)

Semi-circles use the keyword **arcTo** between the coordinates of a line. This adds a curve between the two points as well as a line.

### Preparation

Print off the blank "Grid Exercise" worksheet and the "Grid Challenge Example" sheet below, which is a cheat-sheet of the shape **functions** and their **parameters**.

### Instructions

In this activity you draw a scene by completing 10 shapes.

These ten shapes are written in as **functions**.

You are going to pretend to be a computer

- Read each function,
- Intepret the size and location of the shape using the "Grid Challenge Example shape reference pdf"
- Draw it on the grid

### Level of difficulty:

- Easy: Let learners constantly refer to the answer image
**as they draw**. - Medium: Tell the learners what they are drawing or show them the answer image
**before**they begin. - Hard: Give out the two pages and show the first steps but do not let them see the final image.

### First steps

Go through the first two steps with students.
`Rectangle (4, 6, 12, 6)`

- "For Shape 1, the
**function**is a rectangle.

- The Example sheet tells us
`Rectangle(x,y,width,height)`

- The Example sheet tells us
- We have to draw a
**rectangle**that starts at the**coordinates****(4, 6)**,

- we go
**across**to line 4 and then ''down''' to line 6 and add a mark where (4, 6) meet.

- The rectangle is 12 squares
**wide**so count 12**across**and add a mark to (16, 6).

- The rectangle is 6 squares
**high**so count 6 squares ''down''' and add a mark at (16, 12).

- Rectangles are equal in height and equal in width, so mark (4, 12) as well.

- Connect the dots to form a rectangle."

- Rectangles are equal in height and equal in width, so mark (4, 12) as well.

- The rectangle is 6 squares

- The rectangle is 12 squares

- we go

`Path (3, 6) (17, 6) (15, 2) (5, 2)`

- For Shape 5, we are also drawing a four-sided shape but because the shape is not
**"equal in height and equal in width"**it is not a regular rectangle. - The Example sheet tells us that we must use paths of for irregular shapes.

- (3, 6)... Go
**across**the grid to number 3, then go**down**the number 6. Make a mark where those lines meet.

- (3, 6)... Go
- (17, 6)... Go
**across**the grid to number 17, then go**down**the number 6. Make a mark where those lines meet. - Rule a line between the two points.
- (15, 2)... Go
**across**the grid to number 15, then go**down**the number 2. Make a mark where those lines meet. - Rule a line between the two points, (17, 6) and (15, 2).
- (5, 2)... Go
**across**the grid to number 5, then go**down**the number 2. Make a mark where those lines meet. - Rule a line between the two points, (15, 2) and (5, 2).
- Rule a line between the two points, (5, 2) and (3, 6).

### Answer

### Projects IDE

### JavaScript IDE

### My own project

Make your own shapes with our JavaScript IDE, to have the canvas working use `//paper`

at the top of the page.
Read our IDE guide to learn more about the IDE's

### Extension: Concepts

### Adding 2D graphics to a webpage

If you want to add your images to a normal web page outside of Code Avengers, it will require a little set up.

### Code to add images

We have made a **Path module'' that is based off the**2D JavaScript graphics module'''.

The Code Avengers' code is easier to use because we do all of the set up for you but it only works on code saved on our website.

If you are ready to make graphics in your own website then read the content below.

You first need to learn about HTML `<canvas>`

and linking JS, HTML and the 2D context library.

Then you need to learn how the functions work for 2D, we have some notes and links below that can help you.

You can add this to your html page

The tags and JS covered here are `<canvas></canvas>`

and `.getContext('2d')`

You can draw images and shapes onto a webpage using code instead of uploading an image.

### Canvas tag —`<canvas></canvas>`

HTML5 element `<canvas>`

gives you an easy and powerful way to draw **graphics** using JavaScript. It can be used to draw graphs, shapes, text or even do simple (and not so simple) animations.

To get `canvas`

to work is a little tricker than the other tags. The `<canvas>`

element places the drawing window on the page. We added a border in CS so you can see it. But the drawing is written in JavaScript.

### Adding JavaScript

The `2d`

**interface** is used for drawing circles, rectangles, text and more inside a
canvas
element. The library called '2d' has all the code **context** to draw the shapes (written in JavaScript) on the canvas.

So in the code above we have a `canvas`

in HTML but the important stuff is happening in the `script`

element.

Firstly we make a variable that **links our canvas to the JavaScript**, `var drawing = document.getElementById('drawing');`

.

Then we create a variable to **link our JavaScript to** the already existing code inside the file called ** 2d**,

`var codeForDrawing = drawing.getContext('2d');`

.
Now with those 3 things linked you can draw a lot of different shapes.

`2d`

so you only have to ask for the browser to find it and pull the **context**out of it. Read a good explanation of

**context**on StackOverFlow by Brian Kelly from 2011.

### Drawing shapes

You can draw many things, the basics are lines, rectangles, circles, triangles, half circles and stars. The drawing code is slightly different to what you have learned here at Code Avengers.

See a range of options at W3schools

#### Rectangle

#### Lines

Begin a path, move to position 0,0. Create a line to position 300,150:

#### Triangle

#### Circle

Use arc to make a full circle

(name.arc(x,y coordinates of center, radius, start angle(0 is on right side of screen), end angle, clockwise?)

The angles are not degrees but radians. 2PI is a whole circle so `1*Math.PI`

will draw half a circle etc.

#### Semi circle

`arcTo`

here is more of a rounded corner function
Use

`arc`

instead and brush up on your
radians
and PI. You can use PI in your equation- you just have to call it from the Math library, `Math.PI`

.
`name.arc(x-of center,y-of center,radius,sAngle,eAngle,counterclockwise (optional));`

`name.arc(40,40,20, 1*Math.PI,2*Math.PI,true);`

The beginPath() method begins a path, or resets the current path.

#### Color

You can draw a wide range of shapes and change their colors. There are two parts of a shape that you can control the color of the fill and the stroke:

### fill

'Color in', the color that fills up the inside area of a letter or shape

### stroke

The lines that make up the outline of a letter or shape

There are a couple of ways you can change the color of your **graphic**.

You can use 'symbolic names' like 'red', 'chartreuse' 'OrangeRed', or, if you know about **RGB** or **Hex** colors, these work too.
`rect.fillColor = '#5889D2'; //hex`

rect.fillColor = 'rgb(88,137,210)';//RGB

rect.fillColor = 'stelBlue';//name`shape1.fillStyle = 'red'; `

shape1.strokeStyle= 'blue';

**2D**for canvas rather than our fun (and easier) drawing challenges,