2b:null 2c:["$","title",null,{"children":"Observable & creative coding | ajn404's Workspace | Observable"}] 31:T490,md`Lionel Radisson, alias [makio135](https://twitter.com/makio135). I'm an artist/designer/maker/teacher and for 10 years, I've been playing with creative code doing generative graphics, digital fabrication, web experiments, interactive installations, … [

](https://twitter.com/makio135) [

](https://instagram.com/makio135) Throughout these years, I've used many different tools including [openprocessing](https://www.openprocessing.org/user/9856), [codepen](https://codepen.io/makio135), [glitch](https://glitch.com/@makio135), [p5js editor](https://editor.p5js.org/makio135/sketches), [github pages](https://leclub.github.io/), [canvas-sketch](https://github.com/mattdesl/canvas-sketch), [jsbin](https://jsbin.com/), [codepan](https://codepan.net/), [codesandbox](https://codesandbox.io/), [replit](https://repl.it/),… when I heard about Observable, I thought why not try a new one 🤷🏼‍♂️ Nearly a year has passed since I started, and I'd like to share this journey:`32:T7d5,await visibility(), md`${previews([ { path: '@makio135/svg-template', thumbnail: 'cb8b074a0dc644322e98ec43ba1ccc2454a97fad073b0470e1b13ac803f02ea6' }, { path: '@makio135/svg-template/3', thumbnail: 'c42ba7cbbcfbbcfa44d65911900aa936321b822fcca06937681f9887f5ded53a' }, { path: '@makio135/svg-template/6', thumbnail: 'd036c4b14c1f99aaffd341f44625f2d6ac367aa312b1c71a427485e82e2e7009' }, { path: '@makio135/generating-svgs', thumbnail: '80ed854a2f8787075b5a366a61b17ede759bf55bf8a3ac5c99c15037d65ddb85' }, { path: '@makio135/generating-svgs/3', thumbnail: 'dbff347a0fd5c53dc0e62019b8cfed1308723b17316fdc71bb564b92fe14fbca' }, { path: '@makio135/generating-svgs/4', thumbnail: 'fe399132217b967406e6a16395c5040f61779cada5ad22126ef720cc00b03c8f' }, { path: '@makio135/generating-svgs/10', thumbnail: '4c01167b71a9c1df58b5055eb3fab74a6320b1dbbb42a96e2b1107c7fa01b00f' }, { path: '@makio135/svg-template/5', thumbnail: '621bb4cd7c4de2766862c52681f4177423d71ce70d54d97446f407749a2f8c11' }, { path: '@makio135/generating-svgs/5', thumbnail: '1abc679cb91796b20f3cc5e0b631e3146c012386aa18e3b98b3d3e654b27ce1b' }, { path: '@makio135/generating-svgs/8', thumbnail: 'b84a6a3b4bc051f823f8eeb1e4243ec9acf8f411fe1f86219c1782dce2a053d4' }, { path: '@makio135/generating-svgs/7', thumbnail: '15c4dd592ff3e6b4760e8dfeadfa15f015c92f83e4a681cfe5947f6eaa15ce38' }, { path: '@makio135/generating-svgs/11', thumbnail: '7bf7bb606705f6e52b4f0926b439dbfb99cbb2c5b1473a18c7ea753360630c0d' }, { path: '@makio135/generating-svgs/13', thumbnail: 'f7e2c488a3289c24d4cec4d62206b1914538d0064ad1216cf6c34bb549718add' }, { path: '@makio135/svg-template/7', thumbnail: '2738807e4f966009daaf49fc0769831836df9cd3df8c4e16c8199d7d3cff4faf' }, { path: '@makio135/generating-svgs/16', thumbnail: '56911128bbf3ff701b2dc0e843e06a805839b3e87966972777bb0d1ba8b5851d' }, ])}`33:T4ad,await visibility(), html`${previews([ { path: '@makio135/breaking-things', thumbnail: '6ee8dbc4f353420a3ec26fb61aa54ed38e5c96632898146ef8260f89e073d6b8' }, { path: '@makio135/confined-trees', thumbnail: '62ddf00c163322f87c4503f72005442f1a934808d1e8c0751e7cbe61a8a6ddc2' }, { path: '@makio135/voronoise', thumbnail: '7f67f142b0ef27afafa93798d92f5764827bef8eeeff91dedab6e6b9cf9f1d4c' }, { path: '@makio135/wind-circle', thumbnail: '916b8b163292ae953d7a841504eb59c2635680eb774cbe7ad6585dfb6118b8f8' }, { path: '@makio135/ln', thumbnail: '2951ec1bba389226c88470d530a375210988e308500d6ea96cbf3b5cdc39e84d' }, { path: '@makio135/mobius-strips-for-pen-plotter', thumbnail: '49590bf5d68134dcc908dc9478efbfe3e2f58366070e907ca2c314a1699d2677' }, { path: '@makio135/growing-spaces', thumbnail: '42c98265b7a03b992e74f69c0e5d383243ddb42e8d711b48670cbd43c754497a' }, { path: '@makio135/sunbursts', thumbnail: '52fd71280e03748bbef5c54ba6d83f62ad5996e516235f810dd49344ed3e0cb6' }, { path: '@makio135/colorful-polygons', thumbnail: 'e169383a02bf356e0c745383c0035fe198bf8c0e81abc324705c9350505efcf4' }, ])}`34:Te68,{ const list = shuffle(['iIa1i5tDQ1CjVRzADi','0brlMRn95D2Sh9MuU0','1VuSUwEst9CsZgstjo','NXlxgzI1fFntYeEGDa','N958mgrMQG7Kp1MbYP','uAuUFMMwy2tqXLyuFB','SB9yLCp5UNT11bwgN5','5cdDC1jTTwlpPPSm1m','ctC7AGFLSXZBSZoxpx','1jVrjgatyjk3chfcaT','5FVaf1DZZSn1KDLEGn','1ryhEEPVJwxFB182U5','3X3TozknHxebywNLHU','4TXZm5u78jp1EAEOvT','5JyUV3MmNvl2NiRb0U','5uobGsBmtgCtejWRCG','68jCpHqPE9ekGWNWas','9HoqpaNxqRjFdDADGO','9nEI1LQ0Bw7IQ2d4sO','B6ewKhO80Dokaactdu','CFap2Z7qG27aCldDav','EglNBUmJO0YS5j3nlY','F5fegaJiLrsXYg6DXT','I7Mh5Pj2oWCJWTTjgn','JD0260ve1m1CF5WXGP','K5UeTnBogYcKXtQt2H','aRPkb9ARg43i7weQrw','axMJbvlUOBgdm1cpMy','bO9NNKF8xeZRAUN2jM','cRJMKyRrKmls69SZII','deZI8h95oNqlnAxpwl','dsX1WH45c7LZbckiBY','dwWY36J6HAzdEWJ7xi','fclIpzADTXRRSPpclU','fcrsbSmsYq3swlihER','ipIujdXmqAbF1sbopA','k6JuxxnU3Qevg06qzb','2DFxlNj7LFS0ou0OaB','BEka8Xk5Qr0tZt0VQ5','El6R8sfNWqAh8VjLSq','4vv16TQCqa6dRrrsJa','8skouHeOET8KXLbZCF','F7pv3Mt0ei1fJ4q1HN','Ib44RsTu9ZMtWeL1fC','c3PvtcUbY4MxzNSb0g','0AA7sCnufUkWWLAOdk','0TyCkT0402x032lV3f','2TcPKyBgnQqfMZDKdN','6KrTclILKrfDOlxWHK','7ccz2k3vuDGXfAIedW','CKnyVfTj7ClmpXOAjP','H355x8AVqgj6TJFG4j','HssEvr2X2ONs2c7ZYi','fxgmHaYgEqJBtnwqZI','hTxd8YOJMHA3DFhXvQ','imyhIhcXHUtx9YzFYx','jT6HCA5Kg3d3d4fSwG','koO7Yq94QinClsB8QP','3BumxWBmuBqP5Ll12u','7Mmf8TFY8kgY8RcRPg','B6hw6dUkOZ7qp7hf3K','F8QvLvlDDNXEf7BVW9','jG2uqii5pqrvTJt5bL','2xD7kUHw6jJV2Em7IH','9YHpbZUvO1YO1Qtwcu','FqobkbnHlkou75pjvY','GB72iLd8vXI8L7AZrZ','cER0HfILtIBrMZf2tZ','D9lxlbldSW100CDcRh','FLLOLp3stl0PzYsrFq','Cs6opPS7mrT0XIXlvB','F5uJpuX6IgpTjYWahE','FOLAvCa4AaS52HgWPZ','LESswEkH6bqIzBmYVZ','MQmskkjOxCCJC5oWDi','PEv879uS6vbkKpIEm6','PGNGrWCIfW6WK4mPSj','Q6dkqhO8ZbDq64iudQ','RNwzi34VTlStMYVgfh','RYwhHTMUBGXWCOLbfK','ThNHFQwjaDz4ekRrSL','UuZFijf6Hv1p8yOBtx','V6I1i2q8Jsc3PeTeEQ','WmbXkOxGL61Ikmkyd8','WpTCRlWQw5DBfVNNBN','X1MigRHBPfIdVOYZ0u','X5o0xBUOJ23xq9XKg9','XKplSx0CwWGTl6zDAT','ZH2f0b0AgP7PfA7Ve2','l6GZOeHcmjUX0ubpRb','ltY3NjsavBfkNChpRM','mMDC74wZi3esURxoq8','mkDAjqsm4N10l3W0G9','oEZxsdFee60OmBPLTu','pl7QnoMHqUxK2oyMPB','ps3IJK5R0PfSzTcRji','rvI1YAyBmWGFS9RCY4','s7NvpmWWKpHDPoIImd','sWMZqlbIk41KC3d0JQ','uUg5wEc2UrTchccQk6','unqeyTsjK9ri5lTbQM','vaCxq7DVVsrNOFU4V1','vsBEhiswOdECmCZSAt','wa7zw9uLWER1fhhzAn','yw9LYz2cNI8wPClByo','M44j6fAOxDZlebHzDG','PQChHeraBV6YNJSI2G','QexPORbtYyMkVmz6fY','nMbAs3C1idelUT0W03','p387xlaGmb3fdBNOaF','xaNr3TVemfTfmp3Sbv','ZA0hLFNH2d4AthDjlW','vE3xxTJCEJuSFIhKJC','wiQxPYMLj8Bg4gO0sy','X43LCcWsfRjjnDSshU','uRVnIStZwxEdhMzeJj','XXC8DLJTXCSG83TG2H','m240eyLTL4AdiAR7Bm','ypZypnDrxocWx0gyUl','SAAH1G5ltFZsfqrvMr','YhC9p1nUNajINOS22L','TkB3siZkdLNxRaBH7M','UYi84BK51P1aa1ivnp','YfleJTJZ5LEK9DUQ05','MpNbgmAT8lNQpU3jtU','NTx92chUHWnaOghX8D','RnhhPhbk5AxXKNYnBa','LTyQBIVuAEqEnylLX6','ONbD54kVCNmEFvrL34','lUGtJEx2g3V3eg1psy','mhokm7ds0v6EsNc8Li','sKZNRtPPYvfFinIAOe','Sz7hc494sJWNYfwf11']) const ids = array(6).map(i => list[Math.random() * list.length | 0]) while (true) { await Promises.delay(5000) let choice = list[Math.random() * list.length | 0] while(ids.includes(choice)) choice = list[Math.random() * list.length | 0] ids[Math.random() * ids.length | 0] = choice yield html`

` } }35:T7a9,previews([ { path: 'd/06db26c23d59b886', thumbnail: 'e1463a1be763f58c94f5657ae1c607e811d2dcdbb723465469a63122622ec623' }, { path: '@makio135/incoming-feeds', thumbnail: 'bcb521a555ad045a445a7689227b636247c6c3ff5dd7c10dbf0c810fea2f31f4' }, { path: 'd/61f6cca3e6176f41', thumbnail: 'deaa0e6f234073befd1e2f4c7994f1ad51dc91a2266d623a25b96f5214bcc843' }, { path: '@makio135/growing-spaces-the-animated-version', thumbnail: 'a7daff3e23e4e3d3401f19f567ebe40e65af1bfbf7f145ba688706d625cd8323' }, { path: 'd/88d8f4c89cb571db', thumbnail: 'b1fef3a4535b326de4af30742c1000dc866c609e83faa6125ccf05e7cf0dc01b' }, { path: 'd/0c593f0fd5c9f3bd', thumbnail: '199aafb01f9c765352c4911da6129b3b75850afb51c4fed6ddf1d6aeeb337356' }, { path: '@makio135/wavy-hexagon', thumbnail: '699a3c1e38b7384a71ea43965d00fbb13f9b2a0c0e7cd50261aff990a8681eec' }, { path: 'd/36cfe677762abc42', thumbnail: '2a6eb791068c57d46c61c72e5bdafd0d9cbe26078ed78144c2d4b23b9b6b3929' }, { path: '@makio135/dancing-alien', thumbnail: 'dc66bdfcef30b7212d118b76af900577fa6e9acb6f74dad5ea2e0b6bbcc551e7' }, { path: '@makio135/multi-scale-truchet-patterns', thumbnail: '0713b33227e2a197e149cf20ee1980298aec5f6db92204b6331c620c02ae5309' }, { path: 'd/d976ca86d3a771c2', thumbnail: '80c99f3d246c4bfda678853a1c295464f67faaa4db66f082261a39b67641ad30' }, { path: '@makio135/this-is-only-platonic', thumbnail: '7f237277bb44207b8cd0835145c735d28f5fa237fbfc24d4d30834b64d2a7096' }, { path: 'd/c6dfb48fc3789c54', thumbnail: '9b79ee7858b9e1609c0245b7161f82c05dc0c9b6066d29aa06e1a4db4c3c9b0b' }, { path: '@makio135/straight-lines-in-a-polar-world', thumbnail: 'ad6b7825d823e81ceb87e854ea98a06c8f2a02ea074cda9da1304185fbb99489' }, { path: '@makio135/noise-terrain', thumbnail: 'd816c2b645d6a5764f30b16aa22ab14ea55af97ca34e30af404032d52dd94011' }, ])36:T43e,md`One of the most fascinating thing with fragment shaders for me, is the ability to create worlds using [raymarching](https://www.shadertoy.com/results?query=raymarching). Following [a tutorial](https://thecodingtrain.com/CodingChallenges/145-2d-ray-casting.html) from [Daniel Shiffman](https://shiffman.net/) on [the coding train](https://thecodingtrain.com/) and [Sight and Light](https://ncase.me/sight-and-light/) article by [Nicky Case](https://ncase.me/), I started by [studying raycasting](https://observablehq.com/@makio135/hello-raycasting), then came across the [Literate Raytracer](https://tmcw.github.io/literate-raytracer/index.html) article from [Tom MacWright](https://macwright.com/) and [studied basics of raytracing](https://observablehq.com/@makio135/raytracing-studies) and finally articles from [Jamie Wong](http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/) and [Allan Zucconi](https://www.alanzucconi.com/2016/07/01/raymarching/) helped me get the logic of ray marching. I could finally tackle Inigo Quilez' resources on raymarching 🤯`37:T730,{ const list = shuffle(['1KCok3RXiaIdlAxgov','2da6s8WJE8QxOcNZ8h','4mVfUXj6vHxvic7S4G','A98c7SUDFl0qELBH8R','JuFjI6HvhfE5UTlYcu','aTfk9KfCJoqQ4nwqvp','cjPbDxLzxV4aLp0Mdf','ez0GKOrHuygrQEsTNw','5F6vE6OkNnWOmDH8Rj','Cl8NHgAB1cTnIuJRT5','ILsPA0muSfWtb0PTmz','J35hov9vRpN6nGvD0B','iDPCUwETplbSWJTMQp','JMYlvBuTEHXWHxCAiE','GRmgmqEbC3oMRL2uQq','h1ZpPhIOlYmJAQZkOu','LncBrrmfidggDLiQqC','Mo9gC2YlpvwrQVPNPN','MwfhSeiBSPfcAH1tJt','Oyzr2JT2oDA0dONgBn','SIVxR0PY7DhPc00QgT','SpM4K4V01gy3Pi4QqC','TlxWzgFj2i9nEWQWu6','TsDkBCMo5YxqN6D2CF','XRnJJPT06FghpsnQY7','lJUPs6rt3vCvOqvdsq','mT31r0GrKwYGx2BuW1','qUIUX9v1gU8M44Ldcz','t2G92hT1KTE0Dns1y1','yry5yabZuXZKSP881m','rbXLjjOugQuKlrUaWE','UHj8CzemCLvCRAl0eu','vAqnbRUhKQLTcVMiAj','NM6BHspjgtzWaKx1Wz','rTGathJCz7garvvtpn','ucb07i9l4USMHI1mS6','0BDlgEaPROx9THB93y','shMw1lJ2vYb67Qa5z5','nVqkWzPyAvN6rJ6K2Y','XuIDpM2u5xHYO4JLfh','YKCkAnpdUPWP3UCHxE','kXZsjZyXo8MMqRan3r','65Ux2YRjdtqgOlv2rp','kFPzhfxji4Sfw77kKn','3rIDduZbxTgDDuKuZQ']) const ids = array(6).map(i => list[Math.random() * list.length | 0]) while (true) { await Promises.delay(5000) let choice = list[Math.random() * list.length | 0] while(ids.includes(choice)) choice = list[Math.random() * list.length | 0] ids[Math.random() * ids.length | 0] = choice yield html`

` } }38:T997,previews([ { path: 'd/7953746d67543727?collection=@makio135/raymarching-loops', thumbnail: '7f77c6122da73996bd123b2cd9bcae6d92014fc1c059e747bef20d6e6aa7d2c0' }, { path: 'd/4a003c64b747b567?collection=@makio135/raymarching-loops', thumbnail: '3875098324089768d8fbde82168ea62639bbb10a5c8c6b0dd32a54a8c3bc6c45' }, { path: 'd/cd4af5d5df2197d2?collection=@makio135/raymarching-loops', thumbnail: '5ed3d92b0872ae7dbaaa292c6d8cbf06dd305dd26b8ee24f67fc6f97873f749c' }, { path: 'd/d287b92a247f1dba?collection=@makio135/raymarching-loops', thumbnail: 'c46422972795116aee4b6852235764cfafc5590fef659d7b70fb490702cac43c' }, { path: 'd/448309f979b16a86?collection=@makio135/raymarching-loops', thumbnail: 'c291cd71d8e14ee2bc587d00473a44b837a14b2c2a755098d8dda52969315048' }, { path: 'd/68d26b3caa02f40c?collection=@makio135/raymarching-loops', thumbnail: '8c7fc2cd873468b6d608c37dae62878fda88d6671eccdcbf2934f1dcebd0f584' }, { path: 'd/21321c711a88a62e?collection=@makio135/raymarching-loops', thumbnail: '3be69aeed80ebe4628ccc68258763b4d1fdc1af36bfc2f546eba62a49ef982e3' }, { path: 'd/003b794dbe0cb6a7?collection=@makio135/raymarching-loops', thumbnail: '15f1a7b7257364c4f6d773f1e4aaf137c2ce1d66fa9c98f431f6a4a0c6abfd6c' }, { path: 'd/bee6e154246add0d?collection=@makio135/raymarching-loops', thumbnail: '537167e7936b29fc42fb23df3decf54990de1c89869f84ec1b87deb5e384183a' }, { path: 'd/c78b7b1f786e00db?collection=@makio135/raymarching-loops', thumbnail: 'af6ac111a03c7d45df34b387a89cc1b3d3ad1e29c8be031a34d06e6fc8bbfdbe' }, { path: 'd/23fb75ffbc933d06?collection=@makio135/raymarching-loops', thumbnail: 'aaf6ec88285027706309d0ee1d8fae3f69e77c280ec6ad024de564a331895c13' }, { path: 'd/f235391b4944bf80?collection=@makio135/raymarching-loops', thumbnail: 'e8a3887257b37e2eeba2cdfff27f8504b0e92f17901394e5e28de03f3317c07b' }, { path: '@makio135/raymarch-x-bnbshader?collection=@makio135/raymarching-loops', thumbnail: '17574b92fbf1d239980df50217666cd025ea44a70a3c3f0903a12e3bd465d9a9' }, { path: 'd/7980fb3b9e50347d?collection=@makio135/raymarching-loops', thumbnail: 'c9b37f1f6053fbac3f242cb8628a87c88102a9f43b6e37e81e4df0398ebc668c' }, { path: 'd/bb775a529fe8608b?collection=@makio135/raymarching-loops', thumbnail: '5610032e328d305e56bdf6051976490049e0cb7396641053d7de0ef5b0478722' }, ])39:T51e,md`___ ## IV. Conclusion [Philippe Rivière](https://visioncarto.net/) has published [a notebook about the pros and cons of Observable](https://observablehq.com/@fil/the-observable-zealot), much better written than I could, and why it is such an interesting tool. All in all, Observable has been, and is, a platform like no other for me, whether for studying, practicing, learning, a medium with code literacy in mind showing side by side code and its result, designed for parametric practice (whether the inputs are data or code). The team and community are incredibly skilled, yet remain approachable, supportive, generously share a lot of knowledge, and care about the users 🙏 I've been able to improve a lot in a year thanks to Observable, and really believe in its potential. I also want to thank all the persons who helped me, shared their knowledge, either by writing articles, creating tools, taking time to answer questions, or in any other way, it's really meaningful 🖤 Thank you for reading me. Take care ✌️
Lionel Radisson [

](https://twitter.com/makio135) [

](https://instagram.com/makio135)`3a:[{"id":"98e75cf536f1077d6a748528034e34423ac8a0cefb149217826dbc0d9c662660f2c2078306c9e0784380f9b64ad3ac3db57253d46c715a5c09507891e22e091e","href":"https://static.observableusercontent.com/files/98e75cf536f1077d6a748528034e34423ac8a0cefb149217826dbc0d9c662660f2c2078306c9e0784380f9b64ad3ac3db57253d46c715a5c09507891e22e091e","name":"twitter-svgrepo-com.svg","type":"image/svg+xml","lastModified":1721954169517.196,"size":1888},{"id":"96414bc8b2475bdc4d894c864b6c2ebe36d51c23da789d8374e59265328bdd64ae2722366953e6572a63e6735fe385d9a8475c558f0ea90df5f22074c7742a89","href":"https://static.observableusercontent.com/files/96414bc8b2475bdc4d894c864b6c2ebe36d51c23da789d8374e59265328bdd64ae2722366953e6572a63e6735fe385d9a8475c558f0ea90df5f22074c7742a89","name":"instagram-svgrepo-com.svg","type":"image/svg+xml","lastModified":1721954169517.196,"size":1420},{"id":"bd922049bf7b38a1af5fdf7241bc6aa6675681244d2be0dbb0a39284f3788058fcce297dd0ac094c35fa5667c83cdc60020e86a46df1c6d78eb8f94448930a96","href":"https://static.observableusercontent.com/files/bd922049bf7b38a1af5fdf7241bc6aa6675681244d2be0dbb0a39284f3788058fcce297dd0ac094c35fa5667c83cdc60020e86a46df1c6d78eb8f94448930a96","name":"svgs.jpg","type":"image/jpeg","lastModified":1721954169517.196,"size":478278},{"id":"86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6","href":"https://static.observableusercontent.com/files/86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6","name":"save.png","type":"image/png","lastModified":1721954169517.196,"size":23176},{"id":"d5ee6644117c94781300bd901e27216d23f38e63dc8fce9e9147348a1abba593d3ec71cca2d2773ec4e17c333bd755c0af7d7918deec10c8930ffba952b934ab","href":"https://static.observableusercontent.com/files/d5ee6644117c94781300bd901e27216d23f38e63dc8fce9e9147348a1abba593d3ec71cca2d2773ec4e17c333bd755c0af7d7918deec10c8930ffba952b934ab","name":"motion.jpg","type":"image/jpeg","lastModified":1721954169517.196,"size":319956},{"id":"e95c7a3b047796c4b352f5f1b0f6af1d7b6b56a5d4da400745a781733481ef5faf81dfe5878d0531f4e7a2a5db7b5b707120457e7da5dcdcd79000d312aee49c","href":"https://static.observableusercontent.com/files/e95c7a3b047796c4b352f5f1b0f6af1d7b6b56a5d4da400745a781733481ef5faf81dfe5878d0531f4e7a2a5db7b5b707120457e7da5dcdcd79000d312aee49c","name":"shaders.jpg","type":"image/jpeg","lastModified":1721954169517.196,"size":328266}] 2f:{"id":"90a1786f0317d4d6","slug":null,"title":"Observable & creative coding","thumbnail":"8ae5b09ddb4e41174e4389db889242da96498827b665a6242f011129917eca61","access_level":"public","create_time":"$D2024-07-26T00:36:09.517Z","update_time":"$D2024-07-26T00:36:09.517Z","view_time":null,"first_public_time":"$D2024-07-26T00:36:09.517Z","has_unpublished_edits":null,"fork":{"id":"67b4cff7252b7c9a","slug":"creative-coding","title":"Observable & creative coding","owner":{"id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4d5c08f59b05b9b7","login":"ajn404-ws","name":"ajn404's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/36cda133bf22b8554fca58fc53bc6ebf5ac45186efb84939eba58a62552ebece","tier":"starter_2024"},"version":2095,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56e5eafb29e557a3","login":"ajn404","name":"ajn404","avatar_url":"https://avatars-next.observableusercontent.com/63c4406017cfb13574d0c06796b0b06bf50841dde50b81a03781afe20604931b","tier":null}],"members":[{"type":"individual","id":"56e5eafb29e557a3","login":"ajn404","name":"ajn404","avatar_url":"https://avatars-next.observableusercontent.com/63c4406017cfb13574d0c06796b0b06bf50841dde50b81a03781afe20604931b","tier":null,"role":"editor"},{"type":"team","id":"4d5c08f59b05b9b7","login":"ajn404-ws","name":"ajn404's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/36cda133bf22b8554fca58fc53bc6ebf5ac45186efb84939eba58a62552ebece","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Observable & creative coding","cells":[{"id":0,"value":"md`# Observable & creative coding`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"html`

Hello, my name is…

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"toc('h2:not(.not-in-toc)')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`___\n## I. Generating SVGs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"svgThumbnails = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`After my first tests trying things randomly with partial results, I decided to read the [Five-Minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction) and [Observable's standard library](https://observablehq.com/@observablehq/standard-library) (I should definitely have started there 😅). I discovered that Observable provides several [tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) to render HTML, MarkDown or LaTex, as well as one for SVG that can be used this way:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"html`

\n And Observable provides very usefull features like built-in saving SVG 🤩
\n Open the cell menu in the left margin to download any SVG cell as either SVG or PNG.\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`So, making use of this method, [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) and [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE), we can quickly generate many elements:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`I had previously experimented with libraries to [create and do some motion with SVG](https://codepen.io/MAKIO135/pen/KrZEak), but I love to learn how things work and this technique seemed quite interesting. So, inpired by the SVG works and resources of [Sarah Drasner](https://sarah.dev/), [Nadieh Bremer](https://www.visualcinnamon.com/), [Shirley Wu](https://sxywu.com/), [Sarah Soueidan](https://sarasoueidan.com), [Mike Bostock](https://observablehq.com/@mbostock) and more, I decided to give it a try and spent some time on [MDN's SVG documentation](https://developer.mozilla.org/en-US/docs/Web/SVG), discovered a lot about the different elements/attributes and explored, a lot 😁`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"md`Have a look at the notebooks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`I was struck by the ease that Observable brings to quickly experiment, iterate, or diverge on different ideas. Notebooks [are versioned](https://observablehq.com/@observablehq/history) and [can be forked](https://observablehq.com/@observablehq/fork-share-merge), any notebook at any point can be a template to start from 🤩`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`Have a look at [the whole collection](https://observablehq.com/collection/@makio135/generating-svgs).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`Along the way, I found myself repeatedly in need of some helpers and [Observable lets you quickly reuse code by importing named cells from other notebooks](https://observablehq.com/@observablehq/introduction-to-imports), I thus started creating tool notebooks that have grown alongside my experiments:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"await visibility(), notebook({\n title: '@makio135/give-me-colors',\n thumbnail: '4ee1fff0f04f42742119faf87fcdccab59667b73fa3fbfd0b370aaab04812ccc',\n desc: md`Working with colors can be hard (for me at least), this notebook provides tons of palettes and scales, utilities for color conversion, extracting colors from images,… 🎨`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"await visibility(), notebook({\n title: '@makio135/utilities',\n thumbnail: '067d9ba68bbe598e66050a705a4d772fcb57eb948723a54da0cc41dadc0ba8f0',\n desc: md`A collection of snippets for working with arrays, math, randomness, animation and geometry, like line/ray/segment intersections, and a Polygon class with parametric hatching and boolean operations. 🛠`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"md`In addition to imports, Observable’s [\\`require\\`](https://observablehq.com/@observablehq/introduction-to-require) lets us use thousands of open-source JavaScript modules in your notebooks, I was able to use my good old [PVectorjs](https://github.com/MAKIO135/pvectorjs) package and experimented with a lot of different packages without having to setup anything.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"notebook({\n title: '@makio135/zelda-wfc',\n thumbnail: '11ab9423153bf0d9d43513fea13b10fa8663efa3baacff13214f228fc51a3f11',\n desc: md`Playing with [Wave Function Collapse](https://github.com/mxgmn/WaveFunctionCollapse) by generating variations of Zelda maps. \n(You may also like [@makio135/super-mario-wfc](https://observablehq.com/@makio135/super-mario-wfc) 😁)\n\nUsing [Kevin Chapelier](https://twitter.com/kchplr)'s JS port: https://github.com/kchapelier/wavefunctioncollapse`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"value":"md`And there even exists a [Module require debugger notebook](https://observablehq.com/@observablehq/module-require-debugger) ✨ \nThis is my starting point whenever I want to try a new one 🙃`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`### Penplotter & more\n\nI work in a [pedagogical fablab](https://makerslab.em-lyon.com/) and this year we equiped ourselves with [AxiDraws SE/A3](https://www.axidraw.com/) by [Evil Mad Scientist](https://twitter.com/EMSL), one of them arrived at home during the first lockdown and so I continued to do SVGs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"md`Have a look at [the whole collection](https://observablehq.com/collection/@makio135/plotter).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"md`For some, I had to rework paths before sending them to the plotter, I used [Inkscape](https://inkscape.org/) to cut paths, it supports SVG features that Illustrator doesn't like complex \\`stroke-dasharray\\`, and handles more elements. I'm sending SVGs to the plotter with [Saxi](https://github.com/nornagon/saxi) by [Jeremy Rose](https://twitter.com/nornagon) in order to filter paths by color, and it runs nicely on [Raspberry Pi](https://www.raspberrypi.org/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`Working with machine outputs in mind gave me new constraints leading to intersting challenges, hence the [Polygon class](https://observablehq.com/@makio135/utilities) with parametric hatching and boolean operations. And seeing your work on paper can be so satisfying 😁`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"await visibility(), tweets('1253334618243125256', '1253243745518190592')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`One of the nice aspects of working with vector formats is that you can use them to control a lot of different machines, I was able to experiment with embroidery and laser engraving using this technique:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"await visibility(), tweets('1331901593063657472', '1332428849691439107')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"md`This practice and my pedagogical activity led me to write some resources about this subject:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"notebook({\n title: '@makio135/getting-started-with-ln',\n thumbnail: '05212de0f08ea576e407f9e3142b1477bd6530973d9500ef3ea947335b3f2d5d',\n desc: md`An introduction on how to get started with ln.js, [Brandon Dail](https://github.com/aweary)'s [JavaScript port](https://github.com/aweary/ln.js) of the incredible [Michael Fogleman](https://www.michaelfogleman.com/)'s [ln, The 3D Line Art Engine](https://github.com/fogleman/ln).`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"notebook({\n title: '@makio135/hello-svg5',\n thumbnail: 'f883bad7e6fd69b8904b7d743a1fdf5b37abc063706313f9befb561599a03939',\n desc: md`svg5 is a beginner friendly JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on [Processing](https://processing.org/)/[p5js](https://p5js.org) goals and syntax. \nhttps://github.com/makio135/svg5.js`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"md`___\n## II. Motion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"motionThumbnails = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"md`After some time creating SVGs, I wanted to animate them. I knew that [Observable uses generators](https://observablehq.com/@observablehq/introduction-to-generators), so I tested to animate some of them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"await visibility(), // cell starts running when entering the viewport @observablehq/awaiting-visibility\nsvg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`I felt that my approach wasn't really suited for complex animations, so I started using Observable's \\`DOM.context2d\\` method to play with the [canvas 2D API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) (and wished the APIs were more uniform 😕), then quickly switched to [p5js](https://p5js.org/) for faster iteration:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"await visibility(), notebook({\n title: '@makio135/p5',\n thumbnail: '51f8f859853fac85562ed00526a1282ba72d050d97a1637185e61e6abb1cf0d7',\n desc: md`A simple helper to run p5js sketch in Observable based on [Mark Webster](https://twitter.com/motiondesign_01)'s [Setting up P5js](https://observablehq.com/@motiondesign_01/setting-up-p5js).`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`And there I was with a setup and tools I've been familiar with for a long time: I learned coding with [Processing](https://processing.org/) 10 years ago, then came to JavaScript via [processing.js](https://github.com/processing-js/processing-js) in 2012 (at that time, I was shamelessly mixing Processing's Java syntax and JS to try things in the browser, the code was ugly 😱 but it did the job, see [HTML5 Web Audio API with ProcesssingJS](https://www.openprocessing.org/sketch/77118) for example).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"await visibility(), p5(sketch => {\n sketch.setup = () => {\n sketch.createCanvas(width, 300)\n }\n \n sketch.draw = () => {\n sketch.background(0)\n sketch.noStroke()\n sketch.drawingContext.globalAlpha = .6\n \n const n = 20\n for(let i = 0; i <= n; i++) {\n sketch.fill(`hsl(${i/n * 360 | 0}, 100%, 50%)`)\n const x = sketch.width/4 + i/n * sketch.width/2\n const y = 150 + Math.sin(i/n * Math.PI * 2 + sketch.millis()/500) * 45\n const r = 55 + Math.cos(i/n * Math.PI * 2 + sketch.millis()/1200) * 45\n sketch.circle(x, y, r * 2)\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`It was now pretty easy for me to experiment with motion on Observable, combining my tools, imports, NPM packages,… but I was still missing a way to record the results of these experiments. I remembered about [Dave Whyte](http://www.beesandbombs.com/), aka [beesandbombs](https://twitter.com/beesandbombs), sharing [his template to create GIFs with Processing](https://gist.github.com/anonymous/10675250) with chromatic aberration and motion blur, and thought I would try to port it to the web using p5js & GLSL for faster post-processing.\n\nAfter some trials and help from the incredibly skilled [Observable community](https://talk.observablehq.com/) 🖤, I ended up with the following tool:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"await visibility(), notebook({\n title: '@makio135/bnb',\n thumbnail: 'd54e49dd61b1bde26e3bd92c9cdf34c51ce45f142c8c563010a1c83819830aba',\n desc: md`An utility to create loops using [p5js](https://p5js.org/) to quickly shape ideas in 2D/3D, based on [Dave Whyte (@beesandbombs)](http://www.beesandbombs.com/)'s template ✨ \nOptional parameters are used to switch between 2D/WEBGL, type of export(gif/mp4/webm), number of frames, fps, add motion blur/chromatic aberration,… 🎛`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"await visibility(), bnb({\n w: width, \n h: 300,\n numFrames: 120,\n fps: 30,\n record: true,\n video: 'mp4',\n \n draw: (sketch, time) => {\n sketch.background(0)\n sketch.noStroke()\n sketch.drawingContext.globalAlpha = .6\n \n const n = 20\n for(let i = 0; i <= n; i++) {\n sketch.fill(`hsl(${i/n * 360 | 0}, 100%, 50%)`)\n const x = sketch.width/4 + i/n * sketch.width/2 + Math.sin(i/10 + time * sketch.TAU) * 50\n const y = 150 + Math.sin(i/n * Math.PI * 2 + time * sketch.TAU * 2) * 45\n const r = 55 + Math.cos(i/n * Math.PI * 2 + time * sketch.TAU) * 45\n sketch.circle(x, y, r * 2)\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"md`This tool evolved with my needs, adding support for a \\`loop\\` parameter to record multiple loops or \\`preview\\` to view export after a few frames, \\`shaderPass\\` for adding GLSL post-processing, WEBM and MP4 video export,…\n\nAfter reading every [tutorials from Etienne Jacob](https://necessarydisorder.wordpress.com/), I was able to quickly explore and create many loops using this tool.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"md`Here are some exports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"md`And here are some of the notebooks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"md`I had often used the canvas to create realtime generative graphics, working with that tool was kind of a trade off: the output itself (the exported loop) was not exploring the possibility space anymore but I was being able to create more complex pieces with a fluid non-realtime output 🙂`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"md`Have a look at [the whole collection](https://observablehq.com/collection/@makio135/loops).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"md`In addition to some motion snippets in [@makio135/utilities](https://observablehq.com/@makio135/utilities), I wrote this little helper to train my [shaping functions](https://thebookofshaders.com/05/) skills 🥋`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"await visibility(), notebook({\n title: '@makio135/p5plot',\n thumbnail: '4471c62ad2c93c33f398605a9b0ac8f911cb2e008146b4a934f9b224de793ca0',\n desc: md`A small utility to visualize ${tex`y=f(x)`} functions, using [p5js](https://p5js.org/).`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"md`___\n## III. GLSL Shaders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"shadersThumbnails = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`I had been interested in shaders for a few years, always looking at work from [Thomas Hooper](http://stainlessvision.com), [Connor Bell](http://connorbell.ca/), [Inigo Quilez](https://www.iquilezles.org/) and others with envy to learn how they do, but never went much further than the Hello World or basic image filtering experiments. \n\nI started once again with MDN's documentation, read the [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial) and learned how to create a simple [WebGL playground](https://observablehq.com/@makio135/webgl-playground) to run fragment shaders from scratch. From that, I created a new utility to start practicing:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"notebook({\n title: '@makio135/hello-fragment',\n thumbnail: '4ca4db3cff2a6c60333ac22fbd8f3bbc9a4bf6e218965a8fd9e99355d03132c5',\n desc: md`An simple utility to play with fragment shaders. \nProvides the following uniforms: \\`vec2 u_resolution\\`, \\`vec2 u_mouse\\`, \\`float u_time\\` and optional \\`sampler2D u_texture\\`.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"md`With this setup, I could now quickly study resources and iterate on them.\n\nI started by reading [the book of shaders](https://thebookofshaders.com/) from [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) and watched a lot of [Martijn Steinrucken](https://twitter.com/The_ArtOfCode)'s videos on his channel [The Art of Code](https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg)✨, reproducing many of them [here](https://observablehq.com/@makio135/glsl-lessons).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"md`I was very interested in [Signed Distance Functions](https://thebookofshaders.com/07/) and had bought the beautiful [Pixel Spirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) also by [Patricio Gonzalez Vivo](https://twitter.com/patriciogv) a few years ago, so I did the following series of notebooks to study them 👇`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"previews([\n {\n path: '@makio135/pixelspirit-for-observable',\n thumbnail: '52ce3cafcb8c7a875fadf37026d5c324b12f157bc98b08502c228851cd409c42'\n },\n {\n path: '@makio135/pixelspirit-deck-00-series',\n thumbnail: '8277ba645a3fb9fe85047c174dc1f5647a2a1b862a4ec2d7f7ba91e14fc513dd'\n },\n {\n path: '@makio135/pixelspirit-deck-10-series',\n thumbnail: '237a14981e92f39613092796de3c3ce5e023b38fe320f4f28e74469e5f47b5a3'\n },\n {\n path: '@makio135/pixelspirit-deck-20-series',\n thumbnail: 'dbb2cca6ada12b611266c1dbd4b139b98fcabed7ce134118824606b26480ab83'\n },\n {\n path: '@makio135/pixelspirit-deck-40-series',\n thumbnail: '68079f12f07b9ad43f64ac3cc07e5f215c4be6ba1076ec2a2a93224b829dc931'\n },\n {\n path: '@makio135/pixelspirit-deck-30-series',\n thumbnail: '14403693f73170c465ffc6006759bb96f662cee2aeceb309e36a2062438a3705'\n },\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`### Raymarching`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"md`And as usual, I made myself an helper to experiment on this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"notebook({\n title: '@makio135/raymarch',\n thumbnail: '39b74305d6b55a0dc304f1d0f5051507a07dc321a1072d93e8825e8f4eb5e60c',\n desc: md`Based on Inigo Quilez's [raymarching primitives scene](https://www.shadertoy.com/view/Xds3zN), the \\`raymarch\\` utility provides a customizable scene for rendering scenes based on 3D Signed Distance Functions. \nThe \\`raymarch\\` helper is based on the \\`fragment\\` helper from [@makio135/hello-fragment](https://observablehq.com/@makio135/hello-fragment).`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1846,"value":"await visibility(), raymarch({\n antiAliasing: 2,\n sceneSDF: `\n${iqSDF.sdSphere()}\n${iqSDF.sdBox()}\n${iqSDF.opSmoothUnion()}\n${iqSDF.opSymXYZ()}\n${glslSnippets.rotate3D()}\n\nvec2 sceneSDF(vec3 p) {\n float d = sdBox(p, vec3(.6));\n p *= rotate3D(u_time, vec3(1, 0, -1));\n d = opSmoothUnion(d, sdSphere(opSymXYZ(p) - vec3(1.), .5), 1.1);\n return vec2(d, u_time * 5.);\n}`})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"md`As I wanted to create new loops using fragment shaders to test my recent learnings, I, once again, wrote a new tool based itself on [@makio135/bnb](https://observablehq.com/@makio135/bnb) 👇`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"notebook({\n title: '@makio135/bnbshader',\n thumbnail: 'c6c825c5905f1e86f00590652090cb7cc5f79c180a85c17d2ebea6682a823499',\n desc: md`A small utility to create loops using GLSL fragment shaders and export them as GIF, WEBM or MP4. \nBased on [p5js](https://p5js.org/) and [@makio135/bnb](https://observablehq.com/@makio135/bnb).`\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2025,"value":"md`Here are some exports made with my \\`raymarch\\` and \\`bnbshader\\` utilities:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2005,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2029,"value":"md`And here are some the notebooks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"md`I also learned a lot from [shadertoy](https://www.shadertoy.com/)'s community which is incredibly talented and provides a lot of commented works. I learned some tricks from [@FlopineYeah](https://twitter.com/FlopineYeah) and [@evvvvil](https://twitter.com/evvvvil) on their Twitch. \nThe [Cookie Collective](https://cookie.paris) team has a welcoming Discord, and many others on Twitter like [@karlikpj](https://twitter.com/karlikpj), [@gaziya](https://twitter.com/gaziya), [@h_doxas](https://twitter.com/h_doxas), [#つぶやきGLSL](https://twitter.com/hashtag/%E3%81%A4%E3%81%B6%E3%82%84%E3%81%8DGLSL),…`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1789,"value":"md`Have a look at [the whole collection](https://observablehq.com/collection/@makio135/raymarching-loops).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"hr()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1546,"value":"md`Along my studies, I wrote a few notebook full of helpers to write my shaders:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"notebook({\n title: '@makio135/iq-sdf',\n thumbnail: 'd33c1f14d38a23ea42c7d0e2c7f972f092fefee4e0ef0dcf0a527a59f59581c1',\n desc: md`This notebook started as a way to study [Inigo Quilez](http://iquilezles.org/)'s articles about [3D Distance Functions](https://iquilezles.org/www/articles/distfunctions/distfunctions.htm) and [2D Distance Functions](https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm), I'm now using it for all my raymarching loops :)`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"notebook({\n title: '@makio135/motion-toolkit',\n thumbnail: '773b6fd104e40215ccb8a11056e3827ad80ec0a49fa73263433fedbb647abe22',\n desc: md`A study of [@kynd](http://www.kynd.info/)'s animation snippets from his [motion toolkit]() examples on [the book of shaders](https://thebookofshaders.com/) 🎬`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"notebook({\n title: '@makio135/glsl-snippets',\n thumbnail: 'f98a6ab87b939080b33b33022e87dcafd409292f38c6d6f84dfef0264480fb8f',\n desc: md`A collection of glsl snippets from various sources like [@doxas](https://wgld.org/)' [twigl](https://twigl.app/) / [mercury](https://mercury.sexy/)'s [hg_sdf library](https://mercury.sexy/hg_sdf/), [glslify](https://github.com/glslify/glslify) and more.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"html`

Helpers and Imports

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"import {array, shuffle} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"import {p5} from '@makio135/p5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"import {bnb} from '@makio135/bnb'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1805,"value":"import {fragment} from '@makio135/hello-fragment'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"import {raymarch} from '@makio135/raymarch'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1842,"value":"import {iqSDF} from '@makio135/iq-sdf'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"import {glslSnippets} from '@makio135/glsl-snippets'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"import {toc} from '@bryangingechen/toc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"import {tweet} from '@mbostock/tweet'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"tweets = (...ids) => html`

\n ${ids.map(id => tweet(id))}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"hr = () => html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"notebook = ({title, thumbnail, desc}) => html`

\n \n

${title}

${desc}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`\\`preview\\` and \\`previews\\` are based on https://observablehq.com/@d3/gallery`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function previews(notebooks) {\n return html`

${notebooks.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"preview = ({path, thumbnail}) => html`\n

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"