# More Shapes

Planning
Step 1
Lightning, Stars, and Hearts

#### We will be creating shape functions which behave similarly to rect and ellipse

Step 2
Circles

We are going to start off with a basic circle

Step 3
No circle?

#### We have DEFINED a function to create a circle, but we need to CALL it to execute it's code

Step 4
**CALL** the circle function
Planning
Step 5
Changeability

This function can only draw one circle

Step 6
X
Step 7
Y
Challenge
Step 8
Size
Planning
Step 9
Stars

#### We will be making stars out of two triangles

Step 10
Create a new function
Step 11
Triangles
Step 12
Remove the lines
Information
Step 13
noStroke

calling noStroke means that our program will stop running lines until the stroke function is called. This will cause lines on shapes after you call star to not draw!

Step 14
X

Step 15
Y

Step 16
Size

Step 17
Outlines

#### strokeColor = color(0) means the stroke will default to black unless we give it another color

Step 18
These lines will set the perimeter
``````    line(x + size * 0.332, y, x+size/2, y+size/4);
line(x + size * 0.332, y, x+size/2, y-size/4);
line(x - size * 0.332, y, x-size/2, y+size/4);
line(x - size * 0.332, y, x-size/2, y-size/4);

line(x + size * 0.164, y + size/4, x, y + size/2);
line(x - size * 0.164, y + size/4, x, y + size/2);
line(x + size * 0.164, y - size/4, x, y - size/2);
line(x - size * 0.164, y - size/4, x, y - size/2);

line(x + size * 0.164, y + size/4, x+size/2, y + size/4);
line(x - size * 0.164, y + size/4, x-size/2, y + size/4);
line(x + size * 0.164, y - size/4, x+size/2, y - size/4);
line(x - size * 0.164, y - size/4, x-size/2, y - size/4);
``````
Step 19
This should keep whatever fill you have set up and accept a stroke color as an input
Step 20
Turn off the stroke by giving the color parameter false
Step 21
Create a new lightning function
Challenge
Step 22
Call the function
Step 23
Challenge
Step 24
Factor in x

### so a value of 200 becomes x - 50

#### use this logic to fill in the blanks

Step 25
You should now be able to change the xPos

your code should look like this:

Step 26
Challenge
Step 27
Factor in Y

### 255 becomes: y + 5

#### use this logic to fill in the blanks

Step 28
You should now be able to change the height of your lightning bolts

Your code should look like the following:

Step 29
Challenge
Step 30
Factor in Width

### Therefore a value of 50 becomes width/2 or width * 0.50

#### Use this logic to fill in the blanks

Step 31
We should now be able to create lightning bolts of different widths

your code should look like the following:

Step 32
Challenge
Step 33
Factor in Height

### Therefore 5 becomes height/20 or height*0.05

#### Use this logic to fill in the blanks

Step 34
You should now be able to change the height

Your code should look like this:

Step 35
Step 36
A small flaw

#### We'll fix that in the next step

Step 37
Add an offset of 3 pixels to the quadrilateral to fix this
Step 38
Step 39
Outlines

`````` if(strokeColor){
stroke(strokeColor);
line(x-width/2, y+height/20, x, y+height/20);
line(x, y+height/20, x-width/2, y+height/2);
line(x - width/2, y+height/2, x+width/2, y-height/20);
line(x+width/2, y-height/20, x, y-height/20);
line(x, y-height/20, x+width/2, y-height/2);
line(x+width/2, y-height/2, x-width/2, y+height/20)
}
``````
Step 40
Hearts

#### Create a new heart function

Step 41
Call the function
Challenge
Step 42
Challenge
Step 43

### The above numbers are based on a position of X:250 and Y:250

#### ie: 262.5 becomes y +12.5

Step 44
Step 45
Hearts of all sizes and positions
Step 46
Step 47
``````  if(strokeColor) {
stroke(strokeColor);
arc(x-size*0.2, y, size/2, size/2, PI*5/6, PI*1.8);
arc(x+size*0.2, y, size/2, size/2, PI*1.2, PI*13/6);
line(x-size*0.415, y+size/8, x, y+size*0.7);
line(x+size*0.415, y+size/8, x, y+size*0.7);
}
``````
Step 48
More Shapes Info

Account

MVCode Clubs

Created By

Course:

Visual Effects lessons

Access Level