inspired by the Wu Tsang work at SFMOMA… Dreaming of how to fill out html garden on a huge landscape screen
- launch new season
- aim for a 2 hour video that could be going through all the seasoms played for sf moma lobby
- soundtrack?
- realtime by the weather in addition to the season
- need playground for designing new plants
- adopt your own plant
- how to have more stakes?
- make them out of digital things that normally give anxiety? social media icons / buttons
- news headlines? and 24/7 stuff?
- real plant footage interspersed?
directors notes for de young open Included in this booklet we would also like to add a director’s note for each film. For this section you will have the opportunity to include any type of text that can range from the description of the film, what you want the viewer to take away from your film, what inspired you to make the film to a fun engaging sentence. Take this opportunity to interact with the viewers and provide them with the best viewing experience.
html garden: season 0 is a timelapse of 66 days of growth of a website garden, with plants composed of HTML elements (the fundamental building blocks for a website). At a time when so much of our digital consumption comes from an overwhelming flood of information, html garden imagines a seasonal website that offers a sanctuary of quiet change, which rewards visitors for returning. As you watch, try to pick out a particular plant to stay with through the growth cycle. Pay attention to your senses of time as you watch—your breath, the rhythms of the plants, and the hum of the environment. After, visit the live web garden (https://htmlgarden.spencerchang.me/) to see how it has changed in the months since. What signs of life do you notice in the digital spaces you spend time on every day?
deyoung open promo post so so excited to have the honor of showing html garden: season 0 at the DeYoung (@deyoungmuseum) as part of the DeYoung Open for the next several months.
this video installation features a timelapse of 66 days of growth of html garden, the website garden I made in the spring for The HTML Review. In the background, you can hear the sounds of the life and environment (featuring the voices of @fieldednotes, @jazz.php, and myself and ambient music i made using @hotemogf’s ambient.institute/soundroom).
Thank you to @maxnc and @shheeelllbby for the opportunity to show this at the HTML Review reading at @culturehub_org , without whom this would have never come to life, and all the friends who gave me feedback along the way.
The exhibition opens on September 30 (featuring free admission on opening!) and html garden along with the other video pieces will have a showing in the main theater starting around noon. If you’d like to come let me know :)
addenum project for rhizome mini-grant
-
why should this exist?
- why now?
2023-05-17 culture hub reading / showing
- printouts
- create sticker printouts of the different species of plants using photoshop (maybe in diff stages?)
- make timelapse video of the garden continuously growing over different days ✅ 2023-05-22
- add audio of monotone voice reading over the lore mixed with reading from MDN? ✅ 2023-05-22
- screen reader with variational voices/tones and environmental sounding
- could train an AI to say it in my voice
- could loop it over the entire webpage or over a whole month to get a timelapse of the garden growing
- button ✅ 2023-10-10
- hr ✅ 2023-10-10
- link ✅ 2023-10-10
- cmd ✅ 2023-10-10
- time ✅ 2023-10-10
- add a “day” in the top left or right?
Acknowledgements Thank you to Jasmine Wang, Jessica Zhou for lending their voices. Thank you to Chia Amisola for creating the website for ambient music upon which I produced the background music for this video. Thank you to all the Screen Reader apps which I had the opportunity to use for the first time through making this “reading.” Thank you to the audience for bearing with my voice.
announcement overjoyed to share this piece I made for the HTML Review’s 2nd issue.
html garden is an attempt to imagine what a “seasonal website” looks like, one that rewards visitors for coming back and noticing, a very different and radical act from the way large platforms force interface changes. Visitors are encouraged to take a stroll through and use their inherent browser mechanisms to zoom in and take a closer peek at the plants that call to them.
html garden is composed of digitally-native plants, formed from HTML elements that simulate the growth patterns of real plants (backed by a grammar that means you could create your own plant!). Returning repeatedly will reward you with the sights of growth in each plant along with budding offspring, and you might just find new species as you come to become a regular at this neighborhood garden. The slow growth of the website day-to-day invites returning to the same place on the internet and bearing witness to its change.
This was such a joy (and at times an absolute struggle) to create, play with, and learn from, from not only creating a poetic website, with all the interactions and details that delight, but also creating a system on top of p5js to “draw” with html elements rather than lines using the logic of l-systems.
This project wouldn’t have come into being without the inspiration and learnings from Robert Irwin’s Central Garden design, Bhavik Singh’s work on l-systems, and the open-source p5js community.
- pick out seasons and map elements to them
- “anthology of html elements”
- apply l system to each, slightly vary the algo
- custom cursor chat w gardening
- maybe save seeds so you actually make an impact
- contribute/cultivate your own plant?
- tamogotchi vibes lol
- pick from one of the species and you have to come back to water it. (fake this by choosing a random one)
- plant or prune
how to draw the elements
- core “growing” algorithm (or 3?) that each element has its own variations on, (hash based on the name of it?) seasonality
- can you hash based on the date and use that as a seed for random generation? maybe based on each month or something, or time of day? or weather?
good elements to pick
- Elementum Linchinus:
<a> <strong>,<em>,<small>,<big>(deprecated?),<s><audio>,<video><bto><blink><blockquote>,<q>- Elementum Botonus
<button> <canvas>- Elementum Lexus:
<code>,<samp>,<kbd>: Ctrl,<var>✅ 2023-03-21 - Elementum Tabula
<table> <data>- Elementum Chrono:
<time> - Elementum Datum:
<datalist>,<input>,<textarea>,<select>,<option>,<optgroup><form>,<output>- all the diff
<input>types
<del>,<ins>,<mark>- Elementum Espandre
<details>,<summary> <abbr>,<dfn>- Elementum Basis
<div> <figcaption><h1>- Elementum Separatus:
<hr> - Elementus Pictus:
<img> - Elementum Listierius:
<ul><li> <map>,<area><marquee><svg>,<object>- Elementum Porros:
<progress>: <ruby>,<rp>,<rt>,<sub>,<sup>
manual book: links to the official MDN reference and the deprecated elements are extinct species
