Hackathon: Day 1 (Independent Learning Journey) - P5.JS

Mar showed us how to use P5.JS.

We first created a square using rect(30, 20, 55, 55);  

Then we filled in the square and the line colour using stroke(255, 0, 0) and fill(0, 255, 0);

We then created an ellipse using ellipse(mouseX, mouseY, 100, 55); 

The ellipse followed our mouse due to using mouseX and MouseY as values.

By removing the background, when the ellipse followed my mouse it created a pattern.

We then created a conditional statement that stated:

if(mouseY<200) {

  ellipse(mouseX, mouseY, 100, 55);

  } else {

   rect(mouseX, mouseY, 100, 55);

  }

This means that when the mouse is less than 200 on the Y-axis (halfway), the ellipse would follow the mouse, otherwise the rectangle would follow the mouse instead.

I created my own conditional statement which states:

  if(mouseY<200) {

  ellipse(mouseX, mouseY, 100, 100);

      fill(100, 250, 100);

      stroke(50,100,230);

  } else {

   rect(mouseX, mouseY, 100, 100);

      fill(50, 150, 200);

      stroke(100, 250, 100);

  }

This means that when the mouse is less than 200 on the Y-axis (halfway) a light green circle with a light blue outline will follow the mouse otherwise a light blue square with a light green outline will follow the mouse instead.

Mar showed us how to include a loop.

We created lines using this code which states that if the variable i is equal to 0 or less than 100 then increment it's value by 1. 

The code then prints the variable and a line until i is more than 100.

function setup() {

  createCanvas(400, 400);

  background(220);

  for (var i=0; i<100; i++)

  {

    print(i);

    stroke(0);

    line(0,i*5,100,i*5);

  }

}

Mar showed us how to edit an already existing example code which used an array of objects.

We added a piece of code to the "this.display" function so that when our mouse was close to a circle, it filled with colour.

 this.display = function() {

    if(dist(this.x,this.y,mouseX,mouseY)<50) {

      fill(255,0,0);

    } else {

      fill(30,30,30);

    }

    ellipse(this.x, this.y, this.diameter, this.diameter);

  };

I received a stamp for attending this optional workshop as this has helped me gain new skills that I can apply to my portfolio website.

Stamp 6

Bibliography

P5.JS (n.d.) P5.JS Editor. [Online] Available at: https://editor.p5js.org/. [Accessed: 16 October 2018].

P5.JS (n.d.) Array of Objects. [Online] Available at: https://p5js.org/examples/objects-array-of-objects.html. [Accessed: 16 October 2018].