Old School Color Cycling with HTML5 | EffectGames.com
november 2011 by 44sunsets
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory. Thus began the era of color cycling.
Most games used the technique to animate water, fire or other environmental effects. Unfortunately, more often than not this looked terrible, because the artist simply drew the scene once, picked some colors to be animated and set them to cycle. While this technically qualified as "color cycling", it looked more like a bad acid trip. For an example, just look at the water in this game.
However, there was one graphic artist who took the technique to a whole new level, and produced absolutely breathtaking color cycling scenes. Mark J. Ferrari, who also illustrated all the original backgrounds for LucasArts Loom, and some for The Secret of Monkey Island, invented his own unique ways of using color cycling for envrironmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels -- just one single flat image with one 256 color palette.
Unfortunately the art of color cycling died out in the late 90s, giving way to newer technologies like 3D rendering and full 32-bit "true color" games. However, 2D pixel graphics of old are making a comeback in recent years, with mobile devices and web games. I thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.
This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. I am using 35 of Mark's original 640x480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match. Please enjoy, and the source code is free for you to use in your own projects (download links at the bottom of the article).
html5
oldschool
colorcycling
colourcycling
color
colour
cycling
8bit
palette
256
colors
colours
cycle
javascript
canvas
effects
Most games used the technique to animate water, fire or other environmental effects. Unfortunately, more often than not this looked terrible, because the artist simply drew the scene once, picked some colors to be animated and set them to cycle. While this technically qualified as "color cycling", it looked more like a bad acid trip. For an example, just look at the water in this game.
However, there was one graphic artist who took the technique to a whole new level, and produced absolutely breathtaking color cycling scenes. Mark J. Ferrari, who also illustrated all the original backgrounds for LucasArts Loom, and some for The Secret of Monkey Island, invented his own unique ways of using color cycling for envrironmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels -- just one single flat image with one 256 color palette.
Unfortunately the art of color cycling died out in the late 90s, giving way to newer technologies like 3D rendering and full 32-bit "true color" games. However, 2D pixel graphics of old are making a comeback in recent years, with mobile devices and web games. I thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.
This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. I am using 35 of Mark's original 640x480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match. Please enjoy, and the source code is free for you to use in your own projects (download links at the bottom of the article).
november 2011 by 44sunsets
Nivo Slider - The Most Awesome jQuery Image Slider
april 2010 by 44sunsets
16 unique transition effects
Simple clean & valid markup
Loads of settings to tweak
Built in directional and control navigation
Packed version only weighs 15kb
Supports linking images
Keyboard Navigation
HTML Captions
Free to use and abuse under the MIT license
Browser Support
Nivo Slider has been tested in the following browsers:
Internet Explorer v7+
Firefox v3+
Google Chrome v4+
Safari v4+
Opera v10+
webdev
web
design
development
javascript
jquery
image
images
slider
scroller
slideshow
script
gallery
transition
effects
imageslider
nivo
plugin
carousel
js
photo
Simple clean & valid markup
Loads of settings to tweak
Built in directional and control navigation
Packed version only weighs 15kb
Supports linking images
Keyboard Navigation
HTML Captions
Free to use and abuse under the MIT license
Browser Support
Nivo Slider has been tested in the following browsers:
Internet Explorer v7+
Firefox v3+
Google Chrome v4+
Safari v4+
Opera v10+
april 2010 by 44sunsets
swfIR: swf Image Replacement
february 2007 by 44sunsets
swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and F…
imported
Bookmarks
swfIR
web
design
development
Flash
image
replacement
photos
effects
frames
shadow
corner
rotate
border
february 2007 by 44sunsets
Dragon Labs | The Octopus Engine
june 2006 by 44sunsets
The Octopus Engine attempts to unify techniques for rounded corners, drop shadows, custom borders and faux columns, all in one pretty package. It’s an all-in-one, one in all approach, encompassing whatever effects one needs. Pros And Cons The advantages
web
design
development
CSS
HTML
effects
Javascript
rounded
round
corners
drop
shadows
borders
faux
columns
june 2006 by 44sunsets
PATTERNS OF MILITARY RIFLE BULLETS
june 2006 by 44sunsets
Whether we like to admit it or not, the primary purpose of military rifle bullets is to disrupt human tissue. Yet the effects of bullets on bodies - the characteristic tissue disruption patterns produced by various bullets - remains unclear even to many o
military
rifle
bullet
rounds
wounding
patterns
effects
ballistics
humane
inhumane
ballistic
performance
june 2006 by 44sunsets
Moving to the dark side of the screen - Technology - smh.com.au
may 2006 by 44sunsets
Claims linking video games to murders rattle the powerful industry, reports Deborah Cameron. Incorruptible … Japanese video games companies seduce their critics. Incorruptible … Japanese video games companies seduce their critics. Related coverage * G
video
games
computer
violence
brain
effects
desensitise
controversy
lobby
Jack
Thompson
may 2006 by 44sunsets
related tags
8bit ⊕ Adobe ⊕ air ⊕ art ⊕ ballistic ⊕ ballistics ⊕ blocks ⊕ Bookmarks ⊕ border ⊕ borders ⊕ brain ⊕ bullet ⊕ canvas ⊕ carousel ⊕ color ⊕ colorcycling ⊕ colors ⊕ colour ⊕ colourcycling ⊕ colours ⊕ columns ⊕ computer ⊕ controversy ⊕ corner ⊕ corners ⊕ CSS ⊕ curtain ⊕ cycle ⊕ cycling ⊕ desensitise ⊕ design ⊕ development ⊕ diagonal ⊕ drop ⊕ dropping ⊕ effects ⊖ fading ⊕ faux ⊕ Flash ⊕ frames ⊕ free ⊕ gallery ⊕ games ⊕ generator ⊕ graphic ⊕ HTML ⊕ html5 ⊕ humane ⊕ image ⊕ images ⊕ imageslider ⊕ imported ⊕ inhumane ⊕ iphone ⊕ Jack ⊕ javascript ⊕ jquery ⊕ js ⊕ lessons ⊕ lobby ⊕ military ⊕ Morris ⊕ nivo ⊕ oldschool ⊕ online ⊕ palette ⊕ patterns ⊕ performance ⊕ photo ⊕ photos ⊕ Photoshop ⊕ plugin ⊕ replacement ⊕ rifle ⊕ rotate ⊕ round ⊕ rounded ⊕ rounds ⊕ script ⊕ scroller ⊕ shadow ⊕ shadows ⊕ shift ⊕ slider ⊕ slideshow ⊕ sliding ⊕ special ⊕ swfIR ⊕ techniques ⊕ Thompson ⊕ tilt ⊕ tilt-shift ⊕ tiltshift ⊕ transition ⊕ Trevor ⊕ tricks ⊕ tutorials ⊕ unique ⊕ video ⊕ violence ⊕ walkthroughs ⊕ web ⊕ webapp ⊕ webdev ⊕ winding ⊕ wounding ⊕Copy this bookmark: