Index

Here are some examples developed mainly in my spare time using HTML, HTML5, CSS3 3D and Javascript. Many of these experiments, at least the CSS3 related ones must be viewed with Safari 5+ or Chrome/Chromium 12 (development). Otherwise, either wrongly presented things or nothing at all could be seen.

My intention with this site is testing latest javascript-based web technologies and not creating crossbrowser production code. I think of this site as a playground and as such, code quality can be low.

All the content of this site, unless otherwise stated is (c) Hyperandroid and published under the terms of the MIT license.

Watch some experiments in action

Automata

Automata, a Finite State Machine framework.

I've recently been doing a lot of server side js for multiplayer games. This framework is how I'm decoupling logic from state. It features timed transitions, sub-states, FSM registry, etc.

Image courtesy Wikipedia

OnGameStart presentation

My OnGameStart presentation in Warsaw-Poland.

My slides running on top of CAAT and rendered with CSS. Use Enter and Ctrl+Enter to navigate the content.

Download the project from Github as a template here.

Sumon CSS

SUMON rendered with CSS

A rush against time to add up the required number. Beat the chrono while stressing your mental agility.

This version uses the new DOM/CSS rendering engine in CAAT. Alpha version.

See my Experiment on ChromeExperiments.com

CAAT+Box2D Basket Game

Basket Game.

A sneak preview of my next game. It is a remake of an already existing iOS and Android game. Built with CAAT and Box2D.

CSS3 3D Perspective toy

CSS3 3D perspective toy.

See this interactive toy change perspective with accelerometers on iOS. Inspired on Hakim's HoloBox is the result of a workshop on CSS3 3D I recently run at Ideateca.

Only Safari, iOS or latest Chrome.

CSS3 3D Star wars like intro

CSS3 3D star wars like intro.

Only Safari or latest Chrome.

CSS Spriter

The online CSS spriter

Save bandwidth by packing your textures into a single one. Then get a CSS style file to handle them.

Fish Pond

Fish Pond

This experiment shows procedural actors on CAAT which are built from curve paths.

CSS3 Tiler

CSS3 Tiler

This experiment adds one more rotation dimension to CSS3 Mosaic experiment. Get ready to be mindblowed while your images rotate.

Until now (2011-04-22) Only Safari or Chrome/Chromium 12 will be able to play this experiment.

CSS3 Mosaic

CSS3 Mosaic

An image rotator which transforms your images into tiles.

Until now (2011-04-11) Only Safari or Chrome/Chromium 12 will be able to play this experiment.

CSS3 Book

CSS3 Marquee

A marquee options menu.

Until now (2011-04-08) Only Safari or Chrome/Chromium 12 will be able to play this experiment.

CSS3 Book

CSS3 Interactive 3D presentation

My presentation at iPhone Devup 2011 Barcelona.

Only Safari is able to show these 3d transformations properly already.

Animation Framework

SUMON (formerly MathMayhem)

A rush against time to add up the required number. Beat the chrono while stressing your mental agility.

See my Experiment on ChromeExperiments.com

Animation Framework

CAAT. Canvas Advanced Animation Toolkit

A multi-instance director-based javascript scene graph manager featuring complex paths, scenes, scene transition, perfect pixel collision detection, affine transforms, containers...

Fork and contribute to CAAT here.

Garden

Grass at breeze

My submission to js1k.com. Simulates grass animated by mild wind. There're some fireflies messing around and the stars move as well.

Visit my jsdo.it account for unobfuscated sourcecode and a more featured version.

3D Environment Map

Environment Map

Realtime 3D Environment Map. No plugins, just plain javascript and canvas.

3D Particles

Particles

Realtime 3D particles with specular reflection and mouse camera tracking.

Tiler 3D

Tiler 3D

Realtime 3D image slideshow. Take a look at mindblowing image transitions in the form of a swarm of rotating image tiles.

Hypnoamoeba

Hypnoamoeba

Realtime 3D model hierarchy resolution with dynamic lighting and mouse rotation tracking.

Comments are closed.