Here is the final code for this week’s homework: https://editor.p5js.org/elinsterz/sketches/ByaOUtiom

Below is a video of the sketch above.

 

—

Process: 

For this week’s assignment to create our own HTML page with the following:

• Pre-defined HTML Elements
• Pre-defined CSS Styles
• HTML Elements generated by your p5 sketch
• Some kind of mouse interaction with an HTML Element using a callback function you write.

—-

I first drew up this rough sketch of what I was hoping to do. The idea that I was hoping to achieve is that the ellipse size of the petals and middle of flower (called pistil) will change when the slider is moved. I also wanted to have a text insert so that the text will display who the flowers were for.

First I created the p5 dom elements that I knew I wanted to have. Instead of a flower, I just tested with an ellipse. I also created an h1 tag and attached css style elements to it. I also created a div with a class called “hr” for horizontal ruler. Then, I attached some css styling to get the horizontal ruler  and the canvas size to match.

Then I created an individual flower in function draw() first.

Then I moved the flower into it’s own js file and made it a class. Afterwards, I created an array within function setup() to create a grid of these flowers. To correlate the slider with the size of the ellipse, I put the slider.value() in the parameters set up when I push a new class “Flower” into the array called “flowers”. I also put the “bgcolor” in the new “Flower” parameters.

Originally, I had the Flower’s function show() in the draw function. However, I realized that this was not correct, because the slider was not affecting the size of the ellipse at all, nor was the flower’s ellipse pistil changing colors with the background color. But once I moved the for loop that creates the flowers from “function setup()” to “function draw()”, it worked great!

Next step was positioning the buttons and sliders and text inputs in a more visually appealing way by spacing it out better.

Also, another issue I ran into was that the pistil ellipse was scaling with the slider but the petal ellipses were not. As a possible solution I tried to create a second slider.value() called “slider.value2()” just for the petals. I put that variable in all constructor parameters but it doesn’t work properly still. The issue is that it will scale up only once the first time it is move, but it doesn’t scale down. i tried console logging the slider.value2() and the console reads that the slider is being moved, but for some reason it won’t scale down. I am currently trying to troubleshoot this still. Update coming soon.