Archived entries for HTML5

Yet Another WebGL experiment

This post is a bit long so here’s the demo or play the video below in case you can’t see it (WebGL has tons of quirks depending on the browser versions/OS) and source files is here.

I had my first experience with WebGL around a few months ago and with GLSL when I was a part of the World Wide Maze team, but everything was done through three.js, which hides most of the nitty-gritty.

Since WebGL is based on OpenGL specifications and currently most graphic processing uses OpenGL as their infrastructure (well until OpenCL comes along), so I thought it would be useful to know the inner workings of the system.

In here I employed the Ping-Pong techniques by utilizing the Framebuffer Object architecture which enables millions of particles calculated through the texture, I’ve drawn a simple diagram to explain the process.

Hopefully that made any sense! This techniques also used for post-processing calculation by applying several passes through the texture.

For the algorithms I’ve used the Duffing oscillator, Lorenz system, and some randomized trigonometric calculation.

Quick tips, if you want to use complex algorithms I suggest that you read a lot of math books and try to understand at least the basic, because there are already hundreds of mathematician that have published their work since centuries ago, Computer Vision algorithms like Space partitioning, Fortune’s algorithm, etc. has been around for decades and you can easily find the programming adaptation, all you have to do is just decode/modify/combine it.

Tested on

– Chrome v29.0.1547.57
– Mac OSX 10.8.4, 3.2 Ghz Intel Core i3

References

Google I/O 2011: WebGL Techniques and Performance
Making WebGL Dance
How to write portable WebGL
Learning WebGL
Introduction to shaders
Iñigo Quílez’s blog
– Once you understand the concept of shaders just stare at these amazing shaders to get more in-depth
WebGLStats

Resources

gl-matrix.js

The need for Speed

The surge of mobile/desktop optimization has been overwhelmingly demanding lately, but maintaining a consistent performance, weight, and look across all browsers/devices is excruciating painful, especially on mobile.

The one who got really close is Jongmin Kim’s website, which this demo had been inspired from.

So driven by curiosity I made yet another Hipster Gallery employing the latest technology and techniques such as CSS3, Canvas, WebGL, and miscellaneous.

It hasn’t been rigorously tested so expect incompatibility issues here and there, but it works pretty well on Chrome and Apple’s devices.

And have a peek at my code and feel free to use it but please don’t remove my name.

Resources

http://requirejs.org/
http://ricostacruz.com/jquery.transit/
http://backbonejs.org/
http://underscorejs.org/
http://html5boilerplate.com/
https://github.com/fschaefer/Stately.js/
https://github.com/millermedeiros/requirejs-plugins
http://learnboost.github.io/stylus/
https://github.com/GoodBoyDigital/pixi.js
https://github.com/bebensiganteng/jQuery-Keyframes
http://www.greensock.com/get-started-js/
http://www.createjs.com/#!/PreloadJS
http://gruntjs.com/

Versions

0.1 (2013/04/17)
– First version

0.2 (2013/04/18)
– Fixed some css issues
– Removed hover for mobile
– Fixed CSS transform javascript
– Fixed a few implementations on FF
– Added version list

Tested on

Desktop
Chrome 26.0, Firefox 20.0, Safari Version 6.0

Mobile/Tablets
iPad Retina iOS 6.3 Safari + Chrome
iPhone > 4, > iOS 6 Safari + Chrome

WebGL Experimentation

I’d like to thank Felix Turner for allowing me to steal.. euh.. copy.. I mean adapt his code for my learning purposes. :)

I’ve learned a lot about WebGL and Three.js from him.

Check it out here.

My first experiment with WebGL, using Three.js and Tweenlite.

HTML5 – Photography

HTML5 - Photography Logo

Latest experiment on HTML5, click here to view the site.

I have to say the satisfaction you get from building JS/HTML site is when you preview it on tablets or smart phones, it just works!

HTML5 - Photography Thumbnails View

HTML5 - Photography Portrait View

For anybody who wants to learn JS/HTML I recommend you to delve into these materials;

Resources

http://diveintohtml5.info/
http://jquery.com/
http://html5boilerplate.com/
http://trac.puremvc.org/PureMVC_JS/
http://www.jslint.com/

My New Portfolio

For those of you who don’t have the time to read the post, go to this link to see my site, I’m still adding more details, but overall it’s ready for your viewing pleasure.

After a copious amount of late night works, It’s finally done.

Concept Brief

The concept of the design which I’ve had envision initially was a depiction of a dream of an opposite anthropomorphism story, in a way where human were enslaved by the animal.

But somehow it grew to something more simplistic as I thought having animals roam around the world would ruin the composition.

I’ve tried to adapt the sfumato style quite rigorously, since I think it goes hand in hand with the pastel colors and most importantly the initial concept.

Sketching the trees:

Trees

Designing the barn:

Barn

Creating the landscape:

At this point I was really frustrated I had to make 5 drawings just find the one that is consistent with the whole theme:
Landscape

The World:

World Sketch

Brushing on the colors.

Colored

and the down under.

Of all the objects I could have chosen of, I had chosen a barn I think it somewhat fits my concept.

Down under

HTML5 – 3D Wire

HTML5 Wire lab

Simple 3D wire in HTML5.

Experiment #3 – HTML5

HTML5 Experiment

Here’s my first experiment of HTML5! For the next experiment I’ll do more mobile-web integration, need I remind you there are still leaks here and there but overall its working fine :) .

iPhone OS 4

snow whiteThere is always something exciting about Apple, whenever they launch their product everybody just mesmerized by it, gasped and awed in unison to its shines, it reminds me of Willy Wonka when he unveils his Chocolate factory.

iPhone OS4 had just been released today and has introduced some new features such as:

  • Wallpaper on the home screen : Yes! Now we can change our wallpaper.
  • Multitasking/background tasks : Of course with some limitations.
  • Unified e-mail inbox : Browse different accounts in one inbox (that is what I’ve understood anyway).
  • iBooks! : Move over kindle and other product alike.
  • App folders: for all of you that is obsessive compulsive.
  • Open e-mail attachments in other apps.
  • Game Center.
  • Mobile advertising (iAds).

But out of these features, iAds seems to be the most prominent as Steve hinted.

The average user spends over 30 minutes every day using apps on their phone. If we said we wanted to put an ad up every 3 minutes, that’s 10 ads per device per day. That would be 1b ad opportunities per day.

I can almost see the dollar sign lit up in his eyes when he uttered that sentence, its no secret digital Ads worth of billions of dollars and Apple wants to take a massive bite of it.

iAds
Steve again had contended that Ads today is attractive (he was showing a flash banner as the bad example when mentioned this and I could have sworn he was smirking in triumph) but lacks the emotional value, although I will guarantee the iAds will be another of “Shoot [something] to win [something]“.

iPhone iAds 1
Steve said that there’s nothing like it, but didn’t I just developed something similar for flash banner a couple of weeks ago?

iPhone iAds 2
That’s so emotional, I had tears of joy in my eyes.

iPhone iAds 3
In conclusion despite of another unprepared PR charade and the implicit statement of “we don’t care about you, just shut up and buy the damn product”, but the matter of fact is Apple had successfully delivered one of the greatest invention of the century, and its glory had captivated the materialistic world ever since and until the charm still lingers, we -the gullible customer of the modern world- will still perceive that what glitters is always Apple.

PS: Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited. which means goodbye Flash CS5 and thanks for the effort (but at least my time learning objective-c didn’t go to waste :) )

Imagination is more important than knowledge

A series of internet memes has again sparked another heated debates, first it was the first javascript website showcased in the FWA and later the YouTube- HTML5 integration.

Since the dawn of the internet-era, infinite debates amongst these developer elitists were always inundated the World Wide Web and one of the revered topic is of course who has the better developing platform.

The advent of HTML5 and the mission and vision which it carries is truly spellbinding for the internet community, but if you remember so had actionscript 3 during its inception.

Every technology has its share of flaws.

The impending problem that HTML5 has had to be adaptations and compatibility issues, the browser war will always be diluted by strategic marketing, business goals, and of course ego -which can be dubbed as the company ideology- and never in the interest of the developer.

The first HTML5 conundrum which has begun is the new video which its support is limited to web browsers that support the H.264 video codec mainly because W3C declined to specify a standard video codec to go along with new video element and you can guess it, IE deviates the notion completely and this just the beginning of other impediments which will come along.

Flash, as I’ve had mentioned its flaws and the prevalent hate memes such as the CPU hogger, the battery drainer, etc which all is true, and of course the choreographed demo of Flash player 10.1 in Nexus, was mainly caused by Adobe complacent and other aspect which mainly had to be the economy, the decrescendo of demand in Flash during this post-recession period has been abysmally loud (a bit of oxymoron there) and based on my experience, building a good Flash site needs a bit of an investment in time and money as oppose as HTML/JS sites, hence unless if it’s a niche market such as social-game company, almost nobody dares to invest such luxury or even has the needs that requires Flash to fulfill their business objective, except for that annoying ad banners which I mostly am doing now :(.

But from the Technology stand point, Flash I think can still accomplish, and I’m not trying to be subjective here, something that is better than what HTML/JS does, a few sites worth mentioning are:

http://sketch.odopod.com/
http://www.picnik.com/app

I dare you to build something like that with HTML/JS, but again I’m not trying to devalue HTML/JS here, check out google, digg, etc.

But in conclusion these ridiculous dialogs are unfounded, history has repeatedly shown us that technology is merely a tool, a transient breeze that bound to be superseded by a better and in-your-face contender ergo we shouldn’t be trying to be a platform zealots, I’ve been experimenting with Unity3D, Cocoa, Jquery and of course Flash, I think exploring new Technology is the beauty of this keyboard-cat and Rick’n Roll’d era.

As an epilogue I will depart from this post by paraphrasing some guy with a weird hairdo who invented the theory of relativity:

Imagination is more important than knowledge. For knowledge is limited to all we now know and understand, while imagination embraces the entire world, and all there ever will be to know and understand.



Copyright © 2004–2009. All rights reserved.

RSS Feed. This blog is based from Modern Clix, a theme by Rodrigo Galindez.