October 7, 2017No Comments

ICM: Collaboration

Turn on the volume, and move your mouse while it's pressed.



During the collaboration process, Jiyao was interested in involving sound effect and successfully merged it to the visual setup I previously created. Moreover, she added further effect of speeding up and filling the shapes if the mouse is pressed. The original layout was only made out of strokes, which made it harder for me to play with filling function, but Jiyao transferred them to surface via beginShape and endShape function - ultimately allowing the visual elements to be more dynamic.



October 2, 2017No Comments



Collaboration with Jiyao: in process

September 25, 2017No Comments

UTC Timezone_1

  1. One element controlled by the mouse is the value of blue - where the mouse locates has the highest value of blue.
  2. An element that changes over time is the value of red - it increases.
  3. One element that is different every time you run the sketch is the value of red and blue in stroke - their values are random.

2 and 3 are more visible if the page gets refreshed:

The visual decisions were made based on one of my old projects.

In next assignment I would like to figure out how can I organize my work with less hard-coded numbers. I've done some trials, but it wasn't enough (at all) to shorten or simplify this long code.



Step 1 - https://alpha.editor.p5js.org/full/H1KXOJ7iW

Step 2 - http://alpha.editor.p5js.org/full/r1F-yO4oZ

Step 3 - http://alpha.editor.p5js.org/full/HJ8zIuVsW

Step 4 - http://alpha.editor.p5js.org/full/Bk8X_uVs-

Step 5 - http://alpha.editor.p5js.org/full/Skvjr9EsW

Step 6 - http://alpha.editor.p5js.org/full/rkqWkhHi-


September 18, 2017No Comments

Self-Portrait, Alien, or Monster

The biggest mistake I made for this project is not saving adequate amount of sketches. I've learned that in this kind of web editor environment, it's convenient and quick to make changes but also easy to lose older versions and documentation.
The upper image is the same drawing with black stroke and noFill, which is intentionally created to show the structure. While I was building it I actually worked in this appearance because the overlapping part and location seem clear in this setting. The difficult part was making the arm, because neither using primary shape function nor beginShape function was suitable for creating one piece of rounded arm. If I documented the previous code, it will be apparent that I tried beginShape function to draw simpler arm and giving it up by combining two rectangles in order to have rounded corner.

My undergraduate years majoring in Graphic Design allowed me to encounter diverse range of works by great producers and designers. Their aesthetic and medium choices don't always align together and rather vary, but I've realized that the common point that made me attracted to their works is the visualization created by data mapping. Few of my favorite projects (link 1, link 2) I've done during college years also correlates to mapping, and I would love to make more works like this involving new lessons and skills from different classes in ITP.