interactions, experiments, 3d fun + source code

c_o (de)

hover experiment — made in react-three-fiber.

and react being react, it's composable. you could drop a whole app in it and it would have that effect.

GitHub - thmsbfft/pressanykey: 〰️  A drawing app.

Musical Words

Face landmark detection with particles : 

( Heavy like always )

from reddit, "how can I arrange my images in circular manner just like clouarchitects dot com"

it's a 10 minutes draft, just a couple of lines, but could be extended and optimized further

Morphing Effect with Canvas2D | Codrops

This demo used custom simplex noise curve that's used to update a tube geometry every frame by @soju22



#threejs #webgl #creativecoding

Creative-Coding Archive • Patrik Hübner - Generative Design and Creative Coding for brands

Video Music

WebGL Fluid Simulation With Your Text

Recreating the Gradient Mask Hover Effect from Evervault | Codrops

I added a new sketch to this project. 

It is an interactive Earth. If you hover the cursor over the particles, they will change color.

link:
code(open source):

CPC Humor Me

Did not expect a cloth sim when I opened this site by @laserberg. This is sick.



#threejs #webgl #creativecoding

Seeded Procedural Music Generator

Scroll waves w/ GSAP Observer

Small experiment to try to reproduce @muratpak 's "Lim Seq" artwork

I had tried this a few years ago but the results were quite disastrous 🥲
This time, however, using an analytical approach for AO and shadows, I got close to it

👉

#threejs #webgl

TIL Joe Goldberg made programming YouTube videos on the side

Reading Format Toggle 📕🎧

This almost looks like a depth of field but it's just a css blur at the top. Really simple but amusing demo by @lichingchester 



Not sure if performance-wise it's good to use css blur on top of a canvas, though 

#threejs #glsl #creativecoding

Shipping Ship: Behind the Particle Shader Effect for Vercel’s Conf | basement.studio

Graphic for the <n>STIF</n> platform by <n>Bold Base Media</n> for its launch event in New York.

Monospace (ASCII art generator)

also some time ago made myself a slider from scratch because all the ones I tried I kinda hated and I finally get to use it really like it (slider demo link in the comments)

Shader Moon

Many people are asking how I did the displacement in my previous post. Here are the barebones without the animation:#threejs #r3f @pmndrs @threejs

Sticky/Stretching Cursor
@CodePen

Inspiration 👉

GitHub - guilhermerodz/luna: Shiny visual effects for your design system. In less than a minute.

CSS Tip 📖

Use CSS shape-outside to wrap text around shapes

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%));
}

A <n>Dice Roller</n> UI created by game developer <n>Ksenia Kondrashova</n>.

Another re-do of an old work. Before we rolled the dice and checked the top side of each one. Now you can just preset the final result, my sneaky friends 😏

Live demo & source code:

Made with @threejs and cannon-es
Hosted on @CodePen

There're few other…

Dev life 101: you are testing things, you do mistakes and then you create some nice crazy visuals, you are happy.  

Classic #webgl and #threejs 👀🔊✨

* 
#shaders #postprocessing #glsl #creativedev