ICM BLOG
BLOG 1: How computation applies to my interests
I was always interested in interactive development. When I first got to know the webpage, I only got the information, and there was not much interaction between me and the webpage in this way. When I first used the mouse to interact with webpage pictures, I was surprised by this form of interaction.
As time goes by, people have been in contact with electronic products for more and more time, especially in this pandemic. Many people who are not familiar with new electronic products are forced to use and become familiar with that.
As a front-end developer, I hope to learn more interactive knowledge, help me develop more effective interactive methods, improve people’s experience of using electronic products, and help people use electronic products more efficiently. To this end, I am learning about computational media related knowledge will be crucial.
At the end of this semester, I hope that I can develop a website similar to: http://species-in-pieces.com/. I think this is an excellent example of helping people get information effectively. At the same time, the exciting way of interaction also attracted more people to learn more.
The first tool I came into contact with within this class is p5.js. As a newbie who just started using the tool, I was troubled by its grammar and particular words. Fortunately, I got the answers to my questions through The Coding Train’s video and p5 reference.
Although there are difficulties with me, I am also amazed by the convenience of the p5 editor. This is the first time I can start writing code without wasting a lot of time setting up an environment and downloading relevant files. And its fast execution and convenient modification features helped me fall in love with this course more quickly.
And I also decided to take my favorite animal as the work of my first homework and express it in the form of comics.
BLOG 2: Make things move
Since I had a basic understanding of p5.js last week, I have used p5 to draw pictures I am interested in. And in the new week, I will learn how to make some basic graphics move with the regular patterns.
The first exercise I made was to make one element that changes over time, independently of the mouse. And I chose to use a simple definition of X, and let the circular x-axis loop along with x+1 make it in visual effect of movement.
Next, I tried to make one element controlled by the mouse, and it changed as the mouse position changed. Fortunately, p5.js has defined mouse events. So I only need to define mouseX and mouseY in the coordinate system of the graphics I want. I can create the effect of the circle following the mouse.
Finally, I try to make one element that is different every time I run the sketch. And I use the random() function to automatically get the x-axis and y-axis from 0 to max-width and max-length. In this way, different circles will randomly appear on the screen every time it runs (I know it looks disgusting now, I believe I can make it more beautiful in the future).
BLOG 3: Conditionals
For this homework, I decided to make a button, and this button can be linked with the light so that the light can only be turned on after it is clicked.
When I started to create an algorithmic design with simple parameters, I remembered the line motion formula I learned in the original math class. I thought it was an excellent opportunity to make it move, and the result made me very excited. It is full of mathematical beauty.
To make it easier for my team to use the ‘items’ I’ve coded, I categorize each code for the convenience of teammates.
BLOG 4: Repetition with loops
My goal this week is to create an interactive artwork that implements the concept of repetition with variation. Use at least one for the loop. I plan to distribute different lines on the canvas in a random pattern and make their colors also random. And here is what that comes.
It looks pretty good, but it will make people dizzy after watching it for a long time, so I use noLoop() to stop it so that it can generate a random picture composed of lines.
Now it doesn’t look so dizzy anymore. Next, I hope it can randomly generate colors from only five colors according to my requirements.
I put the five colors I want in a set, and use random (set name) to make it only randomly select colors from my set. Now it looks perfect.
BLOG 5 Functions and Returns
This week I learned and used functions, which allowed me to break code out of setup() and draw() into functions and use a function to draw a complex design multiple times with different arguments.
I first defined the graphics I wanted to draw with a brand new function and wrote the name of the brand new function into the draw. This way can help me better modularize my code, make them more unified and easy to watch. Next, I will use the return function to help my pictures become more interesting.
I used the return function to calculate the size of my heart picture. The algorithm will increase with every click. Thanks to the help of return, my code becomes easier to watch and modify.
BLOG 6 Objects and arrays
This week I need to create a sketch that takes advantage of my new skills. The sketch should allow the user to use clicks, keypresses, etc. to add new elements to the scene (and potentially to remove them later). My sketch should use an array of objects.
I decided to continue to use the heart from last week, the difference is that I will use ‘class’ syntax to separate it for viewing, and add a beating animation effect. Not only that, I also added the function of double-clicking to show new heart as required, and the single-clicking disappears.
Project 1: Media Manipulation
I have been assigned to make a project that manipulates images or video on the pixel level, like a pixel-level mirror or special effect media.
However, a lot of people have done many exciting works before. Compared to doing cookie-cutter jobs in over-saturated works, I hope to make a brand new concept through my creativity.
So this time, I want to combine pixel-level media to make a game similar to a jigsaw puzzle, but the exciting thing is that it will connect Sokoban and camera functions simultaneously. Let users be surprised and fun in these simple puzzles.
I decided to use this opportunity to try p5.play and combine it with p5.js.
In the beginning, I learned to use p5.play to create spirits and create collision relationships. It makes this look like a game.
Then I tried to use p5.js to turn on the camera to accept real-time photos of users to increase the diversity and interest of the jigsaw puzzle.
Finally, I combined these two concepts to create a jigsaw puzzle game based on the user’s real-time photos, but the difference is that the player needs to push the puzzle through the arrow keys.
Project 2: Sound Sketch
After finishing the media of project1, I will make a sound-related project next. In this project, I will sequence, synthesize, or analyzes sound.
And I made an interactive doll that allows users to open and close the monophonic sound by clicking on the doll’s mouth, and users can also generate drum sounds by clicking any key on the keyboard.
Final Project: Text Generation Windmill
In the final project, we have no restrictions and requirements. On the contrary, we freely use the content learned this semester to make a project. So I decided to use all the knowledge I learned this semester.
I first used my knowledge in the media section to create a sun that can project real-time photos onto the picture and rotate it.
Then I used the knowledge I learned in the sound part, but this time the difference is that I chose to use the input audio and the size of the user’s blow to determine the object’s speed.
Finally, I used RiTa.js to generate the text. Although now I select words randomly, I can change the text content according to my preferences to generate the text I like (for example, randomly select the words form lyrics of Bohemian Rhapsody).
And I added animation effects to them so that they don’t cover the entire screen and confuse users.
In the end, I combined them all. The user blows against the screen, and the windmill will rotate according to the force. As the windmill turns faster and faster, random words will be ‘blown out.’
