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].

Comments

Post a Comment

Popular posts from this blog

Unity Project 4: Ball platformer game

Image
Finished game displayed in the scene view. Scene view Assets Uses Rigidbody so that the ball can use physics (Gravity) therefore it doesn't fall through the ground. The 'Rolling Ball' script is attached to the ball which adds force to the ball. Ball Inspector Scene view displaying the invisible cube object which can be used as a trigger for an event. Scene view When the console prints 'COLLIDED', the ball has collided with a specific object (Invisible cube). Console Message The invisible cube that is attached to the 'Trigger' script. When an object does not have a mesh renderer, the object becomes invisible as we cannot see it due to it not having a mesh. Cube Inspector Field of view changed, so that the ball can be seen from a slightly different angle. Follow target script also attached allowing a first person type view of the ball as the camera is set to follow the ball's movement. The camera can be moved so tha
Read more

[Research] Traditional Poster Design (4CTA1214)

Image
As you can see from the superman poster, there are only four main colours used which includes red, blue, yellow and brown. All elements are filled in with block colours with no shading which was a common colour theme for traditional posters of this kind. This poster may have been used to advertise a new Superman comic or movie depending on the year it was created. The expression on the characters face fits the title shown on the poster explaining that he is returning. This poster advertised Coca Cola, and looks as though this specific poster was used in the USA - due to the currency used. The whole aim of the poster is to incorporate this drink into working peoples daily lives. This is seen by the slogan, 'Work refreshed' and the small graphics on the bottom right of the poster. Displayed is a man working in a factory environment and a lady is working in an office environment both drinking cola during their breaks - to feel refreshed. In some ways the bottle and
Read more