Link：https://editor.p5js.org/Lisa-HuangZijin/sketches/zJVAPAfXN
For public readers:
FIND YOUR VOICE: BREAK THE LIMIT
An Interactive Project Allows You to Express Yourself in Your Own Way
Creativity, Identity, Geometry, Dimensions
“Find your voice” is an interactive project allows you to express your identity through colorful geometric shapes. The twenty-first century is a roaring age. With all the highly sophisticated technology spewing forth. While most people indulging in the embrace of advanced technology, there are others clamoring that electric devices have occupied that last piece of “clean land” in people’s lives. This innovative computer-based project strikes a balance between technology and the so-called “clean land”, providing a platform for free expression and creative display.
In a world where true utopia may be unattainable, what if we could find it in the digital realm?
Identity holds great importance to us because it’s challenging to express it through pure technology. We value the unique qualities that make us who we are and strive to express them both online and offline. This project provides an opportunity to bring our offline selves to life online. By using mouse to drag different geometric shapes, users are able to create patterns just for themselves. With just a few clicks of a mouse, users can drag and manipulate geometric shapes to create personalized patterns that simulate 3D effects or design flat pictures using 2D canvas and color overlap. You just need to keep one thing in mind: you are the owner of this painting and everything is under your control! Even though the geometric shapes are limited in this 2D canvas, your creativity and imaginative is infinite and can add more dimensions to it!
This time, it’s your turn to control the mouse, to be the master of your own creation.
For myself and my instructor
- Inspiration and Changes
After the field trip, I decided that I need to play with the overlap space. So, at first, the main character in my project are those overlaps instead of different shapes. However, when I searched for help online, I find it is okay for the static images, however, for the moving ones, it is hard to set the range of the overlaps. Thus, I changed the direction.
I’ve mentioned that the use of lights in different angles and shadows in the exhibition was my inspiration. Although the shadow is projected onto the plane, due to the different lights from multiple angles, different angles of the shadow have an overlap, and due to the distance of the light, the sharpness of the shadow also changes. These make the shadow on the plane has a three-dimensional sense. In other words, the superposition of this other information enriches the two-dimensional objects that people can perceive, they themselves create another dimension for the pattern, adding more colors to it.
- Process: Design and Composition
To allow the sense of three dimensions to appear on the 2D canvas, I consider isometric art. The same idea can also be found in my previous work. To better the sense, I tried various angles and finally decided on 30 and 60 degrees. And here I figured out why I delete the constraints I used to set in version one. I do not want it to belong to any 2D or 3D artwork. On the canvas, the shapes can freely go through each other and stop anywhere, even though there is no physical support. When you think of Lego, you think of 3D blocks, and when you think of Tetris, you think of 2D games. They all share constraints. With constrains, it is hard to blur the boundaries between 2D and 3D. But there for sure are other kinds of constraints I can apply without giving up the idea I like! I still really appreciate that!
At the start, I put all of them in the center to make it more focused, and there is no deliberate design. I just choose a way to place them following my heart, as if I am the first player of this little project. For me, the design part went much better and smoother than the programming part.
- Process: Technical
a. Try to apply the drag effect on one object
I first learned it online and find its code was kind of complex, then I turned moon for help during the meeting and simplified the code. Anyway, it kicked off a bumpy journey of programming for me.
b. To create different geometric shapes and personalize the range they can be detected within one class
Moon should know how I conquered this problem. I use “-1” “0” and “1” to indicate different directions and tilt to the left or right. And because I used a very complicated formula to draw the irregular shape, I set difficulties for myself to set the range. Finally, I decided to use the distance function to set the range. The only obstacle is finding the center of the shape using mathematical formulas with the translation function. By the way, because I applied translation more than once, it is important to figure out where it is applied and its order when it runs.
c. To allow the mouse drag only one element at one time
It was surprising to find that behind every problem that gets solved, there’s moon’s guiding hand. Again, I turned moon for help. In the process, I learned how to use the condition “if” to help me check the state of what I want. And it is connected to the solution to the fifth difficulty. Meanwhile, I also learned “mousePressed()” “mouseDragged()” and mouseReleased()”, three functions that are stored in p5js.
d. To create a reset button
First I’m wondering how can I send each pattern to their original places since I give them different parameters and this.x and this.y have already be changed during drugging. After asking Sonny, I find I can simply splice all the shapes out of the array and then construct another array each time I press this button with the original parameters. This allows me to have a better understanding of the “splice”.
e. To let them flow
Besides the problem about parameter I’ve talked about, there’s another problem that gets in my way. I want to keep them flowing when keeping press ENTER, and once I released the key, the flowing stop. This is different from when the key is pressed once, the objects keep flowing even though the key is released. (Maybe that’s why mouseIsPressed is different from mousePressed? I don’t know haha~) So I use keyPressed() and keyReleased() to change the state of flowing, just following what moon has done with the problem.c. One more point! I let the speed decreased gradually so it will looks more natural and I like the effect that I will withdraw a little bit!
- Reflection and Future Development
First of all, I really appreciate what Samantha said about making all functions based on the mouse and keeping the butterfly in the same style as the button or removing it. Because even for the button, I struggled a lot to keep it in the same style as the whole elements. (Though I did spend some time drawing the butterfly TT)
I also appreciate what Marcele said about constraints, although I shared some different opinions in the design and composition part.
Yeah, it is important to consider its potential as moon said, and Pacey also told me that it can be used as a foundation in many fields. So here are a few directions I consider till now regarding how it could be developed.
- To create tasks for the users when dragging different shapes. Make it a puzzle.
- Like the previous assignment I had, create some visual illusion. Like Monument Valley, by changing the angles, the objects tend to have different appearance. But in this way, I need to remove the transparency.
- Maybe give them real volume so that they can interact with each other?
- More interaction between two objects, like magnetic sheet, they need to build upon each other.
- Thank you for all of you!!!
It was the first time I experienced user testing and all the suggestions my classmates provided were great! They did help me a lot! It’s great to keep working with you guys all!
Thanks a lot for Rachel’s spiritual support! We stayed up late together and texted to each other when working on this midterm project! She let me feel that I was not alone!
Last but not least, great thanks to professor moon! I feel terribly sorry when I received moon’s wonderful code in the midnight because refining my code seems to disturb his rest. I also feel terribly sorry when we had to conduct a meeting on weekend evenings. I was so touched when I saw our professor kept working in the weekends.
Again, thank you so much! I had a wonderful experience for CCLab this semester!