Deniz Kayar presents
Subimago

0

Let it rain
IMAGE

Cylinders (drops) colliding with a plane and initiating scaling rings (ripples) with Three.js. For the animated rings I first thought It would be a good idea to regenerate the geometry with different innerRadii/outerRadii. But that lead to decreasing frame rates over time. Instead I am now modifying the existing geometry by transforming the individual vertices.

0

Image Exploder
IMAGE

Drag and Drop an image file to transform it into particles. The bigger the image, the longer it takes to be computed. Inspired by an artwork called Perceptual Shift that has been made by Micheal Murphy.

0

Broken Circles Spinning
IMAGE

Just some broken circles on a canvas. Inspired by an @archillect posting.

0

This Grid Is Trippy
IMAGE

This experiment is inspired by a post on reddit, where someone asked for a VR implementation of a gif. It think it was worth the effort. Pretty nice effect.

0

Trail Game in Space
IMAGE

This a reinterpretation of the videogame classic Snake, which has been popularized by early Nokia mobile phones. Work in Progress.

0

This Tree Will Grow
IMAGE

A recursively generated tree inspired by a vine from Loren Schmidt. The single branches are made up of polygons drawn on a html canvas. Still needs some tweaks and fixes on the branch joints but i think this experiment is round enough to get public.

You'll never get the same tree because the branches will grow in random directions. Use the controls to manipulate the tree generation parameters. Start over with a new tree by clicking on regrowTree. Be careful with the treeDepth parameter because it controls the number of recursions and therefore the computation time.

1

Trails with html5 canvas
IMAGE

Here you can see little entities with trails which follow the mousepointer. Press the left mouse button to spawn additional entities. Start and stop the animation by pressing Enter. To delete all entities press Delete. Press Space to start over with a new set of entities. Inspired by Steering Behaviors For Autonomous Characters by Craig W. Reynolds.

I use the html 5 canvas element for 2D rendering. To compute a trail I buffer the positions of a moving entity over time and draw a polygon on top of those positions. The polygon becomes gradually thinner so that it gets the desired trail look. To draw a polygon i use the canvas procedures beginPath() and lineTo().

Hit Space to generate new random entities and hit Enter to stop the animation.

0

Shifting Colors with GLSL
IMAGE

This experiment has been made with plain WebGL and GLSL. The colors are slowly shifting.

1

Frame Buffer Objects with Three.js
IMAGE

Experimenting with Frame Buffer Objects in Three.js. This one is based on one of Mr. Doobs FBO examples.

2

First WebGL steps with Three.js
IMAGE

This is a Three.js test with rotating objects modeled with blender. Drag with left mouse button to orbit, right mouse button to pan and middle mouse button to zoom. The ground plane has a normal map material. I used the tool njob for the normal map generation.