DO: In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs as below. Can you divide an idea into two parts and combine those parts? Can you swap sketches and riff of of your partner’s work? You can post together or break off and complete the assignment individually.
- Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we’ll look at how this compare to interface elements we’ll get for free from the browser.
- Create an algorithmic design with simple parameters. (One example is 10PRINT, example code).
- Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
This assignment was made in collaboration with Lillian Ritchie.
We decided that both of us would make a design and its buttons, and then we would switch the buttons, and each design would have a button that turned it into the other person’s design. We chose a common color palette, so we knew the designs would dialogue somehow, and worked separately in the first part.
I wanted to practice using loops, arrays, translation, rotation, map and objects. In the first screenshot, I had already figured out how to make an array of colors, but it took me a long time to do so. Actually, I realized I cannot use a variable to which I assigned a color() and try adding transparency to it – stroke(clr, 100); – which was a problem at some point.
From the grid, I added rotation to the squares, and variations on width and height that were, at first, mapped to the mouse position.
Then, I designed a scrolling button and a rollover (not in screenshot), and assigned the value of the mouse when interacting with them to the rotation and size of the shapes.
When that was finished, I thought it was still a bit too empty, so I doubled the grid and made it rotate to the opposite side. In the end, I translated the whole piece to the center, quadruplicated it’s size, and made both grids rotate as a whole from the middle point. When the mouse is not over the red rectangle, both grids rotate to the same side, and the small red square controls the position (individual rotation) of the squares on both grids. When the mouse is over the rectangle, it turns orange, the second grid becomes the same color of the first one, but thinner, and the X position of the mouse defines the size of the cells on the grid.
The last thing to add was a mouse click function so that when you click the mouse, you go into Lillian’s design.
When we were finished, we sat together to try to put the designs in the same code. First we tried making them into functions, so we could call them separately through draw. Lillian was using the createSlider() function in setup, so it took us some time to figure out where to put it so that it wouldn’t stay on screen when we switched to my design, and the way we found to do that, was to position it very far from the screen whenever mDesign() function was running.
Other problem we had, was in finding out how to have the background run only once when we switched from mDesign() to lDesign(), since Lillian also had a background() in setup. We tried a few things, but it would either erase the circles and lines, or look like this:
The solution we found was to make a boolean for it, and assign it as true when we clicked the button in mDesign(), and using an if statement that said if background is true, create background, and turn the boolean into false.
It is difficult to collaborate while coding, since there is probably only one person writing the code at a time. But, we had our computers side by side, so we were both looking for solutions simultaneously, sharing them and running into different problems whenever we changed something. Also, it is amazing to look at how other people work on their codes and what lines of thought they go through to complete the assignments. It was very challenging and fun.
Connected designs: https://editor.p5js.org/mardefronteira/sketches/H1T4BsUt7