Project #2 Form Generator: Match

Austin Bailey

CC Lecture - Shirley Leung & Aarati Akkapeddi

https://editor.p5js.org/AustinBB/sketches/7MoOK5C-e

Design Process

Going into this project, I knew I had to keep a few components of my generator, like the match, constant. So it would have to be drawn like any other two-dimensional shape and unchanged throughout. I decided to use three rectangles, all in different shades, to create a three-dimensional looking base. An ellipse was placed on top to create the tip. I wanted this to feel like a mini interactive game with the viewer as the controller, clicking to light the match.

One key difference from my transfer of drawing to code is that I created an initial step, where the match is not lit and the user must light it to grow the flame. Once the match is lit (by clicking the screen), the box disappears, the text changes to the next step, the match tip changes color, and flames appear. With the use of the random () function, I was able to create a flickering effect that nicely resembled fire. Here is also where my form generation comes into place. I had to make sure that the flames dispersed out the match stick so with the use of triangles, I kept two points constant at the base and the third point was used to create the grow effect. With each click, the flames get higher until you are about to burn the words, then the flame subsides and you can grow it again.

Throughout this process, I learned that is it quite difficult to give in to the random () function. In most cases, I want to have control over the step-by-step functions so this project made me really focus on how to build something with the help of parameters and variables to quicken up the coding process.