Explanation of the project
https://editor.p5js.org/yyyyyelena/full/Z484gRC_M
This project creates an interactive kaleidoscope that allows users to create their own designs. On the left side of the screen is a 200 * 600 interaction area where users are able to draw using a simple color palette. To change the color, users simply need to click on the color cubes. To activate the eraser, users need to press “E” and the mouse together, and erase things one the interaction area. Users are able to control the number of panels and the speed of rotation by sliding the slider bar.
Under the instructions from professor Leon, I created an invisible canvas of 200*600 under the interaction area using createGraphics function. In this way, whatever is drawn on the interaction area can later be projected onto panels in the display area.
This project keeps reminding me of my second project, the paper cutting thing. I think the major difference is that in this project I don’t have to calculate the coordinates of the mirrored strokes anymore. And the strokes can be mirrored for multiple times.
User Experience Design
- Originally, the interaction area starts with the coordinates (0,0), because I failed to calculate the coordinates for the translate function. However, starting with (0,0), it’s hard for users to draw on the top of the interaction area, especially the top-left area where the intersections of the panels can be seen and magical (?) effects can be created.
- For the color stroke color, I used to have the arrow keys to change the colors. But it is really strange when you have to press the key and draw at the same time. And generating random strokes on the canvas when you are not ready is not ideal as well. Eventually I figured out how to make the functions I have right now.
Further suggestions
- The project name and the actual user experience aren’t a perfect match. The suggestion from the recitation is that I can prepare some geometric shapes in the tool bar area and let users put the shapes onto the interaction area. Or, I can change the name of the project. Or, I can make the lines of the panels thicker. Or, the size and angles of the panels can vary more so as to really generate the kaleidoscope.
- The two slider bars don’t work well together. When changing the numbers of the second slider bar (for the speed), it is not until the first (for the number of panels) is changed that the speed starts to change as well.
- I thought about make the rotation of the panels speed up and slow down on its own as well (but I ma lil bit sleep deprived lately so I didnt code for that idea
- When starting off, there need to be 4 panels right at the start and they need to be spinning already, so maybe make the frame of the panels thicker
- When the number of panels reach a certain amount, there appears to be a single panel rotating lunatically, tho not very very obvious. Maybe I can fix that in the future
Lessons learnt during the process
- Do check slack/ open notifications for slack :P. I didn’t see the instructions sent on Thursday morning so the last minute editing didn’t include these instructions
- Tones of interesting functions in P5.js, like createGraphics; slider bar; text box; a bit of the 3D function during the exploration process … I am also more comfortable with using class & array functions
- Here are some screenshots of my notes & experiment:
-
3D experiment 
- prototype of the project where I was still struggling with the background stuff
Fun Facts
- I was using the school computers in the library to code. I tried 5 Macs in total throughout the 2 weeks ish time, but the webpage all stopped responding at some point during the coding process. I guess I am a computer killer 🙂
- The file name of my final project is “tough mockingbird” (given by p5 js), me texting my friends belike: ohh look p5 js tells me be tough and dont breakdown ಥ_ಥ
Leave a Reply