Advancers – Text based coding with p5.js

This week we tried something different with some text based coding.  We learned that for text basoslcyofed coding, we need a good text editor.  The text editor we picked was called “Atom” as it’s a free, powerful text editor that works on Mac, Linux and Windows.

Unfortunately.. with some network and pc problems.. it took longer than I hoped to get things installed on people’s PCs, but even then we managed to make a great start on some code and actually built some quite cool stuff.

For anyone that missed last week.. it would be great if you could run through the steps below and we will be ready for the next stage!

What is p5?

P5 is a library for writing creative artistic code in javascript.  It has commands for drawing, animating, sound, art, images, etc and lets you build cool visualizations and games.  P5 makes it a lot easier to do these things than with javascript alone.

The p5 web page has great turorials and references.  Watch this video.. this is a great overview of the kind of things we can do:

http://hello.p5js.org/

We can write and edit p5.js sketched locally on our pc, or online on websites like codepen.io.

Installing p5 on your local PC


Step 1: Installing a Text Editor

If you already have a text editor that you like and are happy with, then there was no need to install any editor.  However.. for those that don’t we installed “Atom” which is a free and very powerful editor that works on all PCs.

To install Atom:

  1. go to the Web site: https://atom.io/
  2. Click download
  3. When it has downloaded, run atomsetup.exe to install it (the setup is a little different in linux or mac)

If you want to try other text editors, or if for some reason Atom doesn’t install on your PC – just google them and follow the same process to install.  Good ones are Sublime Text, Visual Studio Code and Notepad++ for Windows.

Step 2: Download empty p5.js example project

The following file is an empty example of a p5.js project.

  1. Download it from here
  2. Copy it to a folder on your PC where you keep your code –  a “code” folder in your home folder would be perfect.
  3. This file is a “zip” which means that it has a bunch of files compressed in it.  You’ll need to unzip the file before you can use it.  Extract all the files.
  4. You should now have an “empty_example” folder with some files and folders beneath it.
  5. Whenever you create a p5 program you will copy this folder and change it to have the code for your new project.

At this point it became obvious that most people need a little more help in managing files and folders – I think some week soon we should spend some time learning about this as they are really important building programs and then go on to really start understanding what we are doing.  It will make our lives much better.

Step 3: Starting a new “Sketch”

In P5 a project is often called a “Sketch”, because many projects are about drawing things.

  1. Copy the empty_example folder to a new folder
  2. Rename the new folder to “hello_p5”
  3. Open the folder in atom by opening atom, selecting file.. open and choosing the new folder.
  4. Open the file index.html in your browser (we mostly used chrome).  You should see an empty white page

We were now ready to get started on your first sketch!  Getting to this point took us a while, but now we are ready to go!!

What is in a sketch?

What are all the files for?

Sketches in p5 are made up of a couple of important files:

  1. index.html: This file is opened in the browser to view the sketch.  You will not have to change this file that often – it just has some instructions in it that tells it to include the sketch in the page.
  2. sketch.js: This file contains the main code for your program and is written in javascript.  If your script starts to get big we might add more javascript files to make it easier to organize, but mostly we will be working in this file.
  3. libraries:  The libraries folder is needed, but you will never need to write any code in there.  You just need this folder in your project for it to work.

As well as writing code locally, it’s possible to write it online using a website called codepen.io – I’ll show next week how to do this as it might be simpler for people with chromebooks, etc.  In fact, it might be easier for everyone to do things this way until the sketches start getting really big and complicated.  In all the examples below, you can try them out and play with them on codepen by clicking the links.

What does a Sketch Code look like?

Each P5 Sketch looks like the following:

function setup(){
}

function draw(){
}

There are two functions here.  Code written in “setup” runs once, when the script starts up.  Code written in “draw” will run about 60 times every second.  We wrote 5 sketches in total:

Week 1 Sketches – Getting Started!

The sketches we developed this week are below.  To try out the sketches, just click on the link below the sketch description and you can try it on a website called codepen.  You can play with it there and try the challenges!

Sketch #1: Set up the canvas size

Play with this on codepen!

function setup(){
createCanvas(640,480);
background(50);
}

function draw(){
}

A Canvas is a drawing area – this is the area that your sketch code has to work in.  This first line created a canvas 640 pixels wide and 480 pixels tall.

The second line colored it in grey – the colors are from 0 (black) to 255 (white) so anything in between is some shade of grey.  We gave it a color so we could see the background!

Challenge!:

  • experiment with different sizes and background colors.
  • experiment with 3 numbers in the “background” command instead of 1.

Sketch #2: Draw a rectangle: rect function

Play with this on codepen!

In this sketch, we built on the previous one by drawing a rectangle.  The code was:


function setup(){
createCanvas(640,480);
background(50);
}

function draw(){
rect(300,200, 100, 50);
}

We saw that this drew a rectangle a x=300, y=200 with width 100 and height 50.

Challenge!:

  • Add more rectangles
  • Can you “draw” a robot face?

Sketch #3: Try an ellipse!

Play with this on codepen!

In this sketch, changed the last one to use an ellipse rather than a rectangle.  An ellipse is a circular shape but can have a different height to width.  To do this, just change the word “rect” to “ellipse”!

Try changing it to draw some more ellipses!  Or adding more shapes!

Challenge!:

  • Add more ellipses
  • Can you make it draw a circle?
  • Can you draw a face with circular eyes?  How about a square face and circular eyes?


Sketch #4: Follow my mouse!

Play with this on codepen!

In this sketch, we learned that the x and y position of the mouse are in special variables, mouseX, mouseY.  Instead of drawing the ellipse at a set position, you can set it to draw wherever your mouse happens to be.  The code for this is below:


function setup(){
createCanvas(640,480);
background(50);
}

function draw(){
ellipse(mouseX,mouseY, 100, 50);
}

Challenge!:

  • Can you just use one of the values mouseX and set mouseY to a fixed number – e.g. 400?
    • Might this be good for an “arkanoid” style game?
  • Can you draw rectangles instead of ellipses?
  • Can you draw “crosshairs” that are related to the mouse positions?
    • e.g. rect(mouseX + 50, mouseY, 2, 10);


Sketch #5: Random colors!

Play with this on codepen!

In this sketch, we learned that “fill” can be used to set a color.  Like the background command, fill can take 1 or 3 numbers as arguments.  If you give it 1 number, it will be a shade of grey.  If you give it 3 numbers it will be a red, green, blue – just like in gimp!

The code for this sketch was below:


function setup(){
createCanvas(640,480);
background(50);
}

function draw(){
fill(random(255))
ellipse(mouseX,mouseY, 100, 50);
}

Challenge!:

  • Try setting it to random shades of red (hint: if you provide 3 colors, the first number is the “red” shade, the second the “green” shade, the third the “blue”.  e.g. background(0,100,200) is “0” red, “100” green and “200” blue.
  • Go back to your other drawings, and see if you can color in the robot face (or whatever else) you drew


Sketch #6 Whacky crazy shapes!

Play with this on codepen,

Finally, we did a sketch where we tried some random, shapes and colors all together.  This comes up with some whacky results. An example is below:


function setup(){
createCanvas(640,480);
background(50);
}

function draw(){
fill(random(255), 0, 0)
ellipse(random(width),random(height), random(100), random(100));
fill(0, 0, random(255))
rect(random(width),random(height), random(100), random(100));
}

This sets the fill to a random red shade, then draws an ellipse at a random size and a random location.  It then sets the fill to a random blue share and draws a random rectangle at a random location!

Challenge!:

  • Can you try different shapes?
  • Can you use the mouse position somehow to make the colors change depending on where the mouse is?

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s