ICM #1 Sep 12 2021



How computation applies to my interests?

The first time I laid my fingers on computation was during primary school where we learned to write command lines in old PCs to control a turtle-shaped coordinator to draw lines on the screen. Ten years later, I re-encountered this practice when learning about Lauren Lee McCarthy’s work involving the mutual tracing with strangers (especially with the pre-knowledge of Sophie Calle’s semi-performative piece of following a stranger). The gap in between surprised me as their sharing base of computation itched my mind ---- the sense of self, in both sense of corporeality and intangible representation, melts its shape and diffuses into the broader unknown across time and space, where all the familiarities fade into uncanniess while all the new encounters feel like nostalgic. Thus self-stranger co-relation via intangible contacts deeply intrigues me, while computer ---- being a constantly updating stranger itself ---- holds the bridge in between, and computation feels like a language of strangers, to strangers, and for strangers. 

Another project I love that simplistically yet dramatically tickles your virtual sense of self: pointerpointer.com



With a little pre-existing experience with p5js, I began with a brief idea of having some mouse-triggered interactions in my self-portrait. 

I want my portrait to be an abstract image of on/off screen relationship, rather than a realistic representation of my face, so I planned to draw a pair of eyes with their attention on the cursor, and another browser window (within the real one) placed under the eyes.



  • Layout: on CENTER mode of ellipse, two eyes are symmetrically placed on ¼ and ¾ windowWidth, ¼ windowHeight, with 150px in width and 80px in height.

  • Layering order (bottom up): white eye-shape base - colored iris - black pupil - translucent glare

Among the layers, mouse-movement-oriented variables are applied to pupils and glares.


//browser window 

  • Layout: two narrow grey bars are horizontally put together, start from the ½ windowHeight and go across the entire windowWidth, with a 80px height.

  • Layering order: dark grey bar (80px height) - light grey bar (40px height, overlaid) - details (not overlaid)

The three points representing “close”, “minimize”, and “expand” are a little tricky to calculate to regulate on the grey bar. Using point(), I set the strokeWeight(14), and the x-axis variable as 20px. However, when I tried to set the y-axis variable to “windowHeight/2+[dark bar height - light bar height + point strokeWeight]/2” to align the center of the point stay in the middle height of the exposed dark bar, the point appeared lower than I expected. 


//red point looks a bit off from the middle height


Then I realized that if I want to make the point visually appear in the center, I have to make the upper and lower negative space equal; yet I only include the upper part in the previous consideration. Since the coordination of the point is centered, I don’t actually need to include the  radius of the point into my calculation.

Another part that took some time is the little arrow/triangle attached to the “reload” symbol… I was almost going to give up on this one but then I found that the triangle actually has a perpendicular angle aligned on the screen so there’s not much pythagorean calculation to do.


Screen Shot 2021-09-12 at 12.14.01 PM.png
Screen Shot 2021-09-12 at 11.01.50 AM.png

However I was confused by the arc() argument, though the reference is clear in the “clockwise” direction by default, the “start&stop” variables are confusing, and my experiment indicates that the system is neither clock section (1-12 or 0) nor 360 degrees.

Screen Shot 2021-09-12 at 1.04.10 PM.png
Screen Shot 2021-09-12 at 1.03.55 PM.png
Screen Shot 2021-09-12 at 1.11.20 PM.png

After several random attempts based on my interpretation of the reference that 0 degree starts from 3 o’clock and goes clockwise, I managed to get the ideal arc, and the logic of arc() seems much clearer now.

vesper guo

Share the amazing things customers are saying about your business. Double click, or click Edit Text to make it yours.