Pens from Karim Maaloul https://codepen.io/Yakudoo/ en nospam@codepen.io Copyright 2024 2024-03-12T22:18:37-07:00 Simple Reflector https://codepen.io/Yakudoo/pen/VwqGpNd https://codepen.io/Yakudoo/pen/VwqGpNd Karim Maaloul

See the Code - See it Full Page - See Details

]]>
Simple Reflector 2024-03-06T13:01:23-07:00
Ink and Water simulation https://codepen.io/Yakudoo/pen/bGOMJPw https://codepen.io/Yakudoo/pen/bGOMJPw Karim Maaloul

See the Code - See it Full Page - See Details

A fluid simulation experiment using frame buffer objects and custom shaders. This pen is a totally inaccurate attempt to simulate ink diffusion when touching water. Press the mouse to increase the thickness of the brush. Also try to modify the settings in the top right panel to simulate different water densities and textures.

]]>
Ink and Water simulation 2023-11-02T19:54:56-07:00
Blurred reflector https://codepen.io/Yakudoo/pen/rNoJZZQ https://codepen.io/Yakudoo/pen/rNoJZZQ Karim Maaloul

See the Code - See it Full Page - See Details

]]>
Blurred reflector 2024-03-06T12:59:48-07:00
Elastic player control https://codepen.io/Yakudoo/pen/dywdjwQ https://codepen.io/Yakudoo/pen/dywdjwQ Karim Maaloul

See the Code - See it Full Page - See Details

]]>
Elastic player control 2024-03-06T13:02:31-07:00
Skating bunny https://codepen.io/Yakudoo/pen/poqazQo https://codepen.io/Yakudoo/pen/poqazQo Karim Maaloul

See the Code - See it Full Page - See Details

Skating bunny is a mini game (no score, no time, no leaderboard) just the cutest rabbit around in need of carrots. Move the mouse to orient your best friend and click to make him jump and grab some vegetables. made with three.js and custom shaders.

]]>
Skating bunny 2024-03-12T22:18:37-07:00
split text https://codepen.io/Yakudoo/pen/BGRmxN https://codepen.io/Yakudoo/pen/BGRmxN Karim Maaloul

See the Code - See it Full Page - See Details

]]>
split text 2018-11-19T08:59:39-07:00
Hide - show transition https://codepen.io/Yakudoo/pen/MzJZdW https://codepen.io/Yakudoo/pen/MzJZdW Karim Maaloul

See the Code - See it Full Page - See Details

]]>
Hide - show transition 2018-11-19T08:59:49-07:00
Slideshow https://codepen.io/Yakudoo/pen/EONGax https://codepen.io/Yakudoo/pen/EONGax Karim Maaloul

See the Code - See it Full Page - See Details

]]>
Slideshow 2018-11-19T08:58:57-07:00
Halloween https://codepen.io/Yakudoo/pen/jegOQd https://codepen.io/Yakudoo/pen/jegOQd Karim Maaloul

See the Code - See it Full Page - See Details

I used Blender3D to make a halloween illustration. I exported a depth map and a normal map of the same picture and used all 3 images as textures in a shader to bring some life to the environment. The depth map is used to add a displacement effect and simulate depth when moving the mouse around. It's also used to mask some parts of the image to add an animated fog and colors. The normal map is used to modify the light.

]]>
Halloween 2018-11-04T22:29:42-07:00
Hover effect https://codepen.io/Yakudoo/pen/bmEGBY https://codepen.io/Yakudoo/pen/bmEGBY Karim Maaloul

See the Code - See it Full Page - See Details

]]>
Hover effect 2018-11-19T08:59:05-07:00