Thread by @enjalot, going live now!learning to make 3D loops in #p5js #threejs [...]

Ian Johnson 💻🔥

enjalot

Read on Twitter

going live now!
learning to make 3D loops in

#p5js

#threejs

@observablehq
http://twitch.tv/makio135 https://twitter.com/MAKIO135/status/1356558003353378816

starting with the "bnb" utility modeled after the legendary @beesandbombs

https://next.observablehq.com/@makio135/bnb

this makes it super easy to make a #p5js sketch loop with motion blur and chromatic aberration in the browser

a basic #p5js setup is super simple!
https://next.observablehq.com/@enjalot/learning-bnb

now @MAKIO135 is taking us from moving a single circle around to generating many on http://twitch.tv/makio135

some dancing circles demonstrate the basics of #p5js looping

next up is more bnb features like chromatic aberration and camera controls!
http://twitch.tv/makio135

just 3 options turn this:

into this!
http://twitch.tv/makio135

chromaticAberration: 4,
shutterAngle: 6,
samplesPerFrame: 32,

you can easily add a shader pass to each frame for even more interesting effects!

that's it for the intro to #p5js bnb tool
https://next.observablehq.com/@enjalot/learning-bnb

http://twitch.tv/makio135

now we are switching to #threejs and learning about materials
https://observablehq.com/@makio135/matcaps

http://twitch.tv/makio135

and now @MAKIO135 just published his latest tool: bnbThree!
https://next.observablehq.com/@makio135/bnbthree

making it easy to get those same sweet motion effect loops with the #threejs API!

http://twitch.tv/makio135

rolling the dice!

http://twitch.tv/makio135

adding a texture we had a fun glitch

http://twitch.tv/makio135

i'm going a little off the rails

http://twitch.tv/makio135

You can follow @enjalot.

Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: