soledad penadés » Projects

Mesh subdivision (2012 extended edition)

sole — Mon, 16 Apr 2012 21:54:15 +0000

Back in 2004, when I was starting to experiment with OpenGL, I had the idea of creating meshes from scratch. This will come in handy for intros, since this way I won’t be needing to include the meshes’ data with the executable!, I thought.

I would create a simple base pyramidal mesh, and subdivide it until I got something with more vertices and faces, but properly connected (not just a bunch of random points). So I when I had a couple of free days, I came up with a very rough way of creating and subdividing meshes. It was very raw, but I loved that I had done it myself!

At the end, I didn’t use it for any intro at all, but I used the trick in a demo instead, called codecolors (source code, if you’re feeling adventurous). Although it’s hard to notice, since everything was generously blurred (I had recently learned how to get a cheap motion blur effect and was really eager to use it in every single frame!).

Fast forward to 2012. I am learning (tinkering with?) three.js and I wanted to find out how to manipulate vertex data dynamically. I somehow remembered this experiment and where I left it (Next step is playing with the vertices!), and I decided to continue it.

Once I got the basics working, I thought it would be neat to have some way of interacting with the scene–so I added dat.gui, which are the controls on top right. Then I also wanted to save the images, as I once I added controls for altering the look I started getting great imagery! So I added FileSaver.js and canvas-toBlob.js, since browser support for downloading images is still a bit incomplete (so to speak).

And finally I thought: hey, storing images is ok, but what if I want to modify an existing configuration?. So I added support for storing the current configuration via some simple location hash serialising. I am not sure if it’s the best way but it seems to work well enough for now!

Oh, and since I just love text effects, I added a silly text-manipulation thingie to dynamically alter the innerText of the page contents. Just because!

It’s fun to play with all the settings and seeing what happens. I have found myself mesmerised just by looking at the end result. Some images seem really organic; others look very fractal/spaceish to me. (Don’t forget to make it wobbly! –looks like someone is having a discussion inside the pyramid!).

I’m very happy with the end result, and even more about the development process. I can vividly recall the many hours I spent in 2004 dealing with arrays and memory allocation for such a simple task as this one. Quite unproductive, to be honest! But Javascript + WebGL totally ROCK! Also, after so many years of trying to explain what the demoscene and realtime is about, it’s great to be able to demonstrate it in realtime. Yay!

I’ll write about the new “Simple yet Frequently Asked Questions” about three.js that I encountered while doing this experiment… but that will be tomorrow, if you don’t mind!

Have fun! :)

WebGL VGA

sole — Mon, 09 Apr 2012 00:17:53 +0000

For some odd reason, I happened to remember a little demo that came with the first 16 bit computer I ever used–an Amstrad PC 2286. It was meant for showing off the capabilities of the new and shiny Paradise VGA graphics adapter that the 2000 line of computers incorporated. 256 simultaneous colours! 640×350 graphics! So stunning back then! I ran this demo from time to time, admiring all those colours at the same time on the screen. Then I learnt how to make the computer output them with GW-Basic, but that is another story.

I wanted to watch that demo again, but it seems that the Amstrad PC line of computers doesn’t get as much love as the CPCs do. So there is hardly any software repository (or dump) for those computers, and thus I couldn’t locate that demo. It doesn’t help that I didn’t remember its filename either…

But I found several images depicting the demo, and somehow I decided that rebuilding the demo was an excellent idea –and a great excuse to learn three.js!

This is how the original looked:

And this is what I ended up with:

In the process I thought I would spice things up a little. Since rotations are “cheap” with WebGL, I made things move around, mostly by rotating them. I also added some scaling here and there, and liberally used Math.sin and Math.cos (as Javascript is so fast nowadays too). Still, I didn’t go too far, for the sake of keeping some resemblance to the original!

SFAQ

Although three.js is designed to be simple and intuitive, I had several how do I do this apparently simple thing with three.js? moments, so I thought it would be interesting to write these down as a sort of “SFAQ” (Silly Frequently Asked Questions). There we go:

How do I make a line?

You first create a geometry, then add vertices to its vertices property. Then create a material to set the line color, and use both the geometry and the material to create a line.

var geometry = new THREE.Geometry();



geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) );

geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) );



var material = new THREE.LineBasicMaterial({ color: 0xFF0000 });

var line = new THREE.Line(geometry, material);

Actually, you can create the line skipping the material creation. It will get a randomly assigned colour then.

How do I make a line strip? (i.e. a series of connected segments)

You start with a geometry, like in the line example above, but add as many points as you require. Then when creating the line you specify that the line type is THREE.LineStrip:

var geometry = new THREE.Geometry();



geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) );

geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) );

geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 100, 0) ) );

// ... add as many vertices as you need



var material = new THREE.LineBasicMaterial({ color: 0xFF0000 });

var line = new THREE.Line(geometry, material, THREE.LineStrip);

How do I make a line in which each segment has a different colour?

The answer to this is vertex colours, which works in the same way as the homonym concept in OpenGL: you need to specify a colour per vertex, instead of just a colour for the entire line. The way to specify the colours is to add instances of THREE.Color with the desired colour to the colors property, and then tell the line material to use them, as follows:

var geometry = new THREE.Geometry();



geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) );

geometry.colors.push(new THREE.Color( 0xFF0000 ) );

geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) );

geometry.colors.push(new THREE.Color( 0x00FF00 ) );



var material = new THREE.LineBasicMaterial({ vertexColors: true });

var line = new THREE.Line(geometry, material);

I’m using this for the odd colourful figure on top left.

How do I build hierarchies of objects?

You can use the generic THREE.Object3D class as container for other objects. When you add children to that object, and move it, the children will move along with the parent:

var container = new THREE.Object3D();

var geometry = new THREE.CubeGeometry(10, 10, 10);

var cube = new THREE.Mesh(geometry);



container.add(cube);





cube.position.x = 0; // Local x = 0

container.position.x = 10; // The cube's 'world' X coordinate at this point is 10

I used this for the “moire blocks” in the middle of the screen.

How do I change the colour of an object after having instantiated it?

Simply access its material.color property and change it as required:

var geometry = new THREE.Geometry();



geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) );

geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) );



var material = new THREE.LineBasicMaterial({ color: 0xFF0000 });

var line = new THREE.Line(geometry, material);



// the line is red



// But if we change its green attribute to 1...

line.material.color.g = 1;



// ...the line is yellow now!

This technique is used for animating the colour of the rectangles on top right.

A call for help!

If you know the file name, or have a copy of the original demo, please let me know! I would love to watch it again after so many years! Hopefully it will work with DOSBox. Please! :-)

animated_gif.js

sole — Mon, 02 Apr 2012 07:18:13 +0000

Past week I wanted to make an animated GIF – but didn’t want to use GIMP or ffmpeg for that. I wondered: can an animated GIF be made in the browser? Of course it can! There was a library (JSGIF) which was a port of the original ActionScript library, AS3GIF.

I built a bit of wrapping code around the library, and did some tests to see if the port worked, first by creating a canvas and painting random squares on it, and then using them as input frames and building the GIF with that. Secondly, I tried using images. It worked acceptably enough (the color quantizer could be better, but we’re not after photo-realistic animations, after all).

So I added the drag and drop + file api stuff, but there was still something missing… the look wasn’t 90s enough! It was all begging for a bit of outdated aesthetics, but done with CSS3 and HTML5. Hence, there are multicolour logos via CSS animations, eye-cancer phosphorescent pink that turns into X-Files green glow (via CSS animations too), an HTML5

aafm revision 4

sole — Wed, 14 Mar 2012 23:13:49 +0000

It’s been too long since the last update to aafm, “the Android ADB File Manager”, which is a shame! I guess I should apologise, but I’ve been horribly busy these last months. I didn’t even have time to write a post apologising about not having time! Hah! Anyway, let’s fix it right now!

The latest revision incorporates some rad fixes by Norman Rasmussen and Michał Kowalczuk, namely:

Adds BusyBox support (by sammael). In other words, it means that people using Cyanogen Mod devices can now use aafm to browse their files! Hooray!
Handle device drops when there’s no row present (by normanr). An apparently silly issue that can be very confusing when it happens to you.
Handle symlinks on the device correctly (by normanr). Excellent!
Quote/Unquote special characters in drag&drop messages (by normanr). Superb!

On my side, and apart from merging and testing the changes, I’ve worked on…

Slightly improving the README. Clarify how to find out the device Id, and add link to PyGTK binary for Mac users. I recently found that there is a readily available PyGTK binary build for Mac OS, which means that you can now use aafm with Mac as well. It is slightly buggy but even then it’s way better than transferring files from within Eclipse or using the Android file transfer Mac “utility”*
Moving the TO DO list items that were on the README file over to the issue tracker in the project’s page. That is more trackable/visible (or that I hope!).

I love the fact that there’s random people using the software and also submitting great patches. I’d like to think that’s because the code is simple enough and the app is useful enough too! (OK, GitHub making things easy might be part of the reasons as well, I reckon).

There is now quite a long list of issues at the GitHub project page. Feel free to dig in and send a patch (or pull request in GitHub parlance) and help make Android users’ lives a little bit better!

* Because, to my enormous surprise, MTP devices such as … Honeycomb or Ice Cream Sandwich and co do not work in Mac OS either…!

Berlin, July 2011

sole — Sat, 18 Feb 2012 22:38:09 +0000

The pictures from my first trip to Berlin are online now.

This time, I decided to experiment with post-processing instead of simply uploading the pictures as they came from the camera. Nothing too fancy, just playing with a couple of GIMP plug-ins, essential actions such as adjusting brightness and contrast, and of course realigning pictures (as I take slightly tilted pictures all the time, but not on purpose, as you can imagine). I also used RawTherapee to process the RAW files. It’s absolutely my favourite RAW editor.

I chose this black and white finish because that’s what Berlin inspired me. There’s this strong sense of the past still being present, even in a violent manner, and still it’s somehow very much like a spirit trying to free itself from old considerations. There’s a tension all over the place between legacy and modernity, even if apparently Berliners carefully tiptoe over the dividing line and seem to ignore said tension, or perhaps they are simply internalising the conflict and transforming it into something else; maybe that’s why there are so many sprawls of graffiti and artsy inspiring stuff all over the city, often in the most unexpected corners. Some places were just immensely sad while others were so lively and energising…!

And before you ask: no, I didn’t attempt to sketch anything serious on this trip, as it was quite short and I still had to finish the London-NY sketchbook.

Now that I finished this (I’ve had to postpone it for months), I am finally free to fix Nerdstalgia. I think I found the source of all the troubles I’m having with certain phones (namely that the app doesn’t work at all, grrr). If that doesn’t work I don’t know what else I’ll do! Double grrr!