https://editor.p5js.org/spss-ssps/full/_25f64Nim
Divide the canvas into 3 columns. Make each column turn red when you hover over it.
This one was helpful to get started with the basics. Having also a reference done in class it was a nice setup for the rest of the worksheet.
challenge: exe. 😓
https://editor.p5js.org/spss-ssps/full/KBd0j9FBs
Challenge: Code a slider widget by hand. Spend some time playing with it first to figure out all of its features. But, don’t use the p5 createSlider() function. See how far you get without looking it up. Hint: Get started by writing out the logic in plain human language.
I enjoyed making this one. I completed this challenge when attending the ICM help-workshop. I have be (bigger) insight go function like dist and constraint that I lated incorporated into my sketch.
https://editor.p5js.org/spss-ssps/full/vZZTWIzwV
Draw a rectangle to the screen about every half a second. In between, just draw the background. What information do you need to accomplish this?
For this one, it was interesting to directly utilize a time function for animation programing.
I can see with the overlaps with Arduino programing with this one.
https://editor.p5js.org/spss-ssps/full/0FVmb71ER
Try to re-write bouncing ball from memory in just the horizontal dimension. See if you can re-derive the logic for yourself. Challenge: Make the ball’s fill color bounce back and forth fading from white through gray 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 so that both fill color and the x-position of the ball hit their respective boundaries at the same time. Extra-challenge: Can you do it without using the map() function?
😮💨
initial curtain
Taking inspiration from my own bedroom window, I wanted to try replicating a morning experience of sliding a bedroom’s window curtain.
I wanted to try creating an effect that would make the image more visible/altered as the curtain moved. I initially thought of doing this by using the if/else conditional commands. With this the look of the image would change depending on the mouse’s location.
However, It didn't feel exactly what I was going for after working with this for a bit.
After trying out the 5th Worksheet exercise, where we had to change the color of the circle from one side to another, I applied that same basic logic onto the reveal for smoother color and transition.
This was overall a fun project to make, while there is still a lot to that I need to learn and understand, I feel like I manage to push my understanding of programing a little bit more.
first draft of sketch
if (mouseIsPressed && (mouseX < 100)) {
} else if (mouseIsPressed && (mouseX > 100 && mouseX < 200)) {
} else if (mouseIsPressed && (mouseX > 200 && mouseX < 300)) {
} else {}
crunching some number so the color is correctly adjusted when the curtain is fully open.
final sketch
https://editor.p5js.org/spss-ssps/full/lL6zW02p6
my window view