This week’s assignment was to code a page with sliders and switch it with a partner. We decided that since space was both an interest we would create a space shuttle dashboard. For mine, I essentially create an image mover and zoomer with an added tint effect.
In switching codes, the biggest realization for me was how important it was for my program to be clean and organized. I tried to make sure to clearly label each section and indent when necessary so that my partner had an idea of what I was trying to do. This also helped me as I went along because it became easier to know where things are that needed to change. Also, it was easier to combine different aspects of my code with my partner’s.
The hardest part of this week was figuring out how to change the tint of the picture. When I used the tint function and had variables setup for each color value, it didn’t seem to work because the tint function was in “function draw().” Using the examples located on the p5.js website, it showed that the tint function was used in the setup only. Although I did really want to use this method to vary the tint, I knew that by creating an opacity of the image and then varying the background I could create the same effect. Overall for my program, I created what I envisioned from the start and am happy with the result, even though I would still like to know how the tint function worked. Here and below is my final result and here is the added tint buttons to my partner’s.
Questions:
- Can the tint function work inside the draw function so that it can be varied?
- Why does the tint function slow down the frame rate and make the page not load? Is this due to too big of a picture size.