More Shapes

Planning
Step 1
Lightning, Stars, and Hearts

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

Temp1537305013
Step 2
Circles

We are going to start off with a basic circle

Temp1537305078 Temp1537305140
Check Your Work
Step 3
No circle?

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

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

This function can only draw one circle

Temp1537305577

We will be adding parameters to control:

x - the x-position

y - the y-position

size - the width and height

Step 6
X
Temp1537305689 Temp1537305702
Step 7
Y
Temp1537305816 Temp1537305829
Challenge
Step 8
Size
Temp1537305957 Temp1537305990
Planning
Step 9
Stars

We will be making stars out of two triangles

Temp1537306194
Step 10
Create a new function
Temp1537306262
Step 11
Triangles
Temp1537306438 Temp1537306455
Step 12
Remove the lines
Temp1537306515 Temp1537306527
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!

Temp1537306651
Step 14
X

Add a parameter to control the x-position of the star

Temp1537306910 Temp1537306929 Temp1537307155
Step 15
Y

Add a y parameter

Temp1537307459 Temp1537307581 Temp1537307779
Step 16
Size

Add a size parameter

Temp1537308114 Temp1537308146 Temp1537308404
Step 17
Outlines

Add a strokeColor parameter

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

Temp1537308653
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);
Temp1537388541 Temp1537388602
Check Your Work
Step 19
This should keep whatever fill you have set up and accept a stroke color as an input
Temp1537477589 Temp1537477605
Check Your Work
Step 20
Turn off the stroke by giving the color parameter false
Temp1537477672 Temp1537477685
Step 21
Create a new lightning function
Temp1537478059
Challenge
Step 22
Call the function
Temp1537478288 Temp1537478308
Step 23
Add an X parameter
Temp1537478451
Challenge
Step 24
Factor in x

We originally drew the lightning bolt at x:250

so a value of 200 becomes x - 50

use this logic to fill in the blanks

Temp1537478986
Check Your Work
Step 25
You should now be able to change the xPos
Temp1537479114

your code should look like this:

Temp1537479149
Step 26
Add a y parameter
Temp1537479289
Challenge
Step 27
Factor in Y

Remember: the original y position is 250

255 becomes: y + 5

use this logic to fill in the blanks

Temp1537479745
Check Your Work
Step 28
You should now be able to change the height of your lightning bolts
Temp1537479823

Your code should look like the following:

Temp1537479851
Step 29
Add a width parameter
Temp1537480487
Challenge
Step 30
Factor in Width

The original lightning bolt has a width of 100

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

Use this logic to fill in the blanks

Temp1537480777
Check Your Work
Step 31
We should now be able to create lightning bolts of different widths
Temp1537480882

your code should look like the following:

Temp1537480902
Step 32
Add a height parameter
Temp1537482053
Challenge
Step 33
Factor in Height

The numbers so far are based on a height of 100

Therefore 5 becomes height/20 or height*0.05

Use this logic to fill in the blanks

Temp1537565608
Check Your Work
Step 34
You should now be able to change the height
Temp1537565782

Your code should look like this:

Temp1537565800
Step 35
Add noStroke
Temp1537565908 Temp1537565946
Check Your Work
Step 36
A small flaw

you may notice a small gap between our shapes

Temp1537566095

We'll fix that in the next step

Step 37
Add an offset of 3 pixels to the quadrilateral to fix this
Temp1537566494 Temp1537566533
Step 38
Add a strokeColor parameter
Temp1537566724
Step 39
Outlines

Add the following into your function:

 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)
  }
Temp1537566867 Temp1537566811
Step 40
Hearts

Create a new heart function

Temp1537567222
Step 41
Call the function
Temp1537567251 Temp1537567263
Challenge
Step 42
Add noStroke()
Temp1537567305
Challenge
Step 43
Add X and Y properties

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

Factor these into the x and y portions of the ellipses and each of the ####parameters of the triangle

ie: 262.5 becomes y +12.5

Temp1537567522
Step 44
Add a size parameter
Temp1537567999
Check Your Work
Step 45
Hearts of all sizes and positions
Temp1537568133
Step 46
Add a strokeColor parameter
Temp1537568212
Step 47
Add an outline
Temp1537568365
  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);
  }
Temp1537632891
Check Your Work
Step 48
Use your shapes!
Temp1537633028
More Shapes Info

Account

MVCode Clubs

Created By

Missing tiny jake wheaton

Course:

Visual Effects lessons

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach