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)

My Own Language (Final Project)

Screen Shot 2562-05-10 at 11.50.49.png

Performance Slides:

https://docs.google.com/presentation/d/e/2PACX-1vTUI1cbJfTLX_dZ8rv0qEeszYrbp6k5-FL9klGtwSCaS2sUKTrWkGuGkKzVZ3adlaE0FfRZ8JY-QZD6/pub?start=false&loop=false&delayms=3000

The concept:

I began this project by trying to find the intersection of (i) my tension with language and (ii) the unique properties of electronic text.

My tension with language:

  • The difficulty in communicating my feelings with words
  • The difficulty in describing and perceiving sensorial information with words (Sissel Tolaas, a scent artist and researcher, has the same theory and has invented a fictional language for smells in this ongoing project ’NASALO’, an alphabet for the nose. https://www.researchcatalogue.net/view/7344/7350)

The unique properties of electronic text:

  • The ability to process large amounts of data:
    • look up pronunciation
    • look up similar words (word vectors)
    • predict texts
  • The ability to randomise and produce unexpected outcomes

With this thought and with the interest of time and ability to collect a legitimate corpus, I decided to go with my first tension, ‘the difficulty in communicating my feelings with words’.

I often find myself talking to myself/my partner in My Own Language. At the beginning it sounded silly and gibberish to say it out loud, but because it is for the sake of emotional expression, it soon felt very expressive and satisfying to be able to channel out the emotions sonically.

However, there is still a great comparison between My Own Language and what I express to others outside of my relationship. This made me wonder if I could somehow lead people into My Own Language to understand what is going on internally.

The process:

  1. I recorded myself talking in My Own Language during various emotional encounters and transcribed the recordings into text corpuses
    HUNST YUNST RUNST RAR TARAK NASAPASAK TAKST KRASK HASK HUSK TUSK MUSK HAFUSK PASUSK PARARUSK HAFARUSK PASUSK PASSUK PASSK HASSK PHASASSK HAMUSK HUSK YUCK YUK HUCK HUSK HAASK TAASCK PHASHASSCK HASA PASASSKA SAWASSKA HATAAKA PASIMAKA TUTCHKA PHALASKA RARKKKK PHASKKKK
  2. I analysed the corpuses to find patterns and repetitions in the characters
    [(('P', 'A', 'S', 'A'), 17),
     ((' ', 'P', 'A', 'S'), 17),
     (('K', ' ', 'P', 'A'), 12),
     (('N', 'S', 'T', ' '), 12),
     (('U', 'N', 'S', 'T'), 11),
     (('A', 'K', 'U', 'K'), 11),
     (('K', 'U', 'K', ' '), 11),
     (('U', 'S', 'K', ' '), 11),
     (('K', ' ', 'H', 'A'), 10),
     (('A', 'T', 'A', 'K'), 10),]
  3. I took the most common set of characters and translated those into pronunciation
    pasa = pronouncing.search("P AH0 S AH0")
    unst = pronouncing.search("AH0 N S T")
    atak = pronouncing.search("T AH1 K")
    akuk = pronouncing.search("K AH1 K")
    phas = pronouncing.search("F AH0 S")
  4. I looked up words with the same pronunciation and manually excluded those which are too ‘far off’ from My Own Language
  5. I compared those words with what I end up expressing

The raw output:

Panic

GKKKKK HUNST HAFATATATATATAK G SAH PHAAAAAAA HUNST PHASASSK PSHGK PASUSK SAFASHAFA PASA PASSK PHSAKUK REDIT KAPASHTATUK YUCK TANST MAWALAH FOSE


PASAHUNST PASATUK
KUNST HUNST
PASASHKAMAQAFASAMATAK NAFASHAPASATAK
PAKUK STAAKAKUK
PHASAKUK PHASASSK


UNSTABLE KUCK CONSTRAINED EMPHASIZED UNBALANCED CUCKOO STUCK CONFISCATED


FRUSTRATED STUCK PANIC


PANIC

Bubbly

YAHI RADIDIDOO BARINI WAROO SAAKALAHEE MI II WARAWI YIHAH BASHIBI HOOWASHASHASHOHI WAREE YAKINI PADI DADADIDOODI HAANY DEE SI BODABEE LAWRINI


SHASHI SHASHI
HASHIBII HASHI
PADEE RADEE
SHASHI SHASHI
SHAKADIDI RADIDO


BLOODY ADID WASHY SQUASHY MOTOHASHI MUDDY MUDDIED SHUSTER


BUBBLY HAPPY SMILEY


BUBBLY

Hollow

MAROON PHUL HAAZAR PARAUWA PHUL QUIET PUAW ROAM LAURAHAUW PASHEE ROME SAPHEYE TAZARA ZAHARAH WROOH NOO NOSSE WARAHARAU HAUWA FAAAAAAA


RARAH RAZARAH
PARAUW PARAUWA
RAZAPA RAZAR
HASSOON MOONSOON
HAAZAR SHAZAR


WOUNDED COCOON POSTOPERATIVE CITIZEN REPRESENTATIONAL PREOPERATIVE BRUUN REPRESENTATIONS


FRAGILE HOLLOW LOST


HOLLOW

 

The final layout:

  • I decided to create a funnel-like aesthetic to illustrate the funnelling of my emotional experience to my actual expression
  • I reorganised my original output which separates My Own Language with existing words to alternate the words in order to highlight the similarity in pronunciation (suggested by Allison)

Screen Shot 2562-05-10 at 11.43.27.png

Screen Shot 2562-05-10 at 11.43.36.png

Screen Shot 2562-05-10 at 11.43.44.png

To be improved / studied further:

Last notes: 

In this project I hope to draw the readers / audience closer to my feelings, and in the long run I hope to create a piece which lies on the thin line of being gibberish and expressive – which has been a theme for all my work (blending the noise and the tangibles).

The corpuses, codes and presentation slides can be found here: https://github.com/hellonun/my-own-language 

 

Lighting Moment #11

View this post on Instagram

#lightandinteractivity #itp . Charoen Krung, Bangkok Sunday, April 15, 16.37 . This is a photo of CAT Telecom building taken from Icon Siam (the building on the opposite side of the river) facing east. The CAT building is curved and therefore acts as a convex surface. Here the reflections are more stretched on the right side in relative to the left. Because the building’s surface/windows are in a grid form, the reflections appear pixelated and almost animated. The lower part of the reflections on the building (the river) appears as if it is an extension of the river itself. This is because the reflective surface is so close to the water. When looking at the water itself, the left part (of the photo) appears darker because of the shadow of the building on the opposite side. . This photo is taken by @chaooocha – inspired by the class’s lighting moments assignment.

A post shared by Nuntinee T (@nun.tinee) on