Week 3
3-1
( 1 ) Worksheet projects :
Divide the canvas into 3 columns. Make each column turn red when you hover over it.
![]()
Change the behavior so that when you mouse over a column, you turn it red and it stays red until the next time you mouse over it again, at which point the column goes back to white. (Just get this working for one column.)
![]()
Challenge: Code a slider widget by hand. See how far you get without looking it up. Hint: Get started by writing out the logic in plain human language.
![]()
Draw a rectangle to the screen every half a second. In between, just draw the background. What information do you need to accomplish this?
![]()
Challenge: Make its fill color bounce back and forth fading from white to black and then back to white again. Challenge: Make the fill color bouncing back and forth sync up with the ball bouncing back and forth. Extra-challenge: Can you do it without using the map() function?
Change the behavior so that when you mouse over a column, you turn it red and it stays red until the next time you mouse over it again, at which point the column goes back to white. (Just get this working for one column.)
Challenge: Code a slider widget by hand. See how far you get without looking it up. Hint: Get started by writing out the logic in plain human language.
Draw a rectangle to the screen every half a second. In between, just draw the background. What information do you need to accomplish this?
Challenge: Make its fill color bounce back and forth fading from white to black and then back to white again. Challenge: Make the fill color bouncing back and forth sync up with the ball bouncing back and forth. Extra-challenge: Can you do it without using the map() function?
Week 3
3-2( 2 ) Homework
Work in Pairs Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors (if statement) and the other one codes the output behaviors (what to do if it’s true.) Can you swap sketches and riff off of your partner's work? Provide 1 sketch link per pair, however clearly describe who did what in the code.
Becky partnered with me in this project and we ended up making a slightly different than each other but having some similar conditional functions that we discussed with each other in the beginning.
We both agreed on making a light switch that changes either the sky color outside the window or the background color. Our intention was to create a button switch that could allow us change the color.
![]()
At first, I made the function to let the mouse click cause four different results (colors of the room and outside the window, and Becky built the elements in the room. After that, we connected these conditional options and added other interactions to our sketch.
I also create a version that lets the switch only affect different light settings in the scenes.
Becky partnered with me in this project and we ended up making a slightly different than each other but having some similar conditional functions that we discussed with each other in the beginning.
We both agreed on making a light switch that changes either the sky color outside the window or the background color. Our intention was to create a button switch that could allow us change the color.
I also create a version that lets the switch only affect different light settings in the scenes.