Building a Portfolio Site With Three.js

Three.js is awesome 3D library that I play with since it came out. Building little experiments, playing with shaders etc are always fun. Why not building your own portfolio by using one of your favourite library?

First thing was to decide how the scene is gonna be. Because this would be a kind of web site, I used flat colours and textures without lighting. So I created tens of randomized triangles that are dancing. Colours seem like random but they are actually main colours of the projects I developed. Background triangles are linked to projects. So whenever you view a project, only the triangles that have the project’s colour become visible.

Three.js supports text models, but projects’ descriptions are too long for this. More vertices = lower fps. So every text you see is actually high res png images. Addition to that, project previews are high res videos. I first screen recored the applications, converted them to GIF and exploded it to frames, changed the texture every second. This dropped the FPS dramatically. Instead, I create a video element, play the video, draw it into an image object, and change the texture in runtime. This saved 5-10 FPS at least. I stop video rendering, and the video itself during any kind of animation.

Whole source is here.

Ugly Faces

I’m not an illustrator but this would be cool poster on a brick wall. The idea is to mimic the hand drawings programmatically. 

The key is drawing an imperfect circle. Faces you see here are combination of many imperfect circles. There is almost no linear path but combination of segmented, circles. I used Two.js(I’m a big fan of Three.js too.) to draw curvy paths. It’s an awesome little JS gem.

Here is the code that draw circles:

First we create segmented circle. Then we randomise positions of these segment points a little. And finally we make curvy path using these points.

Result:

To mimic hand draw we draw two rounds of circles on top of each other:

Result:

As you can see this looks like a hand drawn two rounds of circles. Head, eyes, ears, eyebrows and mouth are all combinations of the same technique and yet every face is unique and sketchy.

Image Triangulation

 

First I needed a way to mark the parts of the image so that I can understand which parts are more detailed (like eyes, mouth etc.). Next step is a bit easy. After I get the marks, I use Delaunay triangulation algorithm to draw triangles.

This is the marker I wrote:

First I create a grid over the original image. Every rectangle in this grid compares its average colour to colour of every pixel in the rectangle. If a pixel colour is too distant from the average colour, that pixel is marked. If marked pixel count is larger than given threshold, whole rectangle is marked and is divided by 4 and every divided rectangle repeats same steps recursively.

Then every rectangle creates a random point in its area. These vertices are used by Delaunay triangulation algorithm which is taken from here. Whole source is here.

Repainting With JavaScript

bursher

Back in when I was in high school I was always into drawing by code. This was one of my first attempts. This little brusher, draws 200 lines and their line widths depend on the speed of mouse and their colours are based on their positions on a real photo. This was originally written in AS3(remember that golden area of glorious Flash?). Source is here.