Archive for the 'coding' Category

Playing with the Emscripten port of Box2D

Saturday, July 20th, 2013

Some time ago I had the idea of porting the concept of a great old game called Mindrover to the web, as an excuse to do something with my LiteGraph.js library (a javascript to create modular graphs similar to PD).

Motorclub, using graphs and physics

Mindrover is a game where you design your vehicle to fulfill some challenges. You cannot directly control the vehicle during the challenge, instead you must add sensors and thrusters around the chasis of the vehicle and wire them to react according to your strategy. A very interesting and fun game. Sadly it seems that the mechanics of the game havent caught up with more developers.


Updating Simplecanvas

Tuesday, July 9th, 2013

I have improved Simplecanvas so now it has some basic 3D rendering functions, check the latest entries in the gallery to see the syntax.

It is a pity that I can’t use WebGL (I want to keep it as compatible as possible, specially for iOS), otherwise I could make something more like processing.




Thursday, June 20th, 2013

Today I have presented in front of an audience for the very fist time the work I’ve been doing for that last year and a half. It is a 3D editor entirely made for the web, using my own 3D rendering engine. It is called WebGLStudio.


Because it is still a prototype full of bugs I didnt want to promote it but now I feel more confortable sharing it. You can try it by clicking the screenshot.

I will make a better post about it with a tutorial video in the next weeks.

Planet Renderer and HTML5 frustration

Monday, May 6th, 2013

I hate when coding a neat web application I stumble uppon a problem where due to a poor standard there is no clean solution.

This weekend I was coding a planet shader for an idea I’ve been having lately, the problem when dealing with planet rendering is that you need very high resolution textures if you want to let the user get a close view.  So I searched and found some 4K textures perfect for my scene.


Click to see the WebGL Earth Demo


Simplecanvas 2.0 for Livecoders

Friday, May 3rd, 2013

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.


dissecting the 1K minecart javascript demo

Friday, March 29th, 2013

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

JS1K Minecart Demo by @ehouais

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.


Conway Game of Life in WebGL

Wednesday, February 20th, 2013

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


Cubemap using HTML5 and CSS Transform

Tuesday, February 5th, 2013

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 🙂

Decalogue for Guerrilla Coders

Saturday, January 5th, 2013

This last year I’ve been trying to redirect my programming skills to more creative fields. Thanks to technologies like HTML and Javascript now its easier than ever to prototype applications fully functional across all platforms.

The objective is to be able to prototype an idea fully functional (no matter the context: audio, video, graphics…) in the least possible time, without having to waste time doing a fancy setup.

I wrote down ten rules that I must follow at all cost to ensure that I become better as a programmer, to help reach more creative areas of coding, instead of following the old spiral of trying to make the best engine/library ever as I’ve been doing for the last 5 years. This rules I call them “The Decalogue for the Guerrilla Coder”:

  1. You need to master a full framework, and environment to code rich applications that provide all possible outputs with not much effort, that allows you to work with images, audio, video, network, UI, etc. (something like HTML5, iOS SDK, Flash, Java, …) and create a set of classes and functiones to adapt it to your needs.
  2. You need to master a server side platform, to allow your users to interact between each other. Something like Python, PHP, Java or Node.js, and full knowledge of the HTTP protocol and sockets.
  3. You need to master a UNIX shell, to launch processes remotely, interact with your server side scripts, configure daemons, crons, GITs, etc.
  4. You need to know how to code using a simple text editor, and it should be done remotely. No fancy IDEs with auto-completion, and auto-configuration of libraries.
  5. You need to master a high-level language and a low-level language, and be able to make them interact between each other. Using small C like apps executed in command line from scripts instead of huge monolithic apps.
  6. You need to know how to code real-time applications, those application where the performance is critical to succeed, where you need to recompute the data at least 60 times per second.
  7. You have to be able to carry all you need to code in your laptop, no big multicore workstations with dual monitors and huge desktops.
  8. You need to master mathematics and basic programming algorithms, to be able to compute calculations, animations, interpolations, extract data, sort, find…
  9. You must be able keep your code simple, using some design patterns but not over-engineering it. Using simple concepts but self-consistent. Self-explanatory code. Do not abusing optimizations in the wrong places.
  10. You must code fast, without wasting time in design, deploy, and test. You have to be able to test your code changes instantly. You need to have your app template ready to start, so when an idea comes to your mind, you can have it running in a couple of hours.

As you can see I didnt say anything about working in teams or using repositories, mostly because a guerrilla coder creates alone. The idea of being creative usually conflicts with the concept of working in teams, so unless you find a good way to split the work, it is always better to work alone.

I hope I can get better in some of them in the next year.

My own host and a backup script in python

Thursday, November 22nd, 2012

Some time ago I decided that instead of sharing some space in a hosting service to have all my websites I was going to rent my own private server. I could had plugged one old machine to the network at home and save the money but if I have to pay every month a fee I’m sure I will make good use of it.

Now two years later the experience have proved to be great, I manage remotely my own Ubuntu machine (my knowledge in Unix systems have improved a lot), my own http server (nginx), I have services running (GIT, some node.js scripts) and I’m hosting several websites from some of my friends.

I’m using (great service) for a virtual machine of 256 MB of RAM (more than what I need), it costs me 20 Euros per month which I think is fair.

Thanks to that I’ve been able to code all kind of crazy ideas which it would had been impossible without my own remote machine, and I encourage to all the webmasters to give it a try one day to pass to a next level.