• ZIWEI JI

    • Form Generator

    Description

    This form generator allows one to interact through a keyboard and mouse. One can also explore the position of the mouse and the color of the popsicle.

    Below are the main interactions:

    Color: when the mouse is position in different location of the canvas, the color of popsicle would change reletavily.

    Size: Pressing on keys : 1,2,3,4 mimics the animation of eating a popsicle in real life. Once you finished the popsicle, key "4" act as a reload button to revert to a full popsicle.



    Design Process, Reflections and Observations

    Design Process:

    The design idea mimics human interaction with a popsicle and brings the experience of eating a popsicle by clicking on the computer. However, with my limited knowledge of P5.JS, a sequence action was hard to achieve.

    To achieve the sequential order of eating a popsicle. I decided to set the background color to Black(0,0,0) and change ellipses' transparency level from 0 to 100. Thus, it gives an illusion of "eating the popsicle." This means the ellipses' location remains the same; only its transparency level changes with the press of the keys. There is a total of three groups of ellipses. Group one connected with key "1", group two associated with key "2", and group three associated with key "3". Each key initiates the transparency code command. Lastly, key "4" changes all three groups of ellipses back to its original color(0,0,0).

    The popsicle is divided into three parts, top, middle, and bottom. Each block is assigned with mouseX's location through the use of Mapping. In the P5.js, the location of the mouse is related to the background grid. Thus, give mouseX a set of interval(x or y coordinate) with random color (within the variables) to gives it an exciting aspect.

    The form of the popsickle are combosed by six rectangle with different level of rouded corner.

    Lastly, Random() played an essential role in the background. The randomized background stars are set with random location X, Y(within the canvas), and random sizes to give the background a sparkling effect.