Archive for the 'webdevelopment' Category

WebGLStudio

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.

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.

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.

simplecanvas2

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

A Year in Javascript

Sunday, February 10th, 2013

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

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

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 🙂

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 linode.com (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.
(more…)

Javascript syntax…

Thursday, October 11th, 2012

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.

Web Experiment: Simple Canvas

Tuesday, October 9th, 2012

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

Interesting links of June 2012

Thursday, July 12th, 2012

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.

Web Experiment: Mathnimatics

Wednesday, June 6th, 2012

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.

Mathnimatics

Click on the image to try it

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

(more…)

Web Experiment: Rendering 3D without WebGL

Friday, May 25th, 2012

After too many years developing 3D Apps using APIs like OpenGL I found myself wondering why I never did a rasterizer from scratch, creating the image pixel by pixel, using just the CPU.

It is a real useful exercise to consolidate the mental knowledge of a graphics pipeline. I even know people who use software rasterizers on their engines to solve visibility issues or as a fallback option for some extreme situations (for instance, 3D on the web on Internet Explorer! ha ha).

So today I started my own rasterizer, and I choose Javascript, which is not the best context when searching for performance., but I was surprised to see that three.js has its own build-in raster which amazing results, so, why not?

Click the image to see it in action

If you are curios about how it is done, continue reading the entry.

(more…)