CHE-YU WU / LAB
A year in the making
Art, sound, tools and teaching meet on one wall. Follow a documented connection, or begin with a single piece of paper.
2019-09-09 — 2020-09-0937 public records
Red string: documented links · Twine: shared themes · Hover a paper to read a connection.
Complete records ↓
Read the year downwards, one month at a time. The small tags under a card are its connections: open one to jump to the record it names.
2019 · all year
2019 · 12
2020 · all year
2020 · 03
2020 · 04
2020 · 05
2020 · 06
2020 · 07
2020 · 08
2020 · 09
Complete records
Read each record
Each record retains its date basis, public sources and connection labels.
Intuitive Music Expression — NYU IDM thesis
The site's thesis page carries the badge NYU IDM Thesis 2019 for a web tool described there as a way for people to work together, edit and change melody intuitively, with the stated goal of finding a more intuitive, understandable and playful way to express and make music. The page links a midterm and a final video and embeds a sketch that runs in the browser.
- Music
- Thesis
Sources & related records
- EXPLODE — motion capture performance · Work from the same NYU IDM years (Curatorial theme)
- Floating in the Sky selected for NYC Media Lab and the FutureTech Showcase · Work from the same NYU IDM years (Curatorial theme)
- p5-vue-mirror — a live-editing p5.js editor component · The thesis page's interactive sketch is carried by this component (Curatorial theme)
EXPLODE — motion capture performance
The work page on the site is dated 14 December 2019 and lists the roles Unreal developer, scene design and performer. It describes a motion capture experience of a daydream world entered through a small bottle of coke, where the audience's cokes take part in forming the mirage and shape it in real time, and states that the creation never ends.
- Motion capture
- Performance
Sources & related records
- Intuitive Music Expression — NYU IDM thesis · Work from the same NYU IDM years (Curatorial theme)
Floating in the Sky selected for NYC Media Lab and the FutureTech Showcase
The selection record for the VR piece Floating in the Sky. The honours line on the work page reads Deloitte private showcase, 2020 and NYC Media Lab Exhibition, 2019, while the CV files both under 2020, as an accepted work for the NYC Media Lab Exhibition and a selected work for the FutureTech Showcase with Palpable Media and Deloitte. The piece itself is a first-person interactive story in which a solitary character lifts an umbrella and flies into the sky.
- VR
- Selection
Sources & related records
- Intuitive Music Expression — NYU IDM thesis · Work from the same NYU IDM years (Curatorial theme)
Boss's Web Lab #2 — a canvas mask animation
A teardown of the mask effect on French designer Louis Ansa's portfolio. The post splits the animation into three parts: a spherical mask that flips background and text colour inside the circle, two circle centres orbiting the middle of the screen, and an irregularly wavering boundary, then explains why two stacked canvases beat a pure CSS blend mode.
- Masks
- Canvas
Sources & related records
- Boss's Web Lab #1 — a CSS letter-split animation · The first post in the same series (Documented connection)
Boss's Web Lab #1 — a CSS letter-split animation
A teardown of the letter-by-letter title entrance on rogue.studio, rebuilt in CSS and JavaScript. Placing each letter by hand would be tedious, so the post leans on the browser's own layout: every letter becomes a nested pair of spans, the outer one clipping the overflow while the inner one moves with transform.
- Letter animation
- Teardown
Sources & related records
- Boss's Web Lab #2 — a canvas mask animation · The first post in the same series (Documented connection)
A realtime chat room with Socket.io — livestream notes
The livestream notes describe socket.io as a JavaScript library for realtime communication, holding a persistent connection between server and client so data can travel instantly, with events received through an on method that fires a callback. The build is a chat room that broadcasts messages, loads past conversation on join and shows who is typing.
- Realtime
- Livestream notes
Sources & related records
- An interactive weather map — livestream notes · The same run of livestream notes (Curatorial theme)
An interactive weather map — livestream notes
The livestream builds an interactive map of Taiwan that shows local weather when the cursor passes over a district. The notes list what it takes: the basics of HTML, CSS and JavaScript, handling SVG, working in Vue.js, and calling the Central Weather Bureau open data API with axios.
- Maps
- Open data
Sources & related records
- A realtime chat room with Socket.io — livestream notes · The same run of livestream notes (Curatorial theme)
Dream of Lily — daily sketch
Letting particles bloom along a particular force field, leaving their trails behind as dreamlike petals.
- Particles
- Force fields
Sources & related records
- Random Square Motion — daily sketch · The note says it rewrites the Dream of Lily particle system (Documented connection)
Atomic furnace — daily sketch
Fusion happened among countless particle collisions, / and out of the tiny probability of fusion, life was born.
- Particles
- Life
Sources & related records
Crowded City — daily sketch
New York is full of towers that hide the skyline. / Any more crowding and parcels will have to travel by balloon. / shearX and shearY make a pseudo-3D effect, / noise texture gives it an illustrated feel, / and gifts and balloons are dropped at the windows at random.
- Cities
- Illustration
Sources & related records
Getting started with p5.js — an interactive web tutorial
The post introduces p5 as a JavaScript library extended from Processing, wrapping drawing, mathematics and physics so a maker does not have to build the plumbing. The worked example runs on OpenProcessing: the mouse becomes a brush leaving a coloured trail, and clicking turns that trail into squares.
- p5.js
- Getting started
Sources & related records
p5-vue-mirror — a live-editing p5.js editor component
A public Vue.js component on GitHub, described in the repository as a p5.js code mirror with live edit and run driven by a vue.js v-model, with the running sketch inside an iframe. No licence is listed on the repository page.
- Open source
- Editors
Sources & related records
- Intuitive Music Expression — NYU IDM thesis · The thesis page's interactive sketch is carried by this component (Curatorial theme)
Random Square Motion — daily sketch
This one rewrites the particle system from Dream of Lily, / letting a particle turn with a certain probability when it meets a dividing line: / some keep flying, some fall into the grid's trajectory. / The visual result is pretty cool.
- Particles
- Grids
Sources & related records
- Dream of Lily — daily sketch · The note says it rewrites the Dream of Lily particle system (Documented connection)
Crazy Score — daily sketch
When you play until you no longer know what you are playing, / the notes peel off the score and dance on their own. / A touch of chromatic dispersion sits at the tail of each note, / and the mouse moves the range of the score's madness.
- Scores
- Music
Sources & related records
Glowing Anemone — daily sketch
I like the deep sea and glowing creatures very much, / so this tries blend modes and noise to draw an anemone writhing about.
- Anemones
- Blend modes
Sources & related records
Aqua Planet — daily sketch
All the glowing water gathered, countless worlds collided and fused. / The aqua planet keeps consuming itself until the last trace of light disperses. / The idea came while writing a function example today, with a little adjustment afterwards.
- Planets
- Functions
Sources & related records
- Creative Coding 101 — the third Hahow course goes to crowdfunding · The note says the idea came from a course function example (Documented connection)
Wave Circuit — daily sketch
It brought back the signals I studied in electrical engineering, and unexpectedly they turned out useful for music work later. / Assume the theory explains everything, build a model to simulate this world, and send colourful beeping signals.
- Signals
- Circuits
Sources & related records
Collide Aquarium — daily sketch
More and more residents have marked out their own territory. / Frightened fish and starfish stare at each other and collide. / An attempt at physics simulation with matter.js.
- Physics
- Aquarium
Sources & related records
- Annoying Uni — daily sketch · The note says it continues the previous day's physics engine work (Documented connection)
Annoying Uni — daily sketch
Still playing with the physics engine today, and there are many directions to develop from here. / The world-weary urchins are cranky: they bicker on sight, and dragging them around makes them angrier.
- Physics engine
- Urchins
Sources & related records
- Collide Aquarium — daily sketch · The note says it continues the previous day's physics engine work (Documented connection)
- Sleepy Pochi — daily sketch · The same run of physics engine studies (Curatorial theme)
Sleepy Pochi — daily sketch
Testing soft bodies in Matter.js, / making a squishy odd creature, Pochi, who never seems to get enough sleep. / Drag him around and he lies back down, most unwillingly.
- Soft body
- Characters
Sources & related records
- Annoying Uni — daily sketch · The same run of physics engine studies (Curatorial theme)
Creative Coding 101 — the third Hahow course goes to crowdfunding
The third Hahow course, Creative Coding 101, went to crowdfunding in 2020. Built around p5.js, it runs from basic drawing and colour through to interactive systems and simulation, with the lecture notes hosted on HackMD. Several daily sketches from this year came straight out of preparing and recording those lessons.
- Courses
- p5.js
Sources & related records
- Aqua Planet — daily sketch · The note says the idea came from a course function example (Documented connection)
- A little stubbornness and endless novelty — Hahow Blog interview · The interview is about this course's launch (Documented connection)
- Chinese Mosaic — daily sketch · The note says it came from a course example (Documented connection)
- CreativeCodingDemo — a public teaching demo repository · The same month's course thread (Curatorial theme)
A little stubbornness and endless novelty — Hahow Blog interview
A Hahow Blog interview published as the third course approached launch, reported and written by Ani Syu. It walks through three stages of his teaching, from web basics to visual effects to creative coding, and covers his New York years as a Creative Coding teaching assistant at NYU Integrated Digital Media.
- Interview
- Teaching
Sources & related records
- Creative Coding 101 — the third Hahow course goes to crowdfunding · The interview is about this course's launch (Documented connection)
- Where code meets interaction design — Bu-Tin EP26 · Two interviews from the same month (Curatorial theme)
Chinese Mosaic — daily sketch
Busy with a course example today, so the teaching demo of a Chinese video mosaic became today's piece. / Sampling pixels from video kept crashing in odd ways, so drawing to a temporary image first made the colours read correctly. / Adjusting the sample size gives a very cool effect.
- Video
- Mosaic
Sources & related records
- Creative Coding 101 — the third Hahow course goes to crowdfunding · The note says it came from a course example (Documented connection)
Gaia's Tree — daily sketch
From a seed full of infinite possibility grows the tree of Gaia. / Every branch and leaf is a parallel world leading to a future of its own. / An attempt to draw natural-looking plants with triangle recursion.
- Recursion
- Plants
Sources & related records
- Organic Circuit — daily sketch · The same round of recursion studies (Curatorial theme)
CreativeCodingDemo — a public teaching demo repository
A small public repository on GitHub holding just index.html and mySketch.js across two commits, with no README and no licence listed. It was created in the same month as the third Hahow course's crowdfunding run.
- Open source
- Teaching
Sources & related records
- Creative Coding 101 — the third Hahow course goes to crowdfunding · The same month's course thread (Curatorial theme)
Organic Circuit — daily sketch
This one tests square recursion; adjusting how the lines read gives an organic circuit feel, orderly inside the mess. / The recursion series is coming to an end, and I want to go explore other methods.
- Recursion
- Circuits
Sources & related records
- Gaia's Tree — daily sketch · The same round of recursion studies (Curatorial theme)
Snail Racing — daily sketch
Every snail has its own unique pattern and pace, / crawling hard along its own road (though sometimes it still compares itself with the others on the sly). / A change of style today, making something interactive.
- Interaction
- Snails
Sources & related records
Microscope — daily sketch
Testing shaders inside p5.js, generating an array of particles and passing them to glsl for rendering. / Shaders are still so hard to control: one tweak and everything goes off. / It looks like a view under some kind of microscope.
- Shaders
- Particles
Sources & related records
- Magic Stroke — daily sketch · The note says the code differs from Microscope by only a little (Documented connection)
Magic Stroke — daily sketch
Magic particles leave a glowing trail behind them. / Still the shader series: the code differs from Microscope by only a little. / Adding some physics to the particles and using p5.js arrays for interaction.
- Shaders
- Trails
Sources & related records
- Microscope — daily sketch · The note says the code differs from Microscope by only a little (Documented connection)
Where code meets interaction design — Bu-Tin EP26
Episode 26 of Bu-Tin, a podcast about freelance life, hosted by Lu Fa, with the guest appearing as a new media artist and as Monoame Design. It covers the Flash animations of primary school, the self-teaching during an electrical engineering degree, the first website commission, and his line that pushing slightly past your own ability is what makes you improve. It also covers the habit of writing interaction design in code every day, and why diversifying beats pure client work, since commissioned work never fully belongs to the maker.
- Freelancing
- Daily practice
Sources & related records
- A little stubbornness and endless novelty — Hahow Blog interview · Two interviews from the same month (Curatorial theme)
Gravity Wave — daily sketch
Ripples in spacetime spread into gravitational waves, bending relative distance beyond any feeling of it. / Testing distance plus sin to displace the pixel sampling point, combined with grid circles and noise texture, to make a colourful spacetime twisting outward from the grid.
- Gravitational waves
- Sampling
Sources & related records
Fire Bamboo — daily sketch
The bamboo shoots caught fire and are shaking about in a panic. / It occurred to me today that feeding the p5.js canvas result into a shader / makes something like a canvas or distortion filter. / The test looked very cool, so from now on I can draw shapes in p5 and post-process them in the shader.
- Shaders
- Filters
Sources & related records
Dot Countryside — daily sketch
Looking down from high above at farmland in every colour, cut into irregular pieces. / Practising a Voronoi diagram in GLSL, and it computes so fast. / Colour is taken from the position of each point, with a grid principle tested as well, / generating many circles of different sizes stacked together.
- Voronoi
- GLSL
Sources & related records
DNA Mutation — daily sketch
Irradiated DNA gradually comes apart and mutates. / Testing a shader that generates the DNA from a sin plus cos mask. / My grip on drawing shapes is a little better now, and lines and shapes inside a shader come more fluently.
- DNA
- Masks
Sources & related records
- Anxiety — daily sketch · The note says the shader series is taking a break (Documented connection)
Anxiety — daily sketch
Thoughts leap and blur, an inner voice that will not stop. / Everything knots up; different emotions collide, shatter, fuse, then vanish. / The shader series is on a break, and I want to try some other directions.
- Emotion
- Particles
Sources & related records
- DNA Mutation — daily sketch · The note says the shader series is taking a break (Documented connection)
Superstring Theory — daily sketch
Is the world made of vibrating strings? / Hidden in dimensions curled too small to observe, / the macroscopic fact does not exist, and your intention decides what you see.
- String theory
- Dimensions
Sources & related records
Memory Lost — daily sketch
Every retrieval of a memory / changes its content and its truth irreversibly. / Shattered and blurred emotion cannot be regrown. / As time passes, is any of it real, / or only an illusion one keeps rebuilding?
- Memory
- Time
