Creators: Creative Coding with p5.js

What is P5?

This week we looked at p5.js – a library to make creative coding in javascript MUCH easier!  We first downloaded and copied p5.js onto our computers, and copied it into a new project folder.  We included p5.js in a html file, just like we included our own javascript file last week.

In fact, we looked at the file and realised that p5 is just another javascript file, just like the one we wrote – the code is long and looked a bit complicated, but it was basically the same kind of thing.

 

But really, what is P5?

p5 is a set of functions that make it easy to write programs for the most interesting parts of javascript!  Mainly, for drawing and animating things on a webpage, but also for sound, and other stuff.  If has lots of functions for:

  • Colour
  • Drawing 2d Shapes
  • Drawing 3d Shapes
  • Setting up the page
  • Working with Data
  • Interacting with events – mouse, keyboard, etc
  • Sound
  • Working with images
  • .. and many more!

We took a look at the reference for p5 here and got a feel for the kinds of thing you can do with it!

 

What does a p5 program look like?

p5 programs have two main functions:

setup(): The code you put in there runs once, just the first time that the page loads.

draw(): The code you put in there will run 60 times a second

You can put the same kind of code in both functions – there’s nothing special about either – the main difference is setup runs once and draw runs all the time in a loop.


Our first sketch

We started today by creating our first sketch. one in which we played with the shapes and colours to try and make some kind of picture.  My sketch was pretty poor, but made the point:


function setup(){
createCanvas(500, 500);
background(0);
}

function draw(){
fill(255);

strokeWeight(5);
stroke('red');
rect(100, 200, 100, 100);

fill('orange');
stroke(255);
ellipse(150, 150, 80, 150);

strokeWeight(10);
point(140, 120);
point(170, 120);

fill(0);
strokeWeight(2);
rect(135, 160, 40, 10);
}

I introduced the following functions from p5:

createCanvas(500, 200): This creates a canvas to draw on, ‘500’ wide and ‘200’ pixels tall.

background(0): Background is a function that fills the screen with whatever color you choose. Like all the functions that take a colour,it can be 1, 3 or 4 numbers or else some text describing the colour name.  When it’s 1, it’s a colour from 0 to 255 where 255 is white and 0 is black.

fill(255): This function will mean that all shapes drawn afterwards will be filled in the chosen colour – in this case, white.

strokeWeight(5): This set the line thickness around the shapes that we draw next. Setting it to 5 made it more obvious what we are drawing.

stroke(‘red’): This sets the colour of the “stroke” or lines around the shapes we are drawing next.

rect(100, 200, 300, 400): This draws a rectangle at coordinates (100, 200) and of width 300 pixels and height 400 pixels).  The x,y coordinates of the rectangle is by default the top left

ellipse(100, 200, 300, 400): This draws an ellipse at coordinates (100, 200) and of width 300 pixels and height 400 pixels).  The x,y coordinates of the ellipse is the center!

point(100, 200): This draws a “dot” at the chosen location – in this case 100 from the left and 200 from the top of the screen.

So.. what did this sketch look like?  Pretty bad actually 🙂  However we had some great entries from you guys!

 

 

 

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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