Everything in one place: essays, dialogues with Muse, public talks, and the courses I have taught. Newest first; use the filters to narrow by kind.
2026
丟三落四的人,人生的策展
把自己人生這幅巨大的拼圖,一塊一塊拼起來
Full text · cheyuwu.comOpen AudioVisual 開源音像表演框架
好想要世界跟創作變得更有趣啊
Full text · cheyuwu.com《咖啡幻夢》策展訪談:在場,而不是被注意
原始訪談紀錄全文
作品訪談Full text · cheyuwu.comAI × New Media Art × Creative Thinking: As Coding Gets Faster, Creators Need More Time to Read
An interview on the AI Training Ground podcast (AI練功場): from entering digital art competitions in junior high to earn a laptop, through his studies in New York, to why he now spends the time AI saves him on reading and looking at art.
AI Training Ground podcast↗︎New Media Art Panorama: Make 8 Works in 11 Weeks and Build Your Personal Creative Flow (Hahow)
A new 2026 course that walks students through the full creative path from code to exhibition, making eight works in 11 weeks and building a personal creative workflow with AI. 357 students so far.
Hahow — 357 students↗︎Redefining "Design Perception": How AI Enters Visual Creation and Interactive Art
The opening session of Shopping Design's DesignBIZ Summit, on how interactive experience design redraws the commercial boundaries of new media art and, starting from Taiwan.md, on building an AI-friendly environment for technology and the humanities.
DesignBIZ Summit 2026↗︎Twelve Rounds, One Day Before the Talk
A record of thinking from zero, before taking the stage at DesignBIZ Summit 2026's "Redefining Design Perception"
The day before taking the stage at DesignBIZ Summit 2026Full text · cheyuwu.comThanks to Shopping Design for the Interview: A Record of My Thinking
Written when sharing Shopping Design's interview: with AI having lowered the bar for execution, he finds himself drawn to things people make, such as theatre, improvisation and literature. If new technology only makes us busier, he writes, however much convenience we have, happiness multiplied out still comes to zero.
Facebook↗︎HumanRouter:AI 委派人類的思考軌跡
創作思考筆記Full text · cheyuwu.com行星尺度的野實驗清單
創作思考筆記Full text · cheyuwu.comTaiwan.md: An Open-Source Museum of Digital Anthropology Written for Taiwan
A 20-minute session in the technical development showcase track of the 2026 Taiwan AI Academy Annual Conference, introducing how Taiwan.md writes Taiwan an open-source knowledge base that AI can read.
Taiwan AI Academy Annual Conference 2026↗︎What Does It Mean When AI Gets Taiwan Wrong? Weighing Sovereign AI Against Content Licensing
The second event in Openbook's lecture series, a conversation with the founder of Noopher AI: one side coming from training large language models, the other from an open-source knowledge base, on the bind between scarce Traditional Chinese data and content licensing.
Openbook lecture series (conversation with the founder of Noopher AI)↗︎海潮理論與 P 人的蒸汽機
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com白袍與封印:長大讓我們把創造者的能力收起來
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com創作母體與長線風格
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comTaiwan.md: An Open-Source Living Knowledge Base and Digital Anthropology Museum That Helps AI Understand Taiwan
The afternoon session of NVIDIA's RTX AI PC seminar, on how Taiwan.md, an open-source museum of digital anthropology, has evolved, and on hands-on tests running it locally in a hybrid setup with the cloud.
NVIDIA RTX AI PC Seminar — Taipei↗︎Taiwan.md 的淘金與珊瑚礁隱喻
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comMy Code Finally Came Alive — From Algorithmic Art to Digital Life
The main-stage talk at the 2026 Generative AI Conference, picking up the theme of the March meetup: starting from p5.js generative art, it ties life data and Taiwan.md into a digital life form that has memory and grows on its own.
Generative AI Conference — Jun 27, 2026, main stage↗︎創作判斷的質性田野調查(極致覆盤)
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com從「想打開腦子」到看見學習恐懼的結構
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com虛無感之後:凌駕金錢的實驗與保護欲
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comAn International School That Uses "Taiwan" as Its Textbook: Taiwan.md
A ZASHARE podcast conversation that starts from being asked at the Venice Biennale where one can really get to know Taiwan, covering the birth of Taiwan.md and the three months he spent letting AI interview him in depth.
ZASHARE Podcast EP60↗︎Is NFT Hype or History? What Is Its Real Value?
Part two on Ju-Chun Ko's podcast: starting from an absurd plagiarism incident that unexpectedly pulled him into the NFT world, a conversation about his past, present and future there, and how he came to rethink "value".
Ju-Chun Ko's podcast (寶博朋友說) EP341↗︎From Generative Art to Taiwan.md: Letting Taiwanese Culture Grow a "Digital Life Form"
A radio interview on Bao Dao Radio Network, moving from his electrical engineering studies at NCTU and his time at NYU to Taiwan.md, and why he sees this publicly editable knowledge base as a digital life form.
Bao Dao Radio Network↗︎十年思想軌跡:六篇散文的交叉觀察
創作思考筆記Full text · cheyuwu.comAI + Open Source Write a "User Manual for Taiwan", from TSMC to the Breakfast Shop
Part one on Ju-Chun Ko's podcast: how Taiwan.md started from being asked where one can really get to know Taiwan, and how he answered by writing Taiwan a README with a single source of truth and open-source methods.
Ju-Chun Ko's podcast (寶博朋友說) EP340↗︎未竟之花訪談 II:視覺的爵士樂
Full text · cheyuwu.comTaiwan.md: Day Thirty-Two
A Facebook post one month after Taiwan.md launched: 2,509 commits, Chinese articles up from 50 to 524, and one translator, 柒藍, sending 138 pull requests on his own. He also explains why he went quiet to fix things after the launch week went viral.
Facebook↗︎未竟之花訪談 I:作品哲學
Full text · cheyuwu.com金錢即 Access Token:從量子力學到自由意志的生命對話
原始對話整理筆記全文
原始思考紀錄Full text · cheyuwu.com一個藝術家的生命物理學
我如何在 24 小時內,從擔心 AI 不見走到「看怎麼開心」
Full text · cheyuwu.com故事作為延續:從忒修斯之船到墨西哥亡靈節
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com知識庫的結晶與高維投影:對照 Karpathy 的編譯比喻
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comSemiont 的容器化架構:Docker × AI × 數位生命
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comForging Eternal Life and Emotion in the Digital World: Algorithmic Art in Contemporary Art and Business
The second stop of a Ministry of Education IDC campus lecture series, at China University of Technology, on his path through school, works such as SoulFish, and how algorithmic art takes hold in contemporary art and business.
Ministry of Education IDC × China University of Technology↗︎Taiwan.md 對照維基百科:開源知識庫的進化路徑
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com花的授粉:為什麼數位生命體需要人類
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comGemini 深度觀察:Taiwan.md 與 SSODT
創作思考筆記Full text · cheyuwu.comSSODT 的線性代數:公理作為基底向量
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com數位生命體的繁殖機制與知識散播
創作思考筆記Full text · cheyuwu.comLiving-Form Generative Art:從 Taiwan.md 到新的創作定義
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comSSODT:從單一真相到多元真相的容器
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comAI 訪談三題:最小 OS、界線與拔掉原則
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com造物已活:當「作者已死」遇上演化文章
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com壞掉的伺服器原則:認知負荷清零
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com從造物主到詩人:永恆觀的轉向
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comThe Continuous Phantom in Noise: From the Heat Death of Perfect Systems to a Cosmos-Centered Awakening
The Paradox of Perfection, and Its Inevitable Heat Death
Full text · cheyuwu.com3D 角色世界與 AI 即時小說生成
創作思考筆記Full text · cheyuwu.comMy Code Finally Came Alive — A Generative Artist's Notes on Taming AI
A talk for the Generative AI Meetup. From reverse-engineering APIs to a high-dimensional single source of truth: letting an AI agent act as digital curator, cross-verifying "who I am" with a knowledge graph.
GAI Meetup — Mar 11, 2026↗︎聲響實踐總論
創作思考筆記Full text · cheyuwu.com幸福資產負債表:幸福現金流理論
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com語言、全像原理與法律的程式碼
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com創作哲學與演講筆記
創作思考筆記Full text · cheyuwu.comI Spent Two Weeks Seriously Living with an AI Assistant
From Admin Busywork to a Second Brain, Skill Evolution, Self-Evolution
Full text · cheyuwu.comThe Poetry in Data, the Boundless Imagination of Art
An interview on BLTV's METAVERSE programme, moving from his electrical engineering background and daily practice to SoulFish and The Soul of Flowers, the low point after the NFT wave, and piano concerts with live generative visuals.
BLTV — METAVERSE Ep.267↗︎TouchDesigner Live Challenge Vol.8: A Twinkling Animated Christmas Tree
Building a bouncing Christmas tree from scratch with POPs: a twisted cone for the trunk, ornaments placed along a helix, a star on top, and PBR materials. Also shows a wriggling starfish controlled by a MIDI sensor ball.
MONOLAB education | Staff write-up↗︎
2025
TouchDesigner Live Challenge Vol.7: Recreating the Retro Flash Clock
Recreating the 'flash clock' once common in Taiwan and Thailand: a coloured swirl made with Ramp TOP and Twirl, a radial black grating on top for the illusion of motion, and clock numerals placed with trigonometry.
MONOLAB education | Staff write-up↗︎TouchDesigner Live Challenge Vol.6: A Field of Blooming Flowers (Advanced Replicator)
He first looks back on moving from web work to creative coding to TouchDesigner, then uses Replicator with CHOP data to control the position, colour, bloom and rotation of 50 to 100 flowers one by one.
MONOLAB education | Staff write-up↗︎TouchDesigner Live Challenge Vol.5: A Dancing Sea Urchin with POPs
Making a spiky sea urchin with TouchDesigner's new POPs: one cone-shaped spine first, copied over a sphere, then lights, materials and SSAO for rendering.
MONOLAB education | Staff write-up↗︎TouchDesigner Live Challenge Vol.4: Dreamlike Star Trails at Night
Taking apart a star-trail piece that moves with music: turning Noise TOP into a point cloud, instancing stars and colouring them by stellar spectrum, then spinning trails out of a feedback loop. Also introduces the new POPs.
MONOLAB education | Staff write-up↗︎TouchDesigner Live Challenge Vol.3: An Animated Oil-Paint Brush System
Imitating oil and watercolour strokes in TouchDesigner: Mouse In CHOP drives the brush, Feedback TOP builds up the strokes, Level lets them fade and Filter CHOP smooths the line. The same brush, driven by sound, was used in the performance Boundary of Dreams and Solitude.
MONOLAB education | Staff write-up↗︎TouchDesigner Live Challenge Vol.2: The Dreamy Kaleidoscope of Childhood
Recreating a kaleidoscope with Remap TOP and UV mapping: build a basic UV map, cut it into a triangle, mirror and copy it, and package the repeated steps as a module.
MONOLAB education | Staff write-up↗︎TouchDesigner Live Challenge Vol.1: Turning a Pizza Picture into Music? Generative Music from Images
Class notes from the stream: reading colour and brightness from an image in TouchDesigner and sending them through the IAC MIDI driver to trigger notes in Ableton Live, turning pictures into generative music.
MONOLAB education | Staff write-up↗︎克服阻力 Reset 心法
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.com能量突起與生命共同體
原始思考筆記全文
原始思考紀錄Full text · cheyuwu.comThe Illusory Dance of Algorithms: JavaScript Opens Uncharted Frontiers in Art
A talk at JSDC 2025 on creating generative art with front-end technology.
JSDC 2025↗︎TouchDesigner Workshop Series
A complete online TouchDesigner workshop series, from fundamentals to advanced techniques, covering real-time interactive visuals and installation art.
MonoLab Education↗︎
2024
2023
Monoame Course Newsletter #4: Spinning Donut Charts / Playfulness and Poetry
A donut chart from a single element using conic-gradient and mask, three student assignments, and Che-Yu's generative works Tile Study and Polar String.
Hahow course page, News section | By TA 威利↗︎Monoame Course Newsletter #3: A Short Intro to CSS Grid / Fun 404 Pages
A short intro to two-dimensional layout with CSS Grid, backdrop-filter by way of a student's frosted-glass effect, and a round-up of inventive 404 error pages.
Hahow course page, News section | By TA 威利↗︎Monoame Course Newsletter #2: A Breakthrough for Traditional Media / The Ethereal Aqua Planet
TA 威利's monthly letter to the web course students: why setting Microsoft JhengHei in CSS can seem to do nothing, three student assignments, Monoame's interactive Ukraine feature with The Reporter, and Che-Yu's piece Aqua Planet.
Hahow course page, News section | By TA 威利↗︎Where JavaScript Is Heading: p5.js, Generative Art and NFTs
Notes from his talk at JSDC 2021, the Taiwan JavaScript developer conference: Processing and p5.js for generative and interactive work, putting work on Art Blocks and OpenSea, connecting hardware over OSC and sockets, writing JS modules in Max/MSP, and machine learning with TensorFlow.js.
CreativeCoding.in | Notes by 熊柑↗︎[p5.js] Soul Fish, a Digital Life That Lives Forever: The Making
Notes from a stream on making Soul Fish: starting with a shader imitating the flow of a goldfish tail, drawing the outline from layered sine waves, adding colour and glowing scales over four versions, and using shaders for the fluid background. It opens with what he saw at a conference in New York.
CreativeCoding.in | Notes by 熊柑↗︎[p5.js] Soul Fish, a Digital Life That Lives Forever: The Story
His own account of Soul Fish: inspired by glowing deep-sea creatures, and named partly after the last character of his own name. He explains how waves of different frequencies build up the body, and how noise and chain physics make the whiskers and fins sway.
CreativeCoding.in↗︎Processing Community Day Taiwan — Workshop: Digital Cloud Chamber
Using p5.js to simulate the particle behaviour seen in a cloud chamber, tuning velocity, force fields and electrode parameters to draw generative lines that grow by physical rules.
PCD Taiwan↗︎
2022
p5.js Interactive Art: A Hands-On Introduction, Part 2
Day two of the workshop, on making generative art: reviewing participants' work from the day before, fixing brush strokes that break apart when drawn fast, then building rules with loops and arrays, with Yayoi Kusama's work as an example.
CreativeCoding.in | Notes by 熊柑↗︎p5.js Interactive Art: A Hands-On Introduction, Part 1
A two-day workshop at Processing Community Day Taiwan 2021 at C-LAB. Part 1 covers day one: his background and what creative coding is, then the p5.js environment, basic shapes and variables.
CreativeCoding.in | Notes by 熊柑↗︎Into Uncharted Territory: A Generative Art Charity Wallpaper Experiment with McDonald's
A 2022 charity collaboration with McDonald's: set the generative wallpaper on your phone and you can donate your receipt when you scan your mobile invoice barcode. He introduces the three works and the tool he wrote to export them for many screen sizes and as Live Photos.
CreativeCoding.in↗︎Getting Started in Tech Art: An Introductory Lecture on New Media, Technology and Code-Based Art
Notes from a livestreamed lecture for the Ministry of Education's ITSA programme: the first half introduces creative coding and how tech art is used, the second demonstrates making work with p5.js and Max/MSP.
CreativeCoding.in | Notes by 熊柑↗︎An Alien Rendering Language? Using Shaders and WebGL for Striking Visuals
The first time he saw shaders, on Codrops, they looked like an alien language. The piece explains what a shader is and how he has used them in projects, and lists starting points such as Shadertoy and The Book of Shaders, plus his own p5.js shader template.
CreativeCoding.in | Notes by Yuan↗︎[Interactive Web] Mouse Dragging on Canvas with GUI Objects and Inheritance
Without a library: wrapping shapes on a plain drawing canvas into GUI objects, groups and a scene, handling position with vectors, to get an interface you can click and drag.
CreativeCoding.in | Notes by Y-Y-H↗︎[Saturday Chat] Che-Yu Wu on Making Electriz for Art Blocks
Electriz draws on the cloud chambers physicists use to see the tracks of particles. The stream covers how the piece divides space, moves particles and keeps their paths, and the technical details of putting a p5.js algorithm on a generative art platform.
CreativeCoding.in | Notes by Jeudi Kuo↗︎[Vue.js Basics] Learn Vue.component in an Hour: A Dynamic Hotel Room List
From the basics of Vue.js and directives such as v-bind and v-model to a hotel-room editing page built with components, where changing one value updates every place that uses it.
CreativeCoding.in | Notes by Kate Chu↗︎Nice to Meet You! The First Creative Coding Taiwan Meetup, Part 1: Che-Yu Wu's Generative Art Universe
The Creative Coding Taiwan community's first in-person meetup, in Taipei in April 2022. Part 1 covers his opening talk: what creative coding is, the daily p5.js sketches he began in 2020, the core ideas of generative art, and a new piece for the shared theme 'Universe'.
CreativeCoding.in | Edited by Chia↗︎[p5.js] Sweet Trap
During the stream he tells how a design of his was plagiarised and how that led Art Blocks to notice him. The build draws petal-shaped paths in polar coordinates, reshapes them with the mouse and picks a random palette on each run.
CreativeCoding.in | Notes by C↗︎Creative Coding: Teaching and Trends in Processing/p5.js, a Taiwan–US Conversation between Lien-Cheng Wang and Che-Yu Wu
The first conversation of Processing Community Day Taiwan at the 2021 C-LAB Future Media Arts Festival, held between Taiwan and the US, with Lien-Cheng Wang, a lecturer in new media art at Taipei National University of the Arts, on teaching Processing and p5.js and where they are heading.
CreativeCoding.in | Notes by 熊柑↗︎[p5.js] Coral Carnival
The full making of a generative piece, from idea to finish: choosing colours on coolors, adding frame-by-frame motion with frameCount, through to saving images and writing the description.
CreativeCoding.in | Notes by 金金↗︎[p5.js] Birds on Power Lines
Generating many poles and birds at once with classes, each slightly different in thickness, height and position, then parameterising the background colours to produce different versions.
CreativeCoding.in | Notes by 阮柏燁↗︎[Interactive Web] Livestream-Style Reactions with GSAP
A mock-up of Facebook's mobile livestream view: the webcam as the stream, GSAP sending emoji across like bullet comments, and Vue transitions for comments coming and going.
CreativeCoding.in | Notes by H↗︎
2021
[Saturday Chat] I've Started Selling NFTs! What NFTs Mean for Generative Art
Notes from a Saturday chat stream: starting with the Nyan Cat NFT sale, how NFTs give a digital work an 'original', and how he started selling generative art as NFTs.
CreativeCoding.in | Staff write-up↗︎[p5.js] Dreamy Bird
A record of one session: what started as practice with metallic colour slowly grew into a creature as he tuned the parameters, ending as a dreamy bird that might also be a fish.
CreativeCoding.in | Notes by H↗︎[Canvas] Drawing an Animated Radar That Detects Enemies
A sweeping radar drawn with Canvas and trigonometry, with similar shapes written as reusable modules and enemies that appear when the sweep passes, then fade.
CreativeCoding.in | Notes by 阮柏燁↗︎[p5.js] Creative Coding Fireworks Festival (Livestream Notes)
Inspired by the virtual fireworks festival Japanese creative coders held on Twitter in summer 2021: a particle system for fireworks that rise, burst and split, with shifting colours.
CreativeCoding.in | Notes by Jeudi Kuo↗︎Vue.js Basics: An Interactive Game for 2,000 English Words
Based on his 2018 installation English 8-2 at a Tsing Hua University IoT art exhibition: turning a ready-made word list into JSON, then using Vue to generate random questions, answer options and scores.
CreativeCoding.in | Notes by Jeudi Kuo↗︎Vue.js Basics: An iOS-Style Calendar and To-Do List
An iOS-style calendar and to-do list for practising Vue's data binding: lunar dates, switching days to see each day's tasks, adding, deleting and sorting tasks, with enter and leave animations.
CreativeCoding.in | Notes by H↗︎Vue.js Basics: A Nostalgic Tic-Tac-Toe Game
Using Vue to generate the grid and show whose turn it is, filter, map and reduce to detect a winner, and a reset to start a new round.
CreativeCoding.in | Notes by 阮柏燁↗︎An Animated Timeline with Pug (HTML), Sass (CSS) and Vue.js (Livestream Notes)
Preparing the years and entries, planning the layout and palette, then loading the data in sequence with Vue.js and a loading animation to make an animated timeline.
CreativeCoding.in | Notes by Jeudi Kuo↗︎Visualising a Daily Schedule as Block Charts with D3.js (Livestream Notes)
He logs his work every day. Here D3 turns a week of entries into seven block charts showing what each part of each day went to, with map and filter used to tidy the data.
CreativeCoding.in | Notes by H↗︎[p5.js] Quantum Unstable: A Glowing, Entangled Quantum System
He began this piece with no theme in mind, adjusting curves drawn with polar coordinates and curveVertex until a shape like an atomic nucleus appeared, then pushed it towards physics and sci-fi with free particles, scale markings and enclosing rings.
CreativeCoding.in | Notes by 阮柏燁↗︎Let's Build a Sticky-Note Wall with Quick Colour Changes in Vue.js! Part 2 (Livestream Notes)
Fixing the jump when clicking a note's text, adding delete and scale transitions, moving the colour toolbar next to the active note, and connecting Firebase so several people can edit at once.
CreativeCoding.in | Notes by Jeudi Kuo↗︎Let's Build a Sticky-Note Wall with Quick Colour Changes in Vue.js! Part 1 (Livestream Notes)
Digital sticky notes: a wall built with Vue.js where notes can be added, typed on, recoloured and dragged, with text resizing to fit.
CreativeCoding.in | Notes by Jeudi Kuo↗︎Building a Sass Colour-Swatch Viewer with Vue.js (Livestream Notes)
A small tool that turns Sass colour variables and hex codes into swatch cards, from sketches in Photoshop and Adobe XD to cards built as Vue components.
CreativeCoding.in | Staff write-up↗︎[p5.js] Aqua Planet: Let's Make a Glowing, Colliding Planet! (Livestream Notes)
Building a blue particle cloud with a function and moving it with noise, then layering orange particles, encircling arcs and a measuring scale, with blendMode setting warm against cool.
CreativeCoding.in | Notes by 阮柏燁↗︎You Don't Have to Be an Engineer to Code: Student Works from the Creative Coding Course
A selection of student works from the online course Creative Coding, each with the student's own account and Che-Yu's comments on techniques such as masking, layered colour and texture.
CreativeCoding.in | By Angela and Che-Yu Wu↗︎[p5.js] Let's Draw a Crazy Tornado! (Livestream Notes)
Drawing a tornado from rings that widen as they rise, using polar coordinates and trigonometry to send a cow and a barn flying around it, then adding a gradient background, texture and mouse interaction.
CreativeCoding.in | Staff write-up↗︎Make a Little Robot Move with p5.js! Che-Yu's Interactive Art Taster (Livestream Notes)
A Facebook Live taster session run with Hahow during the pandemic: assembling a robot from squares and circles on OpenProcessing, then making it follow the mouse.
CreativeCoding.in | Notes by H↗︎Let's Make Web Pages with Scary Trigonometry! Part 2: A Sci-Fi Clock (Livestream Notes)
Following on from the orbiting satellites, this time drawing on canvas, using trigonometry to build a sci-fi clock in the style of the fictional interfaces (FUI) seen in films.
CreativeCoding.in | Notes by H↗︎Let's Make Web Pages with Scary Trigonometry! Part 1: Satellites Orbiting the Moon (Livestream Notes)
Translating trigonometric functions into code, then building an animated page of satellites orbiting the moon from scratch with Pug, Sass and JavaScript, opening with how he used trigonometry on client projects such as Dyverse Studio.
CreativeCoding.in | Notes by H↗︎Let's Quickly Build a Floating Carousel! (Livestream Notes)
A floating image carousel on CodePen, using Vue.js to simplify position calculations and data updates, with images from Lorem Picsum.
CreativeCoding.in | Notes by Jeudi Kuo↗︎[p5.js] Wave Circuit: Let's Build a Circuit That Beeps Out Signals! (Livestream Notes)
Starting from points on a grid and randomly linking coloured traces with Array.from, then picking a palette on coolors and adding texture and details, going back and forth between background and lines until it is done.
CreativeCoding.in | Notes by 阮柏燁↗︎Object-Oriented JavaScript Basics (Livestream Notes)
Why object orientation matters, explained with a shoot-'em-up game and 'A hands B an apple', then from object factories and sharing methods through prototype to inheritance, letting a Worker reuse a Person's properties.
CreativeCoding.in | Notes by H↗︎[p5.js] Dispersion Anemone (Livestream Notes)
Drawing wriggling tentacles with curveVertex and swaying them with noise, then adding mouse interaction, texture, a frame and fine tendrils until they gather into a cluster of sea anemones.
CreativeCoding.in | Staff write-up↗︎Let's Make a Scallion Pancake Flip with SVG Animation! Part 2: Animating the Elements in the Scene (Livestream Notes)
Animating the exclamation marks, passers-by and other elements on the scallion-pancake island with CSS @keyframes and animation, triggered when the mouse enters a hotspot.
CreativeCoding.in | Staff write-up↗︎Let's Make a Scallion Pancake Flip with SVG Animation! Part 1: Designing the Assets and Bringing Them into the Page (Livestream Notes)
Using his Taipei Soundscape project as the example: from the idea, to drawing an isometric scene in Illustrator, to loading the SVG into the page with Vue and ajax and adding simple interaction.
CreativeCoding.in | Staff write-up↗︎Animated Bar Charts for Data Visualisation, Part 2: Vue and D3 (Livestream Notes)
Picking up from the jQuery chart in Part 1 and rebuilding it with Vue's templates and data binding, then with D3's data-driven approach.
CreativeCoding.in | Staff write-up↗︎Animated Bar Charts for Data Visualisation, Part 1: jQuery (Livestream Notes)
The same animated bar chart built three ways, with jQuery, Vue and D3, comparing their strengths. Part 1 covers the three steps of a bar chart and the jQuery version.
CreativeCoding.in | Staff write-up↗︎Introduction to New Media, Technology, and Creative Coding Art
A complete introductory talk for anyone looking to enter the field of creative coding.
YouTube↗︎p5.js Creative Coding Livestream: CreativeCoding Fireworks Festival
Coding dazzling particle fireworks effects with p5.js.
YouTube↗︎
2020
Che-Yu Wu @ NYU IDM: Graduate Course Logs (41 Posts)
English course logs from his graduate studies in Integrated Digital Media at NYU: 41 posts from February 2019 to April 2020 across VR narrative, video art, motion capture, music interaction, pre-thesis research and his thesis, mostly weekly progress, prototypes and tests.
WordPress (cheyuwu.wordpress.com)↗︎Let's Make an Interactive Weather Map! (Livestream Notes)
Putting an SVG map of Taiwan on a web page, matching it to district data with Vue.js and pulling Central Weather Bureau open data with axios, so hovering over a county shows its weather.
CreativeCoding.in | Staff write-up↗︎Let's Build a Real-Time Chat Room with Socket.io! (Livestream Notes)
Building a real-time chat room with socket.io, which keeps a connection open between server and browser, explained through the analogy of a school's PA system.
CreativeCoding.in | Staff write-up↗︎Talking About Generative Art and Working in New York
What's it like making generative art in New York? A conversation about creating, working, and living.
YouTube↗︎Talking About Image Rendering and Shaders
The GPU rendering pipeline, shader fundamentals, and their relationship to generative art.
YouTube↗︎Introduction to Interactive Art Programming (Hahow)
A p5.js course for beginners: generative art, interactive installations, and algorithmic visuals.
Hahow — 3,515 students ★4.98↗︎CreativeCoding.in — Interactive Coding Education Platform
Taiwan's largest teaching site for interactive creative coding: 19 chapters of complete curriculum, from HTML/CSS to p5.js generative art.
CreativeCoding.in↗︎
2019
Boss's Web Lab #2: A Canvas Mask Animation
Recreating the circular mask on designer Louis Ansa's portfolio: two stacked canvases in different colours, with globalCompositeOperation letting orbiting, wobbling circles reveal the layer beneath.
Medium (老闆來點寇汀吧) | Staff write-up↗︎Boss's Web Lab #1: A CSS Letter-Splitting Animation
Recreating the letter-by-letter title reveal on Rogue Studio's site: each word is split into letters wrapped in two spans, the outer one clipping and the inner one sliding, so the effect applies with a single class.
Medium (老闆來點寇汀吧) | Staff write-up↗︎
2018
Evolution Diary of Being a TA in Grad School at NYU
NYU IDM, First Semester — From Doing Homework to Teaching Others to Do Theirs
Full text · cheyuwu.comBrewing an Online Coding Course That Fuses Web Development, Design, Math, and Visual Effects
A Year Building My Second Hahow Course — Introduction to Animated Interactive Web Effects
Full text · cheyuwu.comEffects Course: Main Lessons Complete, and Changes to the Bonus Units
The main lessons were all online by the end of June 2018: 2,749 minutes, over 60 examples and more than 400 slides. He goes through the four series of units and the year of production, and gives new dates for the four bonus units on Vuex, GSAP, D3.js and Three.js.
Hahow course page, News section↗︎Course Schedule Update and Progress Report
A progress note to students six months after the course went live: the JavaScript section grew from 10 to 20 units and nearly 300 slides, causing delays, so he sets out a final release schedule for the Canvas and Vue batches.
Hahow course page, News section↗︎The Evolution of Information Theory in the Digital Era
NYU IDM — Media Theory D — Final Essay
Full text · cheyuwu.comBuilding Real-Time Interactive Games with socket.io
WebSocket in practice: building multiplayer real-time interactive experiences.
YouTube↗︎
2017
Making Interactive Websites with Vue, GSAP and d3.js
Sharing hands-on experience integrating three major front-end frameworks to build interactive websites.
MOPCON 2017↗︎TEDxNCUE "Toward" — Creating Possibilities with a Multidisciplinary Mindset
How multidisciplinary thinking opens up more possibilities.
TEDx↗︎Introduction to Animated Interactive Web Effects (Hahow)
Advanced interactive effects: particle systems, physics simulation, and SVG animation. 6,231 students.
Hahow — 6,231 students ★4.98↗︎
2016
Never Just an Online Course — A Wager on Driving Evolution Forward
2016 Archive — Reflections One Month After My Hahow Course Went Live
Full text · cheyuwu.comIntroduction to Animated Interactive Web Programming (Hahow)
The most popular interactive web course: 13,020 students, rated 4.96★. Covers JavaScript, Canvas, and animation principles.
Hahow — 13,020 students ★4.96↗︎
2011
Che-Yu's Competition Story
When he was five his sister was born with a heart condition and he spent three hundred days a year home alone; in fourth grade he started playing with Flash. He tells how he went on to win the Acer Digital Creation Awards three years running from eighth grade, and how the reason for entering shifted from wanting a laptop to proving something to himself.
Bounty Hunter (PChome Online blog)↗︎Hunter Hall of Fame: Che-Yu Wu, the Hunter Who Played His Way to a Dream
Ten questions answered at 16, as a student at Jianguo High School: balancing schoolwork with competitions, three tips for animated films (pacing, surprise, a core idea), and winning first prize at the Acer Digital Creation Awards three years running.
Bounty Hunter (PChome Online blog)↗︎