This week, we looked at more p5 topics. I’m starting to feel more familiar with the structure. And I made a square go up!

I learnt how to declare a variable and use an if statement to create a boundary for the moving square. When the y-position of the square reaches -100px on the screen (fully disappears), the y-position moves to the bottom of the screen to start moving up again.

Learning p5 Topics

frameCount & noLoop

  • count always start at zero
  • the frame is only counted once in the set up function because it only loads once. However, it will keep looping in the draw function.
  • noLoop stops the code from continuously looping

variables

  • Let is a reassignable variable, while const is a variable that is immutable
  • back ticks allow us to directly call a variable using ${...}

colour

(notes in comments)

print & log

  • print(msg) will print a message in the console where const msg = "..." is defined
  • better to use console.log ( ) as the above only works in set up or draw functions and NOT in the global scope (otherwise the computer will literally try and print the page!)

noise & random

  • random: generates an unexpected number in a specified range
  • noise: produces more ordered sequence in comparison, where you can manipulate the space between coordinates

(hover over canvas)


Exploring Ideas

For Assignment 1, I started to brainstorm and try gain some inspiration from Thomas’s original RMIT header. I wanted to try and incorporate some motion in my project, so I first played around with shapes and lines, testing out how to create ‘boundaries’ with conditional statements.


I then began to experiment with arrays and the mousePressed function to make these objects look like they were dropping off the canvas. As the user clicks on the screen, the y-position of that object at that coordinate will increment. I thought it might be a cool idea to incorporate this function using text for the real project.


Next

Back to home