--- title: "Lab: generative art" description: "44 generative art pieces drawn live in the browser with canvas, three.js and p5.js: strange attractors, noise fields and hardware experiments." url: "https://vorillaz.com/lab" --- # lab 44 generative plates · 4 experiments · 16 covers The workshop. Strange attractors, noise and the odd machine, 2019–2026. Most plates are drawn live from their code; hover one to set it in motion. ## generative 1. [![](https://vorillaz.com/_astro/signal.Wer_f7m0_O88tk.webp)](https://vorillaz.com/lab/signal) [#44 signal · 2026](https://vorillaz.com/lab/signal) 2. [![](https://vorillaz.com/_astro/kitab.CNQYhQ5I_ZSCyng.webp)](https://vorillaz.com/lab/kitab) [#43 kitāb · 2026](https://vorillaz.com/lab/kitab) 3. [![](https://vorillaz.com/_astro/ink.BKHbmwDt_ap1Di.webp)](https://vorillaz.com/lab/ink) [#42 ink · 2026](https://vorillaz.com/lab/ink) 4. [![](https://vorillaz.com/_astro/balance.D8v96orY_Jpv1z.webp)](https://vorillaz.com/lab/balance) [#41 balance · 2026](https://vorillaz.com/lab/balance) 5. [![](https://vorillaz.com/_astro/ash.CgBUC11P_Z234mmn.webp)](https://vorillaz.com/lab/ash) [#40 ash · 2026](https://vorillaz.com/lab/ash) 6. [![](https://vorillaz.com/_astro/orca.DEUjUv9o_25D1jy.webp)](https://vorillaz.com/lab/orca) [#39 orca · 2026](https://vorillaz.com/lab/orca) 7. [![](https://vorillaz.com/_astro/pi.CUswiy_V_8X0He.webp)](https://vorillaz.com/lab/pi) [#38 pi · 2026](https://vorillaz.com/lab/pi) 8. [![](https://vorillaz.com/_astro/stokes.DxAJAsey_Z1trVxh.webp)](https://vorillaz.com/lab/stokes) [#37 stokes · 2026](https://vorillaz.com/lab/stokes) 9. [![](https://vorillaz.com/_astro/sq2.BDOnBHNt_Z1Es07B.webp)](https://vorillaz.com/lab/sq2) [#36 sq2 · 2026](https://vorillaz.com/lab/sq2) 10. [![](https://vorillaz.com/_astro/desmi.CpIrc0q-_Z29aMx7.webp)](https://vorillaz.com/lab/desmi) [#35 desmi · 2026](https://vorillaz.com/lab/desmi) 11. [![](https://vorillaz.com/_astro/vox.BTkvA8br_29k7nG.webp)](https://vorillaz.com/lab/vox) [#34 vox · 2026](https://vorillaz.com/lab/vox) 12. [![](https://vorillaz.com/_astro/typoi.CSqg69DG_Z2bYYl5.webp)](https://vorillaz.com/lab/typoi) [#33 typoi · 2026](https://vorillaz.com/lab/typoi) 13. [![](https://vorillaz.com/_astro/rhegma.CB1gJZXY_1WPF0X.webp)](https://vorillaz.com/lab/rhegma) [#32 rhegma · 2026](https://vorillaz.com/lab/rhegma) 14. [![](https://vorillaz.com/_astro/skia.Cb49Q9xu_1CDVse.webp)](https://vorillaz.com/lab/skia) [#31 skia · 2026](https://vorillaz.com/lab/skia) 15. [![](https://vorillaz.com/_astro/istos.B0aLDGKv_ZABTDq.webp)](https://vorillaz.com/lab/istos) [#30 istos · 2026](https://vorillaz.com/lab/istos) 16. [![](https://vorillaz.com/_astro/chroma.CxQ1IUXJ_1m1NAw.webp)](https://vorillaz.com/lab/chroma) [#29 chroma · 2026](https://vorillaz.com/lab/chroma) 17. [![](https://vorillaz.com/_astro/writing.DFWRAqwV_ZpaPCC.webp)](https://vorillaz.com/lab/writing) [#28 writing · 2026](https://vorillaz.com/lab/writing) 18. [![](https://vorillaz.com/_astro/meteora.LiQQxeZr_JI3C1.webp)](https://vorillaz.com/lab/meteora) [#27 meteora · 2026](https://vorillaz.com/lab/meteora) 19. [![](https://vorillaz.com/_astro/tainia.DRZH0-Y0_Z19DmLw.webp)](https://vorillaz.com/lab/film) [#26 film · 2026](https://vorillaz.com/lab/film) 20. [![](https://vorillaz.com/_astro/chartis.BHldGnhS_DYIDA.webp)](https://vorillaz.com/lab/map) [#25 map · 2026](https://vorillaz.com/lab/map) 21. [![](https://vorillaz.com/_astro/roi.CPliIJF7_gjhhh.webp)](https://vorillaz.com/lab/roe) [#24 roe · 2026](https://vorillaz.com/lab/roe) 22. [![](https://vorillaz.com/_astro/supremus.BXhoYm4r_Zs2VIw.webp)](https://vorillaz.com/lab/supremus) [#23 supremus · 2026](https://vorillaz.com/lab/supremus) 23. [![](https://vorillaz.com/_astro/proun.fKDow5fH_Z2i8rXG.webp)](https://vorillaz.com/lab/proun) [#22 proun · 2026](https://vorillaz.com/lab/proun) 24. [![](https://vorillaz.com/_astro/de-stijl.m3xOa7O-_Z2sc4Ru.webp)](https://vorillaz.com/lab/de-stijl) [#21 de stijl · 2026](https://vorillaz.com/lab/de-stijl) 25. [![](https://vorillaz.com/_astro/nefos.BitrvZJ7_1PqhO4.webp)](https://vorillaz.com/lab/nefos) [#20 nefos · 2026](https://vorillaz.com/lab/nefos) 26. [![](https://vorillaz.com/_astro/butterfly-effect.rseRwZkH_Z1wDWbe.webp)](https://vorillaz.com/lab/butterfly-effect) [#19 the butterfly effect · 2026](https://vorillaz.com/lab/butterfly-effect) 27. [![](https://vorillaz.com/_astro/clifford-de-jong-attractors.DZXuUlG5_tRuaI.webp)](https://vorillaz.com/lab/clifford-de-jong-attractors) [#18 clifford & de jong attractors · 2026](https://vorillaz.com/lab/clifford-de-jong-attractors) 28. [![](https://vorillaz.com/_astro/rossler-attractor.CL2YcsXP_Z36ose.webp)](https://vorillaz.com/lab/rossler-attractor) [#17 the rössler attractor · 2026](https://vorillaz.com/lab/rossler-attractor) 29. [![](https://vorillaz.com/_astro/aizawa-attractor.B398ufUo_Z1DQRJx.webp)](https://vorillaz.com/lab/aizawa-attractor) [#16 the aizawa attractor · 2026](https://vorillaz.com/lab/aizawa-attractor) 30. [![](https://vorillaz.com/_astro/prodigy.CixNxwTG_Z1sGQNx.webp)](https://vorillaz.com/lab/prodigy) [#15 prodigy · 2020](https://vorillaz.com/lab/prodigy) 31. [![](https://vorillaz.com/_astro/lines.C5lh3xf__ZpY44L.webp)](https://vorillaz.com/lab/lines) [#14 lineslineslines · 2020](https://vorillaz.com/lab/lines) 32. [![](https://vorillaz.com/_astro/blocks.Bfvb7Swb_Z1sSaLW.webp)](https://vorillaz.com/lab/blocks) [#13 blocks · 2020](https://vorillaz.com/lab/blocks) 33. [![](https://vorillaz.com/_astro/perlin-noise-wave.iFTSzXyA_2tJSN3.webp)](https://vorillaz.com/lab/perlin-noise-wave) [#12 perlin noise wave · 2019](https://vorillaz.com/lab/perlin-noise-wave) 34. [![](https://vorillaz.com/_astro/halvorsen-attractor.B4rmTxr5_Z2lenRe.webp)](https://vorillaz.com/lab/halvorsen-attractor) [#11 the halvorsen attractor · 2019](https://vorillaz.com/lab/halvorsen-attractor) 35. [![](https://vorillaz.com/_astro/hadley-attractor.CmxSRncq_htsBj.webp)](https://vorillaz.com/lab/hadley-attractor) [#10 the hadley attractor · 2019](https://vorillaz.com/lab/hadley-attractor) 36. [![](https://vorillaz.com/_astro/chen-lee-attractor.Db3pcjKX_VMruh.webp)](https://vorillaz.com/lab/chen-lee-attractor) [#09 the chen–lee attractor · 2019](https://vorillaz.com/lab/chen-lee-attractor) 37. [![](https://vorillaz.com/_astro/thomas-attractor.V9LIuTCA_ZISfpe.webp)](https://vorillaz.com/lab/thomas-attractor) [#08 the thomas attractor · 2019](https://vorillaz.com/lab/thomas-attractor) 38. [![](https://vorillaz.com/_astro/lorenz-mod-2-attractor.DXax743V_ZyXzch.webp)](https://vorillaz.com/lab/lorenz-mod-2-attractor) [#07 the lorenz mod 2 attractor · 2019](https://vorillaz.com/lab/lorenz-mod-2-attractor) 39. [![](https://vorillaz.com/_astro/dequan-li-attractor.B10sFdN0_Z1uisxI.webp)](https://vorillaz.com/lab/dequan-li-attractor) [#06 the dequan li attractor · 2019](https://vorillaz.com/lab/dequan-li-attractor) 40. [![](https://vorillaz.com/_astro/dadras-attractor.BwUKO1Aw_ZSgGp6.webp)](https://vorillaz.com/lab/dadras-attractor) [#05 the dadras attractor · 2019](https://vorillaz.com/lab/dadras-attractor) 41. [![](https://vorillaz.com/_astro/arneodo-attractor.Bjp3i8D0_Z1qbF13.webp)](https://vorillaz.com/lab/arneodo-attractor) [#04 the arneodo attractor · 2019](https://vorillaz.com/lab/arneodo-attractor) 42. [![#3 - Exoplanet](https://vorillaz.com/_astro/exoplanet.CcKdwjVr_Z10aekK.svg)](https://vorillaz.com/lab/exoplanet) [#03 exoplanet · 2019](https://vorillaz.com/lab/exoplanet) 43. [![](https://vorillaz.com/_astro/p5-vines.iHySf8cD_Z10aekK.svg)](https://vorillaz.com/lab/p5-vines) [#02 vines · 2019](https://vorillaz.com/lab/p5-vines) 44. [![](https://vorillaz.com/_astro/2d-death-star.DQXU9nw6_Z10aekK.svg)](https://vorillaz.com/lab/2d-death-star) [#01 death star · 2019](https://vorillaz.com/lab/2d-death-star) ## experiments - [e01 · From WebGL to 3D printed object · p5 · 3d ↗](https://x.com/vorillaz/status/1757103398858395754) - [e02 · A demo of a 3D printed robotic arm · p5 · 3d ↗](https://x.com/vorillaz/status/1731411787407364286) - [e03 · Mesmerising circle illusion · css ↗](https://codepen.io/TheodoreVorillas/pen/MaQJZY) - [e04 · A Braille solenoid prototype · iot ↗](https://github.com/braillejs/solenoid-prototype) ## covers Cover images moved out of the articles. They live here with their credits and prompts. 1. ![](https://vorillaz.com/_astro/clack.C9ZIqaVF_WCGSo.webp) [Netflix But better](https://vorillaz.com/netflix-but-better)05 ai photo · [Jakob Owens](https://unsplash.com/@jakobowens1) 2. ![](https://vorillaz.com/_astro/prisma.C_gSYjy3_1uO782.webp) [From Schema to Server: Automating Documentation and tRPC with Prisma](https://vorillaz.com/prisma-server)02 systems photo · [Artem Artemov](https://unsplash.com/@artemov) 3. ![](https://vorillaz.com/_astro/desktop-apps.3J3yjITR_Z2mhhkI.webp) [Tauri vs. Electron: A Technical Comparison](https://vorillaz.com/tauri-vs-electron)06 craft midjourney prompt A minimalistic blank macOS screen. An application window in the middle of the screen. The application window has 3 small control knobs. Purple light. Super photorealism. --c 20 --ar 16:9 4. ![](https://vorillaz.com/_astro/docker-env.D3Mi_gV4_1TLsX5.webp) [Next.js with Public Environment Variables in Docker](https://vorillaz.com/nextjs-docker-env)02 systems midjourney prompt A black whale photo on a billboard on top of a brutalistic building, raw photo, detailed, dusty snap shooting, 70s film style,dusty, dirty colors, mood is 1970s in Berlin, adding organic shapes to the geometric environment UHD resolution --style raw --stylize 600 --ar 16:9 5. ![](https://vorillaz.com/_astro/astro-views.CiE6aR6C_1LAXXV.webp) [How to Build a Views Counter with Astro DB](https://vorillaz.com/astro-views)01 frontend midjourney prompt Airport mechanical flight display split-flap Departure Board,snap shooting, natural light, cinematic, coloring electric camera 70mm film, mood is 1970s in New York,adding organic shapes to the geometric environment, UHD resolution --style raw --stylize 600 --ar 16:9 6. ![](https://vorillaz.com/_astro/scale-night.DavWRQKd_Z3qNpT.webp) [Scale from One to Millions of Users](https://vorillaz.com/scale)02 systems photo · [Andy Holmes](https://unsplash.com/@andyjh07) 7. ![](https://vorillaz.com/_astro/cables-wiring.DPMUxerR_Z2wSDNT.webp) [How to Automatically Consume RESTful APIs in Your Frontend](https://vorillaz.com/consume-apis)01 frontend photo · [Ryunosuke Kikuno](https://unsplash.com/@ryunosuke_kikuno) 8. ![](https://vorillaz.com/_astro/dockerize-next-js.BQeK9bre_Z20hhIY.webp) [How to Dockerize a Next.js app](https://vorillaz.com/nextjs-docker)02 systems photo · [Fejuz](https://unsplash.com/@fejuz) 9. ![](https://vorillaz.com/_astro/the-art-of-state-management.CV_UEfxq_Z1dFXoI.webp) [The Art of State Management in React](https://vorillaz.com/the-art-of-state-management)01 frontend photo · [William Daigneault](https://unsplash.com/@williamdaigneault) 10. ![](https://vorillaz.com/_astro/we-want-your-help.BpwKswFJ_NEEYm.webp) [We Want Your Help to Learn Together](https://vorillaz.com/plexis)06 craft photo · [Toa Heftiba](https://unsplash.com/@heftiba) 11. ![](https://vorillaz.com/_astro/getting-started-espruino-esp8266.BU4GPR65_ZXwYas.webp) [Getting Started with Espruino and ESP8266](https://vorillaz.com/getting-started-espruino-esp8266)04 hardware photo · [Tim Käbel](https://unsplash.com/@dokawastaken) 12. ![](https://vorillaz.com/_astro/detect-idle-browser-tabs-with-javascript.BsO9EWsi_1R8yiL.webp) [How to Detect Idle Browser Tabs with JavaScript](https://vorillaz.com/detect-idle-browser-tabs-with-javascript)06 craft photo · [Marcin Jozwiak](https://unsplash.com/@marcinjozwiak) 13. ![](https://vorillaz.com/_astro/adaptive-serving-components-using-the-network-information-api.BP3AEI_u_kLJcS.webp) [Serving Adaptive Components Using the Network Information API](https://vorillaz.com/adaptive-serving-components-using-the-network-information-api)06 craft photo · [Nikola Johnny Mirkovic](https://unsplash.com/@thejohnnyme) 14. ![](https://vorillaz.com/_astro/headless-raspberry-pi-zero-w-setup.CliRnMnp_Z2otBNR.webp) [Headless Raspberry Pi Zero W Setup](https://vorillaz.com/headless-raspberry-pi-zero-w-setup)04 hardware photo · [Louis Reed](https://unsplash.com/@_louisreed) 15. ![](https://vorillaz.com/_astro/getting-started-javascript-iot.CsjO8D3V_ZGh2Sj.webp) [Getting Started with JavaScript and IoT](https://vorillaz.com/getting-started-javascript-iot)04 hardware photo · [Felipe Faria](https://unsplash.com/@felipefsf) 16. ![](https://vorillaz.com/_astro/raspberry-pi-and-node-js.-IRqR82T_Z2q3feg.webp) [Install Node.js on a Raspberry Pi](https://vorillaz.com/raspberry-pi-and-node-js)04 hardware photo · [Louis Reed](https://unsplash.com/@_louisreed)