https://editor.p5js.org/bengrosser/sketches/Z5KkbW8_d

https://editor.p5js.org/bengrosser/sketches/fBtPutnIb

https://editor.p5js.org/bengrosser/sketches/-0Zh_SxWH

I want you to use the techniques, keywords, and functions we’ve learned so far to make a new interactive drawing app. However, a bit differently than our exercises up to this point, I want your program to have *at least two* objects that will be present on the screen at the same time! For example, you could have two (or more) ellipses bouncing around the screen, or, 20 lines all dancing around, etc. 

Whatever you make, find a way to use all of the following:
– conditional statements (if/else)
– at least one for() loop
– mouseX/mouseY for interaction
– colorMode(HSB)

You may also consider using the keyboard (look it up on the reference) as an additional input method.

And if you want a stretch challenge, I’d like you to think about and implement a way for your program to change over time. For example, if you recall our last bouncing rect program from Monday, in the end we had two variables (xJump and yJump) which we could tweak to change things pretty dramatically. What if you automated those variables changing the longer your program runs? Or used if() and random() to make them change, say, 10% of the time? In other words, try to implement a way for your program to be less predictable in its output than what we’ve made so far.

Finally, please start a new sketch from scratch. You may look all you want at our previous examples from class, but challenge yourself to start from scratch. Doing so helps you 1) get practice with writing code, and 2) will save you headache down the road when the think you copied from isn’t quite the thing you need now. We will have plenty of opportunities down the road to adapt/tweak something already existing, but right now you can all benefit from iteration on these fundamentals.

Post a sketch to the blog by Monday’s class and we’ll look at a bunch of them together.

here’s the code

Here’s a mostly worked out example of what we were pecking at last Wednesday. This sketch draws rectangles that adapt to fit the container. Move the mouse over the sketch in X/Y to change the grid and the gap.

Note that if you load this up in a non-square window (go to the code and load it full screen or duplicate and adjust the canvas size), the rectangle shape will match the aspect ratio of the canvas.

This sketch uses a couple concepts we haven’t talked about in class yet (but will this week!): functions and map().

Here’s the code.https://editor.p5js.org/bengrosser/sketches/PIkPHXrR3

Here’s the code

https://editor.p5js.org/bengrosser/sketches/lABJaoxQv

I fixed the iframe embed issue and made the GIF above. When I set the width/height to 400px, I’m getting those values from the canvas size on the p5 sketch.

I should have also included posting a link to the code, but it would be great if you could that as well when posting your embeds (e.g. in a clickable link below the embed).