Learning Materials

• Videos 5.1-5.3(~40min) in the learning p5.js series.
  • function purpose of existence: Modularity, Reusability (portability)
  • how to use: define & call
    • create a function and its parameters
  • return syntax
    • function(parameters){… return __ ;}
  • everything that repeats but is different in each iteration is an argument

Work Log

(After you’ve watched the videos for next week on functions...) How might you make something loop without using a for loop or a while loop? (Hints: https://en.wikipedia.org/wiki/Lather,_rinse,_repeat

• I thought about this for a while and was reminded of recursive functions, because of Mimi’s lather, rinse, repeat hint.

  • the repeat part is where it makes it do everything all over again.

    

  • it also reminded me of asking for 3 more wishes when granted 3 wishes.

  • I think I took it at face value and didn’t give much thought to it when I learned about this concept for the first time.

• For this exercise I tried making a checkerboard.
  • I needed to make my function to be of two parts:
    • the lather, rinse part (=the core action of the function): draws one check
    • and the repeat part : calls itself to draw another check
      • within the bounds of the canvas
      • needs to move one check across then draw
  • with the function looping on its own, I only needed to call it once in the draw() function.

Create a pattern by making something with a lot of repetition. Is the resulting pattern easy to see or hard to see? What would it mean to create the illusion of pattern? Can you predict what the pattern will be when you run your code or does it surprise you?

• 1st idea: I wanted to draw something with a fractal pattern in nature - a fern, like this one:

  

  • but it was too hard. I tried drawing one leaf and that was way too hard, let alone the whole thing

• 2nd idea: so I opted to draw a staircase pattern.

  • I decided to use the same recursive function structure I used for the previous exercise.

  • at first, I created a function that would create one step and made it recursive. I tested it out until it worked.

    https://editor.p5js.org/jinnie75/sketches/7LXgZUHj-

    • I made it start from a point I could see well, but realized I could make it draw either upward or downward and left or right.
      • which could be done by different signs for w and h variables, which is the unit in which x and y draws horizontally and vertically, respectively.

    

  • Then, using the looping logic of draw, I wanted it to make it start drawing staircases starting from any random point with varying step sizes with different greyscale colors.

    https://editor.p5js.org/jinnie75/sketches/KeZQTldF_

    • so I gave x and y and w random numbers within a range
    • and h to be -2, -1, -0.5, 0.5, 1, 2 times w

    Screen Recording 2024-09-29 at 8.14.31 PM.mov

    • I made the frameRate intentionally slow, but after some time there is a certain grid pattern (maybe like a bird’s eye view of New York?) on the screen. In time, the screen becomes merely a greyscale blob.

      

      

• answers to the prompt:

  • What would it mean to create the illusion of pattern?
    • if you tear apart each component, they don’t look like much. just another line, just another circle.
    • when they come together they collectively create an illusion of a pattern.
  • Can you predict what the pattern will be when you run your code or does it surprise you?
    • sort of, because I made it. I don’t think it would surprise anyone watching this motion unfold for a few seconds.

• room for improvement: I did this assignment on a rainy day and the work turned out a tad gloomy. I would like to retry my fern Idea and create a whole garden out of it.

Question

• The browser dies time to time. Are there best practices to keep this from happening?