Tamapolis: Javi Agenjo's personal blog

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.

This micro-talk made me rethink some of my conceptions about if I should shown more about the work I’m doing.
I’m against showing anything before it is almost finished to avoid people criticising aspect that I already know they are bad. But after this talk I think I’m going to make a video of the project I’ve been working over the last year.
Meanwhile, I leave this 8 minutes talk about if it is a good idea to show your work when it is not finished.

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

(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…)

When the client ask if there is any documentation

the_coding_love() (or Les joies du code is you are french) is a tumblr that every developer would love.Expresses the life of a coder through animated gifs.
And there is also Developer’s life which is basically the same.

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 🙂

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.

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.