Project B. 04 Reflection

project title: love with nowhere to go

‘love with nowhere to go’ is a digital interactive story/diary that is one part my personal messages to my extended family in beijing–those who are with me and those who have passed, and one part my recollections of their lives and what i wish to share about them.  the goal is to create a space where I can address things that I have left unsaid due to barriers in language, physical distance, and generation, and touch on my experience as part of the Chinese diaspora in general.

 

1) Process: Design and Composition

I ended up pursuing one of my ideas from when I first started brainstorming for Project B over spring break, which was to make my website something personal/important to me. Here was my working idea:

I felt that having the content of the website be something important to me would help with feeling like the project is workable and interesting. My main inspiration was “Pinepoint” by Paul Shoebridge and Michael Simons, which is an interactive documentary website that is also an example of the authors’ personal narratives. It is a recollection and pays homage to their hometown and the family and friends in it utilizing collaged photos, text, video, etc.  Here is something I tried to keep in mind as I kept working: 

My initial visualization in mind was a kind of map with pinpoints/landmarks that you could drag around and explore, but I wasn’t sure how to approach making this. I first started mapping out on a doc what I wanted to do: including the website structure, user interactions, and components. I knew that I would be incorporating a lot of multimedia. I wanted to make something similarly content-driven like ‘Pinepoint.’ ‘Pinepoint’ features a digital photo album/journal that the user can flip through to continue the narrative and learn about people special to the authors. I decided to have separate pages dedicated to my family members too. I first decided who I wanted to showcase on the website.

mom’s family tree
dad’s family tree

next I would start to write about them while also building the structure for the website. my website uses similar structure and user navigation as ‘Pinepoint,’ except the stories are centered in one narrative hub that the user can navigate back to and between stories.

‘pinepoint’ digital photo album
a page inside ‘pinepoint’

below is the homepage: each label is a link that you can click on to reach either the page for my mom’s side of the family, my dad’s, or for extra features.

narrative homepage

 

mom’s family page

 

From the initial index.html landing page, my website has a similar start to  ‘Pinepoint.’ I drew visual inspiration from it while also trying to incorporate visuals that would nod to Chinese culture as well as the role of the web and the digital world in staying connected.

For the landing page I tried to use random walker to make a simple visual like a red thread.

landing page

I tried to incorporate some variety by adding different functionalities and user navigation/interaction.

scroll to reveal more photos and text
the idea of connection when you can’t be physically with someone

 

2) Process: Technical 

 

I started out mapping the structure, how many pages I wanted, and what I wanted each page to be. While this helped in making things feel more manageable and remembering exactly what to do, I probably would not appproach it this way again as the amount of pages became unmanageable and I did not develop a way to reorder or change content in a flexible way.

 

Moon helped me get started with the code by creating boxes that I could organize my content within. 

the template provided

 

My website has more than 20 pages, and user navigation works by clicking on direct links or links that are attached to an image. 

link and image

here is a section I couldn’t get to work, I wanted to have a popup image or video in one of these CDs. The furthest I got was getting the popupo window when you clicked on only this cd, but I had issue getting the image to show up

page 8

here’s the code behind the digital camera page 

html
javascript

 

3) Reflection and Future Development

 

I am not satisfied with this project–it is incomplete. I struggled again with time management and a little burnout towards the end of the semester. I was satisfied and motivated to see that the basic structure of building the website came easily to me even though I expected it to be difficult. 

I still struggle with overall good coding practices and structuring the code, especially with naming consistency and readability. I think the code I have is really a mess. 

I also ran into a huge issue last minute with the pages and how they linked to each other–I preplanned all the pages by making them all more or less, and when I ended up deciding to omit some of the pages in between, I just ended up manually moving the content around which was extremely confusing.

However I agree that I didn’t really explore the criteria expected for Project B and that I need to move beyond just incorporating multimedia + externally used images to coding more of my own content instead. 

Another thing to note is thoughtful design in order to maintain a cohesive theme from conceptualization to creation. I think I could’ve considered feasability of this many pages as well as user friendliness.

  •  

Other elements I wanted to include but did not get to were sound, a “video call” section/simulation using webcam, handwriting, and soundbites and text messages. For example, this use of webcam from yehwan song

“Openstudio Interactive Poster” by Yehwan Song

4) Credits & References

conceptual inspirations

  • ‘Pinepoint’ (2011) by Paul Shoebridge and Michael Simons, link here
  • CCLab project by Ambra, link here
  • ‘This Side of Rice’ by Jenny Zhang, link here

visual inspirations

tutorials/references

  • random walker by kevin workman at happycoding, link here
  • Color palette on some pages from Nana, link here 

project links:

 

Artistic Research Inspiration #2: Yehwan Song

Yehwan Song’s Work

 

What is Net Art?

“the term ‘net.art’ is less a coinage than an accident” (art forum)

(inter)net art refers to work that emerged in the 1990s through 2000s that explores the Internet as a new medium of expression. It can look like a collection of images, hyperlinks, text,  sounds, etc. This is often interactive and part of a discourse with other works and users. One thing that stuck out to me was how both Art Forum and Net Specific emphasized its inclusivity: the internet as a repose for anyone and everyone. Fakewhale, a media blog, gave more insight into this: net art was a response to a cultural crisis that followed global shifts, like the fall of the USSR and Berlin Wall. “The artists involved grappled with the portrayal of democracy as a capitalist illusion,” and they viewed the internet as something that is supposedly the epitome of democratic equality, but also something that is easily manipulated by commercial interests, producing a web experience that can be highly manufactured and commercialized. This social awareness and reflection has remained central to net art for lots of artists.

 

Introduction

Artist background

Yehwan Song is a Korean graphic designer, web designer, and web developer. She has lived and worked in both Seoul and New York, but is currently based in NYC.

her work: she designs and develops experimental websites, interactive graphics, physical x digital art, all centered in internet spaces.

her interest: “flipping the general understanding of web design and playing with visual tricks” (girls club).

 

Work Overview

What are its visual, technical, and material features? Any forms of interaction?

Taking a look at her website shows that net art doesn’t have to exist just on the web. She designs web interfaces, interactive posters, but also tangible art like sculptures. She strives to create new interactions for users, for example, performances. Below are some selected works.

 

WEBSITES/”narrative architecture”

“cascading spiral”

screenshot
screenshot

for cascading spiral, Song created her idea of an “internet of villages.” the graphic is a radial design “inspired by spiders’ webs and meteorological charts” that is like a living organism. it refreshed itself daily over the 2 months of the art exhibition and invited the users to explore the narrative.

“esh museum”


 

esh museum is a website built for mobile devices. I really liked this design as you got to travel through a graphic design rendition of the halls of the museum by tapping, and included were photos of the real  museum space.

 

PHYSICAL x DIGITAL

“aquarium”

materials are 2 iPads and a webcam. touching the screen on the top iPad is like dipping your finger into a real fish tank.

“cracked eggs”

 

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

 

A post shared by Yehwan Song 송예환 (@yehwan.yen.song)

 

(Might need to open the Instagram link to see the video).  This is really unconventional but pretty cool- it involves a website that receives inputs from raw eggs dropped on the screen, which renders art.

“fountain sculpture”

This is a similar concept to cracked eggs–the screen responds to water being poured on it, which renders water droplets.

“the way we touch each other in 2020”

this is another project created for mobile devices and relying on fingers tapping/holding the screen. I assume this emerge during the pandemic:)

 

 

INTERACTIVE POSTERS

“Xd workshop poster for team Thursday”

 

“List Of people who died on the toilet”

Yehwan does other graphic design as well! Here are two interactive posters.

 

OTHER WEB DESIGN

“blue type wrap up week”

This design incorporates simple typography  and a minimal blue color palette. I really like that you can unfurl the ribbon/banner by enlarging or minimizing the page.

“Samsara Market”

samsara market is a 360 degree website with an interactive panoramic image of the market. I really like how  specific people/stands/goods are highlighted with sketches or photos, which you can click on for more details 

“today I walked”

today I walked simulates walking down a street if you “walk” two fingers down the keyboard.

“scroll moving”

I really like the graphic design driven nature of this work! I think it reflects what Yehwan said in this article, which describes how she has come to forge together her background in coding and fundamentals graphic design basics. I like the concept of not necessarily scrolling just to get somewhere, but scrolling to see the product you create as you go along. 

“mt everest scroll bar’

 

 

HIGHLIGHTED SERIES: “anti-user”

“speak don’t speak”

“cry don’t cry”

I wanted to highlight her “anti-user friendly” series, which explores new interactions between devices and websites. 

 

 

What is the process by which the work is created, emerges, or evolves?

Yehwan builds web spaces using html, css, and javascript. Some of the work evolves on its own over time thanks to generative elements. She also intertwines online and physical spaces and navigates the area in between. For example, she makes sculptures or physical installations that visualize online spaces, and online spaces that are informed by physical inputs. 

As for the meaning, I think it really comes out of user interaction. 

 

What are the artist’s intentions, views, background, methods, and inspirations?

Key words for her work: non-user centric (“anti user friendly”). unconventional. diversity over consistency. variety over efficiency.

Yehwan has reiterated her goal and intentions in many places: “I want to change the way people use websites. I also want to change the web design industry, which is currently highly mass-produced by large companies. I want my independent design practices to change the way people think about websites, and also let them know that websites can be created by individuals..” (girlsclub)

      •  

 

 

Discussion

How is this topic connected to CCLab and what we learned about net art in the reading? Consider the technological, political, social, geographical context. What’s the significance of the work? What do you interpret to be its intention/message? What impact does/doesn’t it have?

I think Yehwan and her work truly represents everything we’ve read about net art and its characteristics and motivations. She approaches her art with a critical eye.

Her critiques of the web that I identified: 

  • the web proclaims to be inclusive, but it often isn’t.
  • corporations are too focused on efficiency, which results in uniform design that stifles creativity
  • she picks apart the “utopia” described in the reading to argue that it masks insecurity and discomfort
  • this discomfort stems from placing all users in a monolith and overgeneralizing their behavior
    • user experience depends on their background. for ex. some face censorship and a lack of legitimate online rights

how this manifests in her work:

  • creates content forward, unconventional websites over conventional, static templates 
  • work is responsive to the user instead of making the same experience for everyone

One project that I think hits all the points is “(whose) world, (how) wide web” (2024). The installation includes a large keyboard with the English and Korean alphabet, which points to the Korean internet space. She points out loopholes in Korean internet laws, as well as the need for users to constantly switch between language settings to navigate an English-dominated web. 

She has been explicitly forward about some of these critiques, especially the influence of corporations. In an interview with girl’s club, when asked “what are the biggest challenges you face in working as a creative,” Yehwan says: “it’s always hard to remain independent when everything is highly controlled and produced by large companies.” She simultaneously critiques these companies while empowering creatives and demonstrating that they can produce great content through coding.

 

Which features of the internet / web are significant for your Research Subject, and why?

I think a webpage that has a storytelling layout, interactive graphics, and possibly sound/music.

 

What are the connections with the concepts we are learning in CCLab?

Here are some specific works that are related especially to ideas/techniques we’ve looked at recently!

webcam interaction (first work, second work)

“Openstudio Interactive Poster”
“move to read”

 

slight variation using classes:

“template and repetition of images”

 

sound:

 

keyboard interaction:

“text fire”

 

 

What can we learn?

I think Yehwan provides a lot to think about, especially in terms of thinking creatively and being courageous, and pursuing good design over uniformity/conventionality.

 

Conclusion

Sum up the main points from above, describe your personal point of view, and how the reading and your research topic may impact your ideation process for project B.

I think the reading and review of Yehwan’s work is perfect if our project is going to include a digital and physical (the time capsule) element. I also like how we can follow along with net art’s motivations to consider the question of what message will you send through the internet portal? , which asks us to weigh what we consider important to convey.

 

Check out Yehwan’s website here.

Checkout Yehwan’s Instagram here.


Sources

https://web.archive.org/web/20230315012145/https://magazine.artland.com/agents-of-change-internet-net-art-how-the-world-wide-web-has-affected-the-way-we-make-art/

https://www.artforum.com/features/web-work-a-history-of-internet-art-2-162477/

https://netspecific.net/en/netspecific/what-is-net-art

Yehwan Song

https://log.fakewhale.xyz/curation/tracing-the-rise-and-impact-of-net-art/

https://yhsong.com/

https://helsinkibiennaali.fi/en/artist/yehwan-song/

https://www.itsnicethat.com/features/ones-to-watch-2020-yehwan-song-digital-240220

https://www.itsnicethat.com/articles/yehwan-song-interactive-digital-graphic-design-030119

https://www.itsnicethat.com/articles/wix-playground-web-design-in-focus-meet-the-speakers-event-digital-121120

Yehwan Song: Unfriendly User-friendliness

https://postdigitalgraphicdesign.com/interview/19/pdgd-itw-yehwansong/

https://www.itsnicethat.com/features/ones-to-watch-2020-yehwan-song-digital-240220

A conversation with Yehwan Song

 

 

“Arrival” (2016) Reflection

spoiler alerts kinda:)

Arrival is a science-fiction film based on the short story “Story of Your Life” (1998) by Ted Chiang. It follows linguist Louise Banks as she tries to establish communication with aliens that arrived on earth.

the two heptapods, abbott and costello. image source: the long shot
image source: NPR

 

We read “Story of Your Life” in Commslab! I knew that Arrival was based off of it, but this was my first time watching it. I don’t remember much of the story, but I went back to my blogpost:

The story focused a lot on distinctions between the heptapods’ written and oral language, but this was kind of just briefly mentioned in the movie. I was curious what they would make the heptapods’ and their language look like in the movie, and whether they could pull it off. I think they did a good job. The visual design of the words and sentences (spiral shapes with variations) were well done and similar to Chiang’s description of them being  like mandalas/sketches. I think what was more powerful was how the movie depicted the heptapods’ communicating: it involved them shooting ink (?) from their limbs, which would form a logogram. The ink would then dissolve.

I looked into who designed the language, and it was artist Martine Bertrand, with input from computer scientists Stephen and Christopher Wolfram, and graphic designer Aaron Morrison. Bertrand said in this article that she emphasized mystery. The clues that she got from the production designer were: “NO HUMAN, IN A CIRCLE, CURSIVE, WE DON’T KNOW AT BEGINNING IF IT’S A LANGUAGE OR THREAT”.

Ink blot designs

Qualities: fluid so it doesn’t look human. should give off an ominous effect but also intrigue the audience.

 A computer scientist coded the language. Stephen Wolfram is the founder of Mathematica, a computing system that visualizes data. I actually had no idea and didn’t really think about use of code after finishing the movie. Their process is available on Github which is pretty cool.

github screenshot

 

Project B

I still have to brainstorm for project b more, but I can consider Arrival for inspiration because they both involve communication and manipulating time.

Communication was the main issue of the movie, the challenge of the artists, and project b asks us how we’ll communicate with users 1000 years in the future via a website. I also remember something Yehwan Song said, which is that learning coding is challenging for some native Korean speakers, as coding is associated with the English language, so learning English is another barrier/prerequisite before being able to code. So the project can be a chance to consider how to communicate with a greater variety of people regardless of background/culture

Time is a major concept subverted by the movie too, as it uses a nonlinear narrative and time travel (one of the heptapods says that they’ve come to earth so they can help humans because in 3000 years time they’ll need to ask humans for help). Louise also becomes self aware at the end and realizes something future her must tell present-day her–which raises the question of how do we connect with people/ourselves in the future?

I think my favorite part of the film was the score! I don’t think it would’ve been as powerful without it.

thank you Marcele, Eric and Leon for screening

 

https://creativechair.org/martine-bertrand/

https://creativechair.org/stephen-wolfram/

In ‘Arrival,’ Aliens Just Don’t Understand (and Neither Do Humans)

https://thelongshot.substack.com/p/the-staying-power-of-arrival

https://www.npr.org/sections/13.7/2016/11/23/503109667/the-arrival-of-the-hectapods-time-holds-the-key-to-everything

https://postdigitalgraphicdesign.com/interview/19/pdgd-itw-yehwansong/

 

Mini Project #5: Object Dancers

Mini Project#5: Object Dancers

Project Title: beibingyang (北冰洋) polar bear

 

Screenshot


 

Goals

  • Apply the concept of Object-Oriented Programming (OOP) to your project.
  • Design and implement your own, self-contained classes; and
  • Construct objects and manipulate their properties (variables) utilizing the methods (functions) that are defined in the Class(es).

 

Description and Concept

This is the beibingyang polar bear! The mascot (I think?) of beibingyang soda from Beijing. Growing up, whenever I went back to Beijing (my family’s hometown) to visit, I looked forward to drinking it with my relatives.  I’m not really sure why it came to mind when we were assigned object dancer.  Here are some photos I used for inspiration:

 

  Image: xiaohongshu
Image: xiaohongshu
Image: Vincent R. Vinci, China Daily, hacos.cn, Beijing Eat Too Much Team

The sketch: I coded the polar bear pretty much as you see in the above photos. In my sketch it’s waving with a jumping orange on its head and holding a bottle of beibingyang.

Demo/Visual Documentation 

Some parts to highlight:

   

(randomly generated colors)

 

 jumping orange (that is a little screwed up)

Coding Process

As with  my other sketches so far, I started just drawing the polar bear exactly how I wanted it to look! I think it’s still kinda hard for me to get out of my comfort zone–I still think coding static designs are easiest but I’m slowly learning. Anyway I felt more comfortable going ahead after I had a design to work with.

The polar bear is made up of: a head, ears, eyes, nose, mouth, body, arms, and feet. I just started with an ellipse (the body) and went from there.

Moon showed me a basic movement I could add using push and pop, translate, and rotate.  Here’s a quick sketch of what it originally looked like.


 

Eventually I adjusted it so the shapes wouldn’t rotate endlessly 360 degrees.

For the soda bottle, I changed this code around!

Honestly when it came to referring to the object, rereading the p5.js chapter helped, but I still kind of didn’t know where to start when actually coding it. So I just started with creating properties for the colors, even though I can just directly name them, to get used to it.

properties
referring within the constructor

 

The first motion element I tried to code was the jumping orange.  I don’t think I coded many variations of the same thing, but moreso it just took more time to think and try to visualize what I read in the textbook and how OOP is different from what we’ve done before. For the orange I just named this.orangeY, this.orangeW, and this.orangeH. I didn’t write one for x because I didn’t want to change the x position. I updated those coordinates after.

I used an if else statement to make it jump. Originally I had the logic reversed I think, I had -= 0.5 and += 1 instead.

To make the eyes jump along with the orange, I added them to the above if else statement. However the problem I have now-which I didn’t really end up resolving, is that the eyes jump up higher than the orange so they leave the orange’s face. You can see it in the video above. This is because the eyes and orange’s initial positions are different. I adjusted this a little by tweaking the speeds so it looked less obvious, but didn’t really do anything else. If I could fix it I’d fix it by calculating the eyes position relative to the orange’s.

These are the main properties I had for the rotation.  

I used the this.angle for the head, all facial features, and body. The only great difference in speed is with the left arm rotation honestly. Because the body and head were coded separately, at first I had an issue where the head would be rotating past the ellipse (body) in a way where it was really obvious they weren’t “connected.” I think I fixed this by adjusting the anchor spot of the head/neck and the radians value.

 

If I could change things with this drawing:

  • I had difficulty figuring out how to write code so that the left foot would stop on the way back from its rotation (at 180 degrees), and then the right foot would rotate in the other direction. I would implement this next time
  • Add more variety–my dancing pretty much just comes from rotation

Reflection

  • What is the benefit of your class not relying on any code outside of its own definition?

You can bundle data together. At first I was really confused at how things would work if you don’t declare any global variables, but I’m starting to see how it works. I think it also helps with conciseness.

  • What make it challenging to write code that has to harmonize with the code other people have written?  

I guess if you’re looking at another person’s code, you’d have to seek some information out for yourself by looking at the original variables. So this is an added step. There’s also the issue of keeping boundaries (like the square we had) in mind.

  • Describe the terms modularity and reusability using the example of your dancer class.

For modularity, the class is broken up into smaller components (like move right leg, move head), and then reusability, you can reuse methods across different instances of the class. For ex, I used rotate.thisAngle a lot.

 

 

See my project here

See the code here

Sources

https://www.thebeijinger.com/blog/2021/09/23/capital-fizz-sipping-arctic-ocean-beijings-iconic-orange-soda-brand

Project A Documentation

Part I

work: how do you (the warawara) live?

instructor: Professor Moon

by: jenna

subtitle: an interpretation of the lives of the warawara, the creatures of hayao miyazaki’s the boy and the heron

(or lit. translation: “how do you live?”

description: this work is an interactive sketch created in the javascript framework p5.js. say hello to the warawara, feed them by clicking on them, and watch what they do next.

abstract: the fantastical world of hayao miyazaki and studio ghibli is a joy–and challenge–to recreate. their latest film the boy and the heron (2023), is a fantasy adventure circa wwII with deep layers and meaningful thematic elements per-usual ghibli style. protagonist mahito is a young boy who moves to the countryside after the loss of his mother. when his stepmother then disappears, mahito’s search for her leads him to discover an abandoned tower and a mysterious gray heron that lures him into a dreamlike world where the living and the dead are reunited. the warawara reside here, representing yearning and uncertainty–but also  resilience, coping, and growth–in a world marred by painful conflict and loss. perhaps the cutest miyazaki creature to date, they are unborn human souls whose goal is to enter mahito’s world: to be born as humans. on their journey though, they are preyed upon by pelicans, and some are eaten and do not make it to the other side. madalena daleziou may have put it the best in their article for Epicstream: “if anything, the happy faces of the warawara suggest that they are content in their plane of existence despite the sad connotations.” this contrast between light visuals and timely, serious messages, is again something studio ghibli excels at.

 

images:

global release poster (French version)

 

the warawara take flight
peek at my sketch

pt 2 on next page! –>

Mini Project #3: Generative Motion

For Mini Project #3, I developed 3 different generative sketches using p5.js. 

The motion that I choose to expand on for Project A is not really encapsulated in any of these 3 sketches. I believe I will need further practice with that type of motion. Instead, these 3 sketches explore themes I will incorporate in Project A: nature, living creatures, imaginative worlds, and emotional journeys.

3 Mini Project Sketches

Sketch I. At the Movies

 

 

Access sketch here.

Sketch II. Kinda Koi Pond

 

 

Access sketch here.

Sketch III. Moving Without Me


 

Access sketch here.

 

Project A

For Project A, I want to explore diverse changes in motion, predominantly the tumbling, floating, bursting  of creatures that reflect the narrative and changes in spheres and planes of existence in Hayao Miyazaki’s The Boy and the Heron (lit: How Do You Live?).

 

Miyazaki’s film features creatures called warawara  (ワラワラ).

Appearance: cute, small, white blob-shaped spirits with smiling faces

Movement: can walk, waddle, and float. Move in masses.

The warawara are “unborn human souls who reside in the Sea World. Once they mature, they fly up into the sky to be born as humans. Often, when they fly up attempting to be born, they are eaten by the Pelicans because there’s nothing else in this world for them to eat” (source). In the context of the film, the Pelicans act as intermediaries between the world of the living and the world of the dead.

The Boy and the Heron is set during WWII. Daleziou of EpicStream comments on this inevitable association of the Warawara with death, despite their external appearance, and opine that they could symbolize “the lost potential of children who were not born during World War II due to malnutrition, violence, and disease” (source). The author suggests that the positive, childlike design of the Warawara can point to them being “content in their plane of existence despite the sad connotations.” Furthermore, the term “warawara” in Japanese roughly translates to “bustling; shuffling; squirming; creepy crawly” (source). I hope to explore these positive-negative contradictions–as Hayao Miyazaki often does in his films–in a representation of the Warawara or similarly-inspired creature.

Further inspiration I found here.

See slides here.

 

Artistic Inspiration Research #1: Anna Ridler

Anna Ridler: ‘Let Me Dream Again’ (2019-2020)

 

Project brief here

Film here

Introduction

Artist Background + Process

Anna Ridler is a London-based artist and researcher whose work has been exhibited at institutions worldwide. Having earned the distinction of being one of the nine “pioneering artists” examining the intersection of art and AI by ArtNet, her work process involves the study and employment of emerging technologies and methods of measurement and their place in the world. In Let Me Dream Again, Ridler attempts the restoration of lost films using machine learning. The application of machine learning reflects her wide exploration of the profound capabilities of AI: where she had once used machine learning as a “disintegration loop,” to “destroy what there was until no meaning was left,” in Let Me Dream Again, she uses it to create what has disappeared, to fill in blank spaces.

Visual, Technical, Material Features

Let Me Dream Again is a series of experiments resulting in the creation of one ever-evolving GAN generated film. GANs, or generative adversarial networks, is a class of machine learning frameworks composed of two models (Generator and Discriminator) that check for patterns in data. The models “compete” with each other to replicate the patterns, generating new data that plausibly could’ve been drawn from the original input. GANs is powerful in generating images indistinguishable from the original visuals it was trained on or textual descriptions it received. While Ridler worked with lost films, these films were not altogether “lost;” fragments existed online. In one experiment, she utilized film of still images from found cinema clips (the original archival footage) as the backdrop, overlaying it with a reel of GAN generated film. The result is a film that intercuts the modern and the past, fact and fantasy, and pays homage to the original work while being wholly Ridler’s own.

Conceptual Background (Ridler’s inspirations, intentions, historical context).

Ridler noticed parallels between the early cinema of Hollywood and Western Europe and machine learning-generated imagery: both early auteurs and current artists working with machine learning had to invent and are honing new visual languages in a burgeoning, but still niche, field. Both strive to document and reflect on the world. Keeping with the fact that she had to fill in the gaps of missing film, Ridler used GANs to experiment with the space between and bring together reality and dreamworld.

The phenomenon imbued throughout ‘Let Me Dream Again’ is the act of dreaming. Dreams are often bizzare in that they are quasirealistic, sometimes only having a single thing “off” from reality. GANs have come to be called an algorithm that “dreams” or “hallucinates” based on how it tweaks real imagery. 

During the period that silent films were most popular, scientists discovered a man in Russia who had a perfect memory. Although this sounds as if this would be the perfect stop against this
decay and fragility, he was miserable .
so much information was overwhelming. Perhaps missing things should remain missing. Although the intention of these experiments were to try to recreate what was lost. Ultimately I feel they all fail in this regard: what comes out is clearly not a missing film. But I am happy with this outcome – something that is taking what has
gone but reworking and reconfiguring it to make new.

The Film

“Let Me Dream Again” shares its name with an early Victorian film that is “thought to be the first known instance of a dreamscape in cinema and a transition between dreams and reality.” 

 

Discussion: Findings + Connection to Creative Coding

What’s the significance of the work? What impact does/doesn’t it have?

Ridler’s own words are interesting. She concludes: “Perhaps missing things should remain missing. Although the intention of these experiments were to try to recreate what was lost. Ultimately I feel they all fail in this regard: what comes out is clearly not a missing film. But I am happy with this outcome–something that is taking what has gone but reworking and reconfiguring it to make it new.”

I don’t really know anything about film archival, but my first impression was that GANs might provide a unique opportunity to truly bring back/add to things that are lost, which I assume is what Ridler is striving to do. Watching the film though, I realized it is bizarre and somewhat eerie. I don’t know if GANs potential lies in serious archival, but more likely what Ridler suggests, which is repurposing. I would like to know which fragments of lost film(s) she used, if they were ever named, and where she sourced them from.

What are the connections with the concepts we are learning in CCLab?

We haven’t really talked about machine learning much, but creative coders can utilize it. What Ridler has created here in her exploration of dream vs reality and past vs present, also can let us further explore the boundary between human (director, film editor, programmer) and computer. 

What does the work inspire you to do next

I’m interested in the way she used machine learning to generate a narrative.  One of the ideas I had early on was to incorporate one of Sylvia Plath’s quotes from The Bell Jar, which has very evocative language. 

I saw my life branching out before me like the green fig tree in the story. From the tip of every branch, like a fat purple fig, a wonderful future beckoned and winked. One fig was a husband and a happy home and children, and another fig was a famous poet and another fig was a brilliant professor, and another fig was Ee Gee, the amazing editor, and another fig was Europe and Africa and South America, and another fig was Constantin and Socrates and Attila and a pack of other lovers with queer names and offbeat professions, and another fig was an Olympic lady crew champion, and beyond and above these figs were many more figs I couldn’t quite make out. I saw myself sitting in the crotch of this fig tree, starving to death, just because I couldn’t make up my mind which of the figs I would choose. I wanted each and every one of them, but choosing one meant losing all the rest, and, as I sat there, unable to decide, the figs began to wrinkle and go black, and, one by one, they plopped to the ground at my feet.”

 

References

I saw my life branching out before me…… quote by “Sylvia Plath”: What should I read next? What Should I Read Next? Book recommendations from readers like you. (n.d.). https://www.whatshouldireadnext.com/quotes/sylvia-plath-i-saw-my-life-branching.

 

British Film Institute. (n.d.-a). let me dream again. BFI Player. https://player.bfi.org.uk/free/film/watch-let-me-dream-again-1900-online.

 

Mini Project 2: Interactive Memories and Dreams

Project Title: to be loved is to be changed

Partner: Ariel

Original Sketch

Link to her sketch.

 

Her Memory

Ariel and I didn’t really talk about very specific dreams/memories (both of us don’t remember our dreams that well), but she still told me something that I thought I could use. We both love cats, and she told me that she raised her cat from when it was a tiny and skinny kitten, and it’s now fluffy and chubby. I loved this story, and wanted to portray it through her sketch since she happened to add a cat to it already.

 

Description and Concept

In Ariel’s self portrait, you see a girl, with half her face visible, holding a spoon with a cat sitting in it. Details to note are her red painted fingernails and lines and curves making up her ear and details in the top left hand corner of the canvas. Ariel said she added the cat and the details in the corner (the crescent moon, the dashed lines) to make for a more visually interesting sketch. The nails I think are important to note, as Ariel is passionate about doing nail art, and has been doing her own nails for several years.

I wanted to portray Ariel’s love and care for her cat through my manipulation of her sketch. Between learning more about her and her memory, I totally forgot about the detail about her nails, which I would’ve included by making her nails change color, shape, or size in the sketch if I were to do this again. I liked the colors she used–it gives the entire sketch a sort of bubblegum palette, and wanted to use similar colors. that would complement it.

Demo

 

Link to my sketch.

Coding Process

The first step I completed was making the red dot on the orange lines move. I had no particular vision in mind yet, I just wanted to practice with the mouseIsPressed, keyIsPressed, or mouseX and mouseY functions first. 

I later had the idea to “feed” the cat, by moving the red dot down on the y-axis and having it stop  moving when it reached the cat, to demonstrate how Ariel’s care gave her cat a healthy and good life. I did this by constraining the dot to not move beyond y=450. Here is the code for the dot:

Next, since I wanted to demonstrate that Ariel’s cat changed under her care, I wanted the focal point to be the cat growing bigger when the dot reached it. Unfortunately I had no idea how to do this–we’d learned how to code growing and shrinking circles, but the cat is made up of multiple ellipses and triangles and I didn’t know how to manipulate this group of shapes. Instead, I added a heart to appear only if the dot reached the cat.

 

I had a lot of trouble with this as well. I first coded the heart by itself using two circles and a triangle, reference taken from this page of the p5.js reference. To make the heart only appear when the dot reached the cat, I used a conditional statement. Since I added constrain under the code for the red dot to not make it move past y=450, I coded for the heart to appear if mouseY>440. This way the heart would appear around the time the dot reached the cat. I also added another command for the text “please grow!” to show up simultaneously.  My main issue here was that the heart would not show up at all when the cursor moved between 440 and 450. To fix this, I had to get help from Professor Moon. We found that I had mistakes in the order of execution I was telling p5.js to perform, as well as with my variables. I had multiple x and y variables that were for different actions. We fixed this by rearranging the code and declaring global variables. 

assigning global variables before function setup
reddot code
cat code
heart code AFTER cat code

Once I understood how to use the global variables, I had no issue adding the command to write “please grow!” on the first try.

 

Now that I had an element that changed and followed the mouse cursor, I added one that would change if the mouse is pressed. I used an if-else conditional statement. For this. If the mouse is pressed,  a different moon phase (full moon, ellipse) would appear. Otherwise Ariel’s original crescent moon would be there.

 

I added a key is pressed  element using the same if-else statement.  If you pressed any key, her mouth would close and turn into a smile. Otherwise it would be an ellipse.

Then I added elements that would change over time, independently and without user input. The first one was multicolored circles that would flash across the canvas. The reference I used was Moon’s code in class.

variables defined before function setup: circleX, circleY, rgb

The next element was the earring color. For this, I referenced this code by user hosken as a guide. Before function setup, I declared the counter=0 and assigned earringColor for the color of the earring. 

 

earring code
earringColor declared before function setup

 

Finally, the last elements I added was the star from Moon’s sketch and a sparkle that took the place as the cursor from the p5.js reference.

 

 

Reflection

I am not very satisfied with this sketch because I did use lots of code either from the p5js reference, public examples, or practice we did in class, and overall feel like I didn’t tweak very much. I didn’t feel like I’d practiced enough beforehand to feel confident in being able to write and execute my own code, and ran into a lot of errors and confusion.  After finishing this project, I feel a little more competent in using variables and conditionals, being more aware of syntax, but feel I could use more practice and care in my order of execution. Also, I overall feel more confident in using conditionals than variables.

One resource I came across that helped me understand everything better and that I will refer back to in the future is happy coding. 

I think that my sketch only covered a minuscule part of possible real world-to-digital interactions, and that there is so much more to explore. I think an interactive device that could bring this memory to life is anything that involves the action of giving/adding to or caring for something, such as some kind of VR game that monitors motion (like pouring food for a cat) and displays progress on a screen.