Documentation 03
//Some process screenshots/recordings for the worksheet homework
For the slider widget, I started with the very simple part, coding with without pressing the mouse while the toolbar’s color changes when the cursor proceeds to the end of it.
Then I made it interactive only when mouse is pressed using the conditional statements. Also, I actually want the slider widget to control something showing some interactivity. Thus I made the background “brightness” synced with its movement.
One step that I explore further is when the mouse leave the slider and is released, it remains the state instead of going to the original state. This process takes me a little longer time to dive in. I was thinking of using the boolean variables like we used in the worksheet setting up the three rectangles, yet I found it is actually not that complicated. The onlything I need to do is to set some variables in the setup() to make them happen once.
//group project
We worked in the way which Tom writes the conditional statements while I fill up the arguments. This is what I get from Tom![]()
Then I built up from that by first changing the regular outlook while adding some more fading out coding to the fills so it looks like the ellipse is an enraser.
![]()
Also added another conditional statement, trying to let the ellipse exist outside the boundary of the triangles which Tom has set up after the previous triangles are erased.
Then I have this thought of having two triangles in the middle of the screen shows up individually with a constantly changing stroke weight. I tried to do it in the code but since there’s multiple things happening there, I started a new document, doing that part of coding there and copy pasted it to clearer my mind.
In order to get it right, I also did a drawing to map out the correct arguments:
![]()
![]()
And since the random color changes of the background is too eyecatching, I added another line calling the background change to black only when the mouse is in the range of the triangle.![]()
Final piece:
Then I made it interactive only when mouse is pressed using the conditional statements. Also, I actually want the slider widget to control something showing some interactivity. Thus I made the background “brightness” synced with its movement.
One step that I explore further is when the mouse leave the slider and is released, it remains the state instead of going to the original state. This process takes me a little longer time to dive in. I was thinking of using the boolean variables like we used in the worksheet setting up the three rectangles, yet I found it is actually not that complicated. The onlything I need to do is to set some variables in the setup() to make them happen once.
//group project
We worked in the way which Tom writes the conditional statements while I fill up the arguments. This is what I get from Tom
Then I built up from that by first changing the regular outlook while adding some more fading out coding to the fills so it looks like the ellipse is an enraser.
Also added another conditional statement, trying to let the ellipse exist outside the boundary of the triangles which Tom has set up after the previous triangles are erased.
Then I have this thought of having two triangles in the middle of the screen shows up individually with a constantly changing stroke weight. I tried to do it in the code but since there’s multiple things happening there, I started a new document, doing that part of coding there and copy pasted it to clearer my mind.
In order to get it right, I also did a drawing to map out the correct arguments:
And since the random color changes of the background is too eyecatching, I added another line calling the background change to black only when the mouse is in the range of the triangle.
Final piece: