Interface Art

https://yuyang-hu.github.io/CCLab_F21/rebecca_miniProject10R/

I would like to make a website that connect html with p5.js. The ideal final effect is that users can control the background color of the p5.js by adjusting the range button on html page.

My project is an ellipse at the middle of the canvas. Users can adjust the first 3 sliders to change the R, G, B value of the canvas and make the background colorful. The fourth slider is used to change the opacity of the circle. The theme of this project is “the Sun and the Sky”, the changing background color can be regarded as the glow to the sky (or the sunset), and the red ellipse in the middle is the sun, the opacity of the sun can show the weather of the day.

During the process of making this project, I faced with a problem which is I cannot make a canvas showd in the html page.

I need to ask learning asistants and fellows to slove the problem.

After asking for help, I found that the problem was that I didn’t create a slider named “opacity” in index.html, but I called the id of “opacity” in script.js, so the program won’t work. Now it works well because I add a id named “opacity” in index.html.

I learned a very useful skill from the fellow, which is default. I didn’t understand it when professor moon taught us in the class, now I know how to use it. That function can tell me where went wrong, it is really helpful when finding the wrong place, you don’t have to go through all the codings.