Last updated:
Seamless circle
Here is a little trick when you try to render a full loop of circles without having the last circle to overlap the first one 🔄
— Louis Hoebregts (@Mamboleoo) December 9, 2021
You can check the live demo made with @p5xjs and @greensock on @CodePen ✨https://t.co/yjoGurupyj pic.twitter.com/5ERdVf7aXQ
CodePen
See the Pen Seamless circle - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
Blobby deer
Here is a 80 seconds video to breakdown my #SVG animation 🦌🎥
— Louis Hoebregts (@Mamboleoo) August 2, 2021
1. Load an .obj file in a @threejs scene #WebGL
2. Place 1000 points on the surface of the model
3. Render the points using the SVG Renderer
4. Import the SVG and animate it using @greensock
5. Voilà ✨ pic.twitter.com/apPtjgRMcW
CodePen
See the Pen Blobby deer - ThreeJS to SVG render + GSAP by Louis Hoebregts (@Mamboleoo) on CodePen.
Apple Keynote
Here is a breakdown of that #AppleEvent animation 🍏https://t.co/J0xkmPI0k7
— Louis Hoebregts (@Mamboleoo) April 22, 2021
I hope it can help some of you to get started with similar animations ✌ #JavaScript #SVG #Canvas
Poke me here 👇 or DM 📩if you have more questions! https://t.co/z2WQ0BXXkq pic.twitter.com/4QpaBbVnsl
CodePen
See the Pen Apple Keynote animation - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
Flow of dashed lines
How to create a flow of dashed lines in 5 steps?
— Louis Hoebregts (@Mamboleoo) January 5, 2021
First tutorial of 2021🥳
If you have more questions, don't hesitate to poke me🙋#generative #creativecoding #canvasSketch pic.twitter.com/NLinO8255y
CodePen
See the Pen Color wave - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
3D Text in Canvas
After 2 months of lockdown I finally found the energy to create a new #generative tutorial🏆
— Louis Hoebregts (@Mamboleoo) May 12, 2020
If you are wondering how step 2 is made, you can use the `.getPointAtLength()` method on your #SVG paths!💡
First time using canvas-sketch by @mattdesl to render the video, love it😊 pic.twitter.com/info9s3XtX
Blob
New week, new #generative tutorial using simplex noise🎉
— Louis Hoebregts (@Mamboleoo) March 30, 2020
You can simulate a 3D blob in @p5xjs by drawing layers on top of each other🤯
Live version & code on @CodePen👇https://t.co/opFN5a4sDP pic.twitter.com/9xsgz2t1RA
CodePen
See the Pen Blob - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
Spirograph
With our schools down, it's time to bring back some memories🎒
— Louis Hoebregts (@Mamboleoo) March 17, 2020
Do you remember those flowers we used to make with our compass during math lessons? 🌸🌺
Here is a #generative version of that using @p5xjs!
Live version & code on @CodePen 👇https://t.co/YzIFONNJ1A pic.twitter.com/ISrJ7I3F43
CodePen
See the Pen Math Flower - How To by Louis Hoebregts (@Mamboleoo) on CodePen.
Image flow
Ever wanted to transform a painting into a field of particles? 🖼️
— Louis Hoebregts (@Mamboleoo) February 4, 2020
No? Never mind, here is a tutorial for you😘
Live demo available here 👇https://t.co/1lxgQ5USR9 #generative #tutorial @CodePen @p5xjs pic.twitter.com/OzjgGQQnGG
CodePen
See the Pen Flowing Image - How To by Louis Hoebregts (@Mamboleoo) on CodePen.
Random walkers
🗓️New week, new tutorial!
— Louis Hoebregts (@Mamboleoo) January 20, 2020
👣How to make a random walkers poster?
Check the live version on @CodePen to see uncompressed quality https://t.co/6WgBRk6TsW #generative #tutorial @p5xjs pic.twitter.com/AueUKQ7IWe
CodePen
See the Pen Walkers - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
Constellations
✨Look! A new 'how to' short tutorial to generate a pattern of connected vertices✨ #generative #constellations
— Louis Hoebregts (@Mamboleoo) January 6, 2020
⬇ Check the code using @p5xjs on @CodePen ⬇https://t.co/9gK4cJaxtD pic.twitter.com/IWuMq3ttZ9
CodePen
See the Pen Connected Vertices - How to by Louis Hoebregts (@Mamboleoo) on CodePen.
Waves
Curious to know how that Waves animation was made?
— Louis Hoebregts (@Mamboleoo) December 9, 2019
Check the video or the live version on @CodePen to see the magic behind it ✨🌊 #sine #generative https://t.co/ak87XiusU3 https://t.co/c4sY49BeAw pic.twitter.com/gRpVAMNa1V
CodePen
See the Pen Waves - How To by Louis Hoebregts (@Mamboleoo) on CodePen.