Tamapolis: Javi Agenjo's personal blog

One month ago Graham offered me to collaborate with him in one of his live coding performances. He does amazing music by coding live in front of an audience (no samples, no synths) using Supercollider.
He thought I could do the visuals using one of my tools, he would send me OSC messages and I can try to visualize them. So I took my old Simplecanvas web-experiment and tune it a lot so it can work in a real environment.

I wanted to talk about it before but I was waiting to have a video to show (we recorded the session), sadly the videos will have to wait a little bit, meanwhile just a heads up about the new features in Simple Canvas 2.0.

(more…)

I was superimpressed by this cool Javascript demo uploaded to the internet this past week by Philippe Deschaseaux.

JS1K Minecart Demo by @ehouais

It is all done in less than one kilobyte of Javascript code, without WebGL or libraries, and the result is very beautiful and intriguing, so I decided to analyze the code as I usually do to see If I can learn something from the author and It turned out the whole demo is full of great ideas. Lets check the code.

(more…)

Its been a while since I coded one of those two hours web-experiment.
For today, I decided to code the most famous cellular automaton in a web, but using the GPU to compute every step, so I could reach high speed with big worlds.

Click to try the Conway Game of Life

(more…)

After many years programming graphics in C++ I ended up having to code a big web project during a whole year, it was for the Barcelona World Race online game. Because the project requested lots of graphics and interaction I decided to do it in Flash, by that time I only had made some silly tests in Actionscript so I had to learn fast and not only the basics.

Barcelona World Race

The project ended up being a success with more than 50.000 registered users (surprising for a game so niche as the sailing games).

After that project I felt that Flash was a great platform, performance is good, the API is complete, the official IDE has all I could expect, and the projects can be deployed to web or desktop without any problem.

And then, WebGL came and I thought that it would be cool to learn it so I could merge my passion for 3D graphics and my passion for web development. And because to WebGL you need to know Javascript I became more and more proficient in Javascript.

I coded my own game editor in Javascript, silly weekend projects, even server side apps with Node.js.

(more…)

Today at work I had to do a cubemap visualizer that must work in iOS, so the only approach was to use HTML5 and the some of the new CSS 3D transformations.

I have done it already in flash using the 2.5 API so I thought it shouldn’t be so hard to rotate several layers 90 degrees and move them around. It turned out it was, because the origins are kind of messed up in the new CSS 3D API and I couldnt find a good documentation about it.

Drag the image around to see the panoramic image, although some old browsers probably wont show anything.

It works perfect in iOS and Chrome, not so well in Firefox.

If you want to use it, it is all wrapped in a simple Cubemap class in javascript, just include it and use it 🙂

The last weeks I have improved the Simplecanvas app so now it has more features, the main one is that now you are able to share your creations with other people. I am also improving the API so it has more features and makes it easy to animate objects through time.

The only missing thing is the input, I thought it would be nice to be able to interact with the creation through some kind of simple interface. The only supported input is the mouse coordinates which is nice to do some effects but not enought to synchronize with other people.

On that line my friend Graham, an experienced music live-coder, suggested me to add OSC support so he can send me messages from his live coding sessions (using chuck) so I can use them to synchronize the beat in my animations.

(more…)

Javascript has that point of uncertainty that makes coding and adventure! Here is one example:

] ()
SyntaxError: syntax error
 
] {}
undefined
 
] ({})
Object {}

For more oddities like this one, I suggest the hilarious presentation WAT from Gary Bernhardt.

Today I’m going to talk about a tiny web app I coded the last week to create images and animations programatically, it is called Simplecanvas.

Click the image to try it

The idea is to create images using simple functions like move or drawImage, and test the results instantly by pressing control+enter.

(more…)

Here is a bunch of interesting links I’ve found during the last month, that I thought were worthy to share and comment.

Visualization

I enjoyed reading this article (Lou’s Pseudo 3d Page v0.91) about how manage the old games to create a visualization of a road for racing games, using raster techniques and in some cases specific hardware for arcade machines. It is well documented and easy to understand.

Beyond Javascript

Javascript its reaching its limits, so here are some interesting projects related to the language itself.

• LLJS: Low level javascript, using the JSVM to execute other kinds of code.
• JSRepl: a webapp to code in different languages from the browser and see the results.
• Garbage Collector in JS: tips to avoid your js app to freeze everytime the GC do his thing.
• Optimizing JS, a good bunch of tips to optimize code in Chrome V8

There is even a LLVM to Javascript compiler called Emscripten, and because there are interpreters from almost any language to LLVM intermediate code, it is possible to take old games coded in C and convert them to be executed on the browser, like Open TTD (one of my favourite old games)!

And if you want to learn to code Javascript or just learn to code, this site is awesome:  Codeacademy

HTML5 upcoming standards

Google and Mozilla are pushing the HTML5 standard with new APIs to access hardware functionalities, but also to allow to create new webapps. Some are really interesting like P2p connections from the browser.

A list with the upcoming standards

Collaborative apps

I love collaborative apps, the results are always unpredictible, here are two nice examples.

• yourworldoftext: an infinite canvas made of text where people can write whatever they want.
• webcanvas: an infinite canvas where everybody can draw. Some time ago I used this to create the title of a community site I had, so people could change the title whenever they wanted. The results where really funny and monstruous.

Some time ago I did one of my first web experiments in HTML5 using the Canvas element, it was a simple “solve this equation for every pixel of an image” to create mathematical images easily from an equation written by the user, I wasn’t sure how long it will take to evaluate the equation for every pixel (due to being executed in the Javascript VM) but it turned out to be so fast that I could execute it in realtime (using a low resolution canvas I could get 60 fps).

Today I recovered that code and made some optimizations on the way the render loop was handled, I think now it is between two and four times faster. It is a good time to talk about it in this blog.

Click on the image to try it

If you want to know how it is done read the rest of the post.

(more…)