Advancers: P5 js continued – Robot Draw!!

Today we continued our look at P5 and javascript.  We mostly practiced what we learned last week.

This time we did our work online using the awesome website “codepen” rather than a local text editor.  This website is a place for web developers to play with web code and share it with others.  Using it allowed us to work without getting bogged down with install problems on people’s PCs.  It is great for smaller sketches, but if you want to develop something really big like a complex game it will be much easier to use a local text editor like we did last week.  If you get a chance and have an email address (or your parent has one), sign up for a codepen account.  This will allow you to create and share your own sketches – I’ll link any and all of them on the coderdojo athenry website!

Today we basically just fooled around with it and tried to draw our own picture just with code.  We mostly drew robots as they are fairly easy to draw with rectangles and ellipses!

What we covered:

  1. We watched the neat introduction video from the authors of p5: 
  2. We looked at the P5 reference page which has great instructions and examples for all P5 functions:  Every good library you ever use will have a similar reference page – this is a great example of one.
    1. Similar to how scratch has blocks in different categories (sound, movement, control, etc), p5 groups all its functions into different categories – color, maths, shape, sound, etc.
  3. The canvas, resizing and changing the color using the createCanvas function
  4. Using colours in P5 – We used the following functions to set colours:
    1. background: to set the background color
    2. fill: to set the fill color
    3. stroke: to set the line color
    4. In all cases, colors can be either:
      1. one number in which case it’s a shade of grey from 0 (black) to 255 (white) e.g. background (0) sets the background to black.
      2. three numbers separated by commas, in which case each colour is a shade of RED, GREEN and BLUE – e.g. background(255, 0,0) sets the background to red, background(255, 255, 0) mixes red and green to make yellow.  You can make every colour by mixing red, green and blue!
      3. four numbers separated by commas, in which case it is RED, GREEN, BLUE, TRANSPARENCY. e.g. fill(0,0,255, 100) will make any shape you draw see-through shade of blue.  This is like the ghost effect in scratch.
  5. Some drawing functions in P5:
    1. strokeWeight to set how thick the lines are – e.g. strokeWeight(10) gives thick lines
    2. point to draw a point e.g. point(100, 100) draws a point at 100, 100.
    3. line to draw a line e.g. line(0,0,200, 150) draws a line from 0, 0 to 200, 150.
    4. rect to draw a rectangle – e.g. rect(0,0, 100, 100) will draw a square 100 wide, 100 high at point 0,0.
    5. ellipse to draw an ellipse – e.g. ellipse(0,0, 100, 100) will draw an ellipse 100 wide, 100 high (i.e. a circle) at point 0,0.
    6. triangle to draw a triangle – e.g. triangle(0,0, 100, 100, 200, 200) will draw a triangle between (0,0), (100, 100) and (200, 200).
    7. One other function we used was random.  This can be used in a few ways, but the way we used was to give it one number, in which case it picked a random number between 0 and that number.  E.g. random(255) picks a random number from 0 to 255.  So fill(random(255)) will set the fill to a random shade of grey.

We played about with the all the above to draw a (pretty poor) robot with flashing eyes that fires lasers – the sketch we did is below.  Play around with this and build on it to do something cooler!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s