Wednesday

Github

Github is a platform for collaborating with code. It is used by pretty much all companies. We will use it for saving code and working together on code.

Signup for a user here

P5

P5 is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! Link to P5.js

To start writing some P5 lets go to https://editor.p5js.org/. Log in with the your github profile you created above.

For extra videos check out this page: https://learn.hobye.dk/development/p5js/basics

Our first P5 application

We are going to write the most famout program ever made. The "Hello World" program.

It is a very simple program, that mostly verifies that everything is up and running.

To write a Hello World in P5, we are going to enter the following in the text-edit window:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  text('word', 10, 30);
}

Coordinate system

To draw anything we must first know how the coordinate system works in P5

Lets try and make two points and play around with the coordinate system

// Setting the size of the dot
strokeWeight(10);
point(50, 100);

// begins a comment. A comment is text you can write that documents your code. point is the function that

Draw diferent shapes

In P5 it is possible to draw lots of different shapes. To figure out how to draw the different shapes go to https://p5js.org/reference/#group-Shape

Pair programming exercises

Duration: 20 min

Draw a line that is 100 pixels long
Draw an X using lines
Change the background to pink
Insert the following code in the editor: circle(56, 46, 55);

What happens if you double the amount in the: first, second & third argument? Try answer before you write the code

Color

To color stuff first start the fill command call the function with the shape you want to draw.

fill(255, 255, 0);
triangle(30, 75, 58, 20, 86, 75);
fill(255, 204, 0);
square(100, 100, 55);
fill(255, 204, 0);
square(100, 100, 55);
fill(255, 100, 0);
circle(30, 30, 20);