Skip to main content

Last week we learned about organizing our code into functions.

I was quite excited at this prospect because writing line, after line, of repetitive code is not only tedious and annoying, but really disrupts the thought process behind formulating a clean, working script.

Dan Schiffman's first object tutorial comes quite early in his sequence of beginner p5.js tutorials on YouTube, hence:

The 'objects' video piqued my interest because I have always wondered how to make such objects in p5.js,like a specific circle, or whatever, that I want to use continuously in my code.

The syntax was quite annoying, just as a learner, because: Why can't I just place the object wherever I want without writing, for example, circle.x, etc?

I must sound like a total newbie now, because even I can see how when writing longer code, dissecting an object's variables is a valuable asset.

Functions, on the other hand, provide that need in code to just declare a set of commands (?), loops, etc into one "folder" and organize it however I may please; to not only make my code legible, but also shareable.

When Luna and I met, sharing and collaborating was a fair breeze. It took only 15 minutes. Luna's code was clean, and I learned that my function "balloon" could contain the random circle colors, as well as the "if statements" for the rollover circles.

As you can see, the original script, named "balloons with confetti" had a black background:

I added 'rollover' attributes to my drawing for a sliver of interactivity, using 'if statements' and calculating where a new ellipse should be drawn, based on the mouseX (x axis of the mouse on the image,) variable.

My equations involved with placing the new color block circles over the randomized circles were all about dividing the canvas' width into 4 equal parts and adding the length of the pixels.

I wanted to have an equation that was not based on exact pixel numbers, but something more responsive to the user's screen. My math is not spectacular, so I ended up using pixel measurements that were canvas-based.

My rollover code ended up looking like this:

 if (mouseX>= width/4)
  { fill (244,212,66);
   ellipse(width/4-75, cy, cd, cd);
   if (mouseX>= width/2)
  { fill (156,10,188);
   ellipse(width/2-75, cy, cd, cd);
       if (mouseX>= width/3)
  { fill (9,140,29);
   ellipse(width/3+175, cy, cd, cd);
    if (mouseX>= width)
  { fill (9,140,219);
   ellipse(width-75, cy, cd, cd);

Here is what it looked like.

Luna's 'spiral' function added a spiral blue background, which in my opinion gave the image further depth.

I wish to do so much more with p5.js, but I am just learning this scripted language, and have to have way more experience; practicing and being patient with my mental processing (get it,) of this new lingo!