soledad penadés » javascript

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

London-New York (and back), via Hong Kong, Macau, Tokyo and San Francisco

sole — Sun, 29 Jan 2012 23:03:40 +0000

The sketch book I mentioned a couple weeks ago has finally been released! To recap (just in case you accidentally ended here and have no context), it is a travel sketchbook depicting our experiences while travelling around the world these past April and May.

I’ve finally settled on building a simple HTML(5) page with a sprinkle of Javascript to navigate the bigger images. Something that gets the job done, which is showing you my crazy sketches!

I might possibly build a Kindle version in the near future, so if you’re a Kindle user, stay tuned ;-)

In the meantime you can read a bit about the background and the “tools” in the project page.

Some notes from Google DevFest Barcelona 2011

sole — Thu, 10 Nov 2011 16:32:14 +0000

I thought I wouldn’t make it to the place. Barcelona’s metro system is still pretty much unknown to me and it’s hard to find navigational help using the official web from the transport entity. Maps are confusing (we need a Beck!). A shame, but I finally did it, after walking the same loooong underground exchange that Fuzzion guys used for recording their famous kukka:r0kasit7e!aarku demo. I arrived a tad late, but I did it! Yay! :-)

And while most of the attendees brought their laptops, I went oldschool and brought a trusty notepad and a ballpen to jot down whatever caught my attention.

First in the morning was the HTML session. I didn’t write anything down about this one, since I was concentrated on looking at the stuff Paul Kinlan was showing. I knew about most of the stuff he talked about, but it was a nice reminder. It was cool that the slides were interactive themselves, so he could demonstrate things without getting out of the “slides environment”. Then went Mr.doob and his short GLSL + WebGL talk. I think it was too short for the topic! Anyway, people were quite impressed with the patterns one could generate by writing a shader, and since he’s released an improved version of the interactive GLSL sandbox tool he used, you can now experiment in the same way he did! :-)

Then came the break time and I got talking and after that I sadly missed much of the talk about Google+ from Ade Oshineye, confiding that I would be able to catch up later on by looking at the docs :-P

I entered the conference area again for the Android sessions with Bruno Oliveira. I was quite interested in hearing what they had to say, after the recent “events”: 4.0 announced, the Android git repo being taken down, the (in)famous fragmentation chart, etc…

… and what I heard was a bit disappointing. It seems to me there’s a fundamental disconnection between what Android developers want and what Google/Android has to offer. It was very obvious when questions time arrived and most of the attendees were asking questions about monetising the apps (or in other words, being able to recover the investment on the platform), and pretty much all Bruno had to answer was that Android intended to be a democratic platform, focused on what the user wants, and not forcing them to do something like entering credit card information when turning on the device for the first time. He also added that Android wasn’t targeted to any specific income range as other platforms do.

When asked about “fragmentation” he said that:

[...] diversity is a feature of the platform, is not really fragmentation. Different operating system versions [...] is what people call fragmentation [...]
It’s a consequence of being open source [...] we don’t want to put pressure on manufacturers. Maybe in a friendly way, releasing cool inspiring phones like the Nexus S, etc… [...]

He was also asked about the agreement between Android and manufacturers regarding updates that was announced and widely discussed on past Google I/O, but after digressing for a while he didn’t give any definite statement on that matter.

Then he went on to give some advice on how to make great apps, suggesting we should detect the available features on each device and act accordingly, activating or deactivating features in our apps, because not being compatible with a certain phone is being arrogant, like saying to the user that he bought the wrong phone.

This is something that particularly irks me, as sometimes there’s no written specification that app developers can consult and be confident will be followed to the letter, as each phone diverges a lot on its behaviour. It’s impossible to know in advance what will happen unless you test it with the real phone. Yes, there’s the emulator, and that famous esoteric compatibility suite that a phone must passed in order to have the Google apps (Market, Gmail…) installed, but that doesn’t guarantee that a real phone will have a proper, complete GL ES implementation, for example.

So making that type of statements did actually sound wildly arrogant on his side. And he went on, happily adding there wasn’t no excuse for not creating all the different versions of resources for all the different screen sizes and densities. This was followed by a general moaning and mumbling in the public, as with each new release of the SDK not only are there new features that need to be used if you want a “cool app” that uses the latest stuff in new phones, but there are also new resources to be created and maintained, thus increasing the complexity required to build something “great” for Android versions ≤ X.

Something else that really worries/annoys me is the insistence in showing raw activation and installation numbers in every presentation they do. It doesn’t make much sense on the long term: I have probably activated four devices but that doesn’t mean I use all of them (as I use them for testing), or that I am four different potential users. Another use case: people using carrier-subsidised phones change them quite often, but that doesn’t mean a new user is created from void each time a new phone is activated. It’s still the same user and he’s not going to expand the market–it actually stays the same, as the old phone will probably get thrown in a drawer. Same goes for installation numbers: that you install an application doesn’t mean you actually use or keep it on your device. They could show uninstallation numbers too, and the ratio between installs and uninstalls would be a way better indicator (but probably not as attractive).

Moving on, it was lunch time, which we used to discuss the above points. Most people dismissed Bruno’s compatibility strategy as it’s plain unrealistic (unless you have an infinite number of testing resources, or simply build very basic and unexciting apps). Some jokes were made about the fragmentation “feature”: it’s not a defective phone, it’s a feature!.

After lunch we got Paul Kinlan again, explaining several strategies for “making a business out of apps”. Again he relied massively on AdSense, which has proven to be a very unreliable and arbitrary source of income. He also mentioned the Chrome Webstore, of course, but it’s not very widely extended yet. This session wasn’t as enlightening as the HTML session, as the concepts weren’t new and … well, you can imagine the rest.

Next was Danny Hermes with an strange session on the Shopping API. He sounded slightly apologetic and felt like out of place since there wasn’t even a “Shopping” icon on the banner, whereas there were G+, Android and Chrome icons, but at least was really enthusiastic about his topic. I guess this talk could be interesting for people integrating Google’s Product Search with online shops, but this is not something I’m currently interested at so I didn’t pay much attention.

Sam Dutton’s Chrome Dev Tools session was way more interesting. It was funny that we were commenting: it would be cool if you could save the changes you do live… And then he said: here’s this new feature: now you can save the changes you made to the document!.

It also made me slightly envious: the Chrome developer tools are an amazing platform for developing, and the Android toolset pales in comparison. It’s all “hacks” here and there: a separate app for tracing, another one for viewing the layout, an app for debugging… Seems like Google should invest more in the Android team ;-)

It was time for “snacks” again. I had a coffee, thanks to the help of @thespite which showed me how to use a Nespresso machine. Yes, I had never used one before–I’m a slow-food sort of person and generally use a french coffee maker instead ;-)

And finally it was time for more Ade Oshineye talks, this time on the Google+ Hangouts API, but for some reason (saturation?) my brain squarely refused to pay attention. I’m so sorry Ade! See, if the talks had been recorded I might be able to watch them ;-)

After the talk finished, it was “Pitch your app” time, where several attendees tried to convince us that their app was the best ever. The best demonstration got a voucher redeemable for a Nexus S, since the phone is not available for sale yet. I was nicely surprised by the level of English demonstrated by the guys pitching the app. They still have a lot of Spanish accent but they aren’t kicking the grammar like a punch bag every two words, and that’s something you can’t say about most mono-English speakers! So well done on that front!

Regarding the apps, I was a bit less impressed, as most of them weren’t really surprising: weather aggregation services, GPS tracking+Maps, cloud CMS integration, a football game, a chess game, bike rental locations aggregation/visualisation… nothing that got me enthusiastic about :-P

What did surprise me in fact was that one of the pitchers connected his laptop to the projector and I could see how he opened a terminal and wrote “pm-suspend” prior to disconnecting the computer from the projector. Now that is hardcore! Who needs widgets to suspend the computer? A terminal is all you need! \o/

So to sum up, it was quite an event-packed day, quite professionally organised. Thanks and well done, Google! It not only provide me with some new ideas and tricks, but it also got me thinking about the true Google strategy on Android. Unfortunately the post was getting too long, and that discourse seemed slightly out of place, so I cut that part out and will refine and publish it in the near future as a separate post.

Here’s hoping there’ll be a future DevFest BCN 2012! :-)