THE MOUSE (MIDTERM)

The idea: WHAT DOES IT MEAN TO BE A ‘MOUSE’?

Let’s assume our bodies, made up mostly out of water, are flattened, digitized and resized into a few black and white pixels a.k.a. a mouse.

Our movements and expressions, walking, turning around, nodding, smiling become clicking, double clicking, right clicking, sliding, scrolling, scrolling and scrolling…

1.png

WE ARE ONLY SEEN AS XY COORDINATES NOW

Most of the time we spend on the screen, we’re being perceived as two numbers which define our position in the space, our presence is just a few pixels in this enormous screen space

2.png

WE ALL LOOK THE SAME

We are pointers of different variations. Our actions are guided by how our bodies interact with the environment; that moment when a mouse turns into a finger suggesting that we click, or the rainbow wheel of death telling us to slow down

3.png

WE THINK WE’RE ALONE

Have you ever seen more than one mouse on a screen? We only see ourselves; although a million of us could be on the same webpage at the same time. Are we really alone?

4.png 

WE’RE ACTUALLY MORE EXPRESSIVE

We don’t feel as awkward about addressing uncomfortable questions, even when we’re sitting in the same physical space and sharing the same digital environment

So… what does it REALLY mean for us to be mice? And how can we design a more exciting web experience around it? (Also, doesn’t it sound funny, that instead of ‘a mouse’ we’re mice?)

Inspiration: http://donottouch.org/ 

Code: https://github.com/hellonun/liveweb/tree/master/getting%20to%20know%20the%20mouse

*insert video*

HTML Portrait / Synchronous Web

Assignment

  • Using HTML5’s video or audio tags along with JavaScript, create an interactive self portrait. Link to it on your blog.
  • Find a live or synchronous site or platform online. Try it out. Describe it on your blog. How is it used? What do you find interesting about it? Come to class prepared to discuss.

To familiarize myself with HTML and Javascript, I decided to visit the webite https://www.w3schools.com/html/default.asp and tried to incorporate as many features as possible. The results can be found in this HTML file:

https://github.com/hellonun/liveweb

A chat app feature “typing”/”read”. – Facebook messenger or Line messenger. https://line.me/en/

We discussed in class that asynchronous web has the ability to join the worlds of two ends. This is especially true for me as I now live far from home. Chat apps are the main platforms for my family / my friends and I to communicate. I once typed something and hesitated to send. My friend asked “What were you just typing?” in hope to draw out my spontaneous reaction to the topic being discussed. Asynchronous platforms allow us to experience the reaction of another person in real time which brings down the wall / closes the space between us. Things are less filtered, less crafted, more spontaneous, more authentic (not good or bad, just different).

An additional site: I’m not sure whether this is a synchronous web but I find the interaction here very interesting: https://luminghao.com/

This is a portfolio website of my ITP classmate Luming. Once landed on the page, the site unfolds itself with a text shuffling animation. It lists all the projects and mousing over each one creates an underline which suggests it’s a link. Once the link is clicked, the page plays a sound and loads the project. The sound is different for each project and acts as if it is launching something (similar to when a wrestler launches himself on stage). Each project then appears on the page, some interactive, some links to soundcloud, some to chat bots. The title of the pages keeps alternating between projects making it feel live.

I appreciate the simplicity and directness of the web. While visually it is mainly a bunch of texts, the sound and animation make the site very playful and enjoyable to browse. There’s a element of surprise in every click – as if you’re unfolding something, finding something, putting it back.

Shadow Through Time (Final Project)

Although we are influenced by the light environment we experience everyday, we rarely take a close look at the nuances in those lighting moments.

Shadow through time is a 24-hour light fixture which highlights the change in shadow compositions through time.

The square shaped fixture contains four moving elastic bands lined up horizontally and four light sources in four corners. The light sources are mapped according to the direction of sunlight throughout the day. The  elastic bands act as as a clock rotating 180 degrees in 12 hours and back.

02

03

04

05

Inside the piece:

06

07

08

09

10

11

Process (after prototyping):

  • Cut acrylic according to designed shapes
  • Wire the motors
  • Solder and wire the lights
  • Place strings on motors
  • Put everything together
  • Close the top with white acrylic sheet

Parts:

Schematic references:

Code and illustrator files: 

https://github.com/hellonun/shadowthroughtime
(code to be updated with RTC and sunrise/sunset API)