Category Archives: color

QuickShader Micro-Lib

By Zevan | August 18, 2018

In 2015 I created QuickShader… which just takes the boilerplate out of showing a shader in the browser. Here are a few examples:

Also posted in Graphics, Math, glsl, graphics algorithms, html5, javascript, motion, pixel manipulation | Tagged , | Leave a comment

Interesting Texture #3 (animated)

By Zevan | August 18, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4. var clone:BitmapData = new BitmapData(500,500,false, 0x000000);
  5. var canvasRect:Rectangle = canvas.rect;
  6. var w:int = canvas.width;
  7. var w2:Number = 1/w;
  8. var w10:Number = 1/(w * 80);
  9. var convert:Number = Math.PI/180;
  10. var size:int = canvas.width * canvas.height;
  11. var pix:Vector.<uint> = new Vector.<uint>(size, true);
  12. var gray:ColorMatrixFilter = new ColorMatrixFilter([1, 0.55, 0.55, 0,0,0.55, 0.9, 0.55, 0,0,0.55, 0.55, 0.550,0, 0,0,0,1,0]);
  13. var m:Matrix = new Matrix();
  14. m.scale(1,-1);
  15. m.translate(0,canvas.height);
  16. var sin:Number = 0, cos:Number = 0;
  17. var dx:Number = 0, dy:Number = 0;
  18. var pnt:Point = new Point();
  19. var blur:BlurFilter = new BlurFilter(10,10,1);
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     canvas.lock();
  23.     dx += (mouseX * 10 - 3000 - dx) / 8;
  24.     dy += (mouseY * 4 - dy) / 8;
  25.     for (var i:int = 0; i<size; i++){
  26.         var xp:int = i % w;
  27.         var yp:int = int(i * w2);
  28.         var xp2:int = xp <<1;
  29.         var t:Number = (yp * (xp2 + dx) * w10) % 3.14687;
  30.         //compute sine
  31.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  32.         // by Michael Baczynski
  33.         if (t<0) {
  34.             sin=1.27323954*t+.405284735*t*t;
  35.         } else {
  36.             sin=1.27323954*t-0.405284735*t*t;
  37.         }
  38.         // compute cosine
  39.         t = (xp2 + dy) * convert % 6.28;
  40.         t+=1.57079632;
  41.         if (t>3.14159265) {
  42.             t-=6.28318531;
  43.         }
  44.         if (t<0) {
  45.             cos=1.27323954*t+0.405284735*t*t;
  46.         } else {
  47.             cos=1.27323954*t-0.405284735*t*t;
  48.         }
  49.         var c1:int = 31 * (cos - sin);
  50.         if (c1 <0) c1 = 256 - c1;
  51.         c1 = (c1 <<2 | c1) ;
  52.         pix[i] = c1 <<15 | c1 <<9 | c1;
  53.     }
  54.     canvas.setVector(canvasRect, pix);
  55.     clone.copyPixels(canvas, canvasRect, pnt);
  56.     canvas.draw(clone, m, null, BlendMode.SUBTRACT);
  57.     clone.copyPixels(canvas, canvasRect, pnt);
  58.     clone.applyFilter(clone, canvasRect, pnt, blur);
  59.     canvas.draw(clone, null, null, BlendMode.ADD);
  60.     canvas.applyFilter(canvas, canvas.rect, new Point(0,0), gray);
  61.     canvas.unlock();
  62. }

This snippet creates an interactive animated texture. Originally this texture wasn an unoptimized messy code snippet (see the original post here) - I went through and did a few optimizations to get it running in real-time and this is the result:

Check out the swf over at wonderfl.net...

Also posted in BitmapData, Vector, pixel manipulation | Tagged , , | Leave a comment

HSV Color Type

By Zevan | June 24, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=560,height=300,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var key:Object = new Object();
  4. var alphabet:Array = "abcdefghijklmnopqrstuvwxyz".split("");
  5.  
  6. var num:Number = alphabet.length;
  7. var step:Number = 360 / num;
  8.  
  9. var colors:Object = new Object();
  10. for (var i:int  = 0; i<num; i++){
  11.     var index:String = alphabet[i];
  12.      key[index] = 65 + i;
  13.      var c:Array = hsv(i * step, 1, 1);
  14.      colors[index] = c[0] <<16 | c[1] <<8 | c[2];
  15. }
  16. alphabet.push("32");
  17. num++;
  18. key["32"] = 32;
  19. colors["32"]  = 0x333333;
  20. x = y = 10;
  21. var count:int = 0;
  22. var size:int = 20;
  23. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  24. function onKeyPressed(evt:KeyboardEvent):void{
  25.     for (var i:int= 0; i<num; i++){
  26.         var index:String = alphabet[i];
  27.          if (index == "32"){
  28.             trace("hi", evt.keyCode, key[index]);
  29.          }
  30.         if (evt.keyCode == key[index]){
  31.             graphics.beginFill(colors[index]);
  32.             var xp:int = count % num * size;
  33.             var yp:int = int(count / num) * size;
  34.             graphics.drawRect(xp, yp, size, size);
  35.             count++;
  36.         }
  37.     }
  38. }
  39. // ported from here:
  40. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  41. function hsv(h:Number, s:Number, v:Number):Array{
  42.     var r:Number, g:Number, b:Number;
  43.     var i:int;
  44.     var f:Number, p:Number, q:Number, t:Number;
  45.     if (s == 0){
  46.         r = g = b = v;
  47.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  48.     }
  49.     h /= 60;
  50.     i  = Math.floor(h);
  51.     f = h - i;
  52.     p = v *  (1 - s);
  53.     q = v * (1 - s * f);
  54.     t = v * (1 - s * (1 - f));
  55.     switch( i ) {
  56.         case 0:
  57.             r = v, g = t, b = p;
  58.             break;
  59.         case 1:
  60.             r = q, g = v, b = p;
  61.             break;
  62.         case 2:
  63.             r = p, g = v, b = t;
  64.             break;
  65.         case 3:
  66.             r = p, g = q, b = v;
  67.             break;
  68.         case 4:
  69.             r = t, g = p, b = v;
  70.             break;
  71.         default:        // case 5:
  72.             r = v, g = p, b = q;
  73.             break;
  74.     }
  75.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  76. }

This snippet is a typing experiment - for every letter, you type a box filled with a specific color is drawn to the stage. The color associated with each letter is determined by moving through hsv color space - so typing an alphabet will end up with something resembling a spectrum.

Also posted in Graphics, UI, keys | Tagged , , | Leave a comment

Distance Render

By Zevan | May 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. var verts:Vector.<Number> = new Vector.<Number>();
  2. var pVerts:Vector.<Number> = new Vector.<Number>();
  3. var uvts:Vector.<Number> = new Vector.<Number>();
  4.  
  5. var hs:Number = 2.3;
  6. var step:Number = 0.04;
  7.  
  8. var tVerts:Vector.<Number> = new Vector.<Number>();
  9. var rVerts:Vector.<Number> = new Vector.<Number>();
  10. var matrix:Matrix3D = new Matrix3D();
  11. matrix.identity();
  12. matrix.appendRotation(45,Vector3D.Y_AXIS);
  13. matrix.appendRotation(45,Vector3D.X_AXIS);
  14. var inc:int = 0;
  15. var i:Number, j:Number, k:Number;
  16. i = hs;
  17. while( i> -hs){
  18.     j = hs;
  19.     while(j> -hs){
  20.         k = hs;
  21.         while(k> -hs){
  22.             tVerts[inc] = -i;
  23.             inc++
  24.             tVerts[inc] = -j;
  25.             inc++
  26.             tVerts[inc] = -k;
  27.             inc++
  28.             k -= step;
  29.         }
  30.         j -= step;
  31.     }
  32.     i -= step;
  33. }
  34.  
  35. matrix.transformVectors(tVerts, rVerts);
  36.  
  37. var vinc:int = 0;
  38. inc = 0
  39. var R:Number = 1.5;
  40. var r:Number = .5;
  41. for (i= -hs; i<hs; i+=step){
  42.     for (j = -hs; j<hs; j+=step){
  43.         for (k = -hs; k<hs; k+=step){
  44.             var vx:Number = rVerts[inc] ;
  45.             inc++
  46.             var vy:Number = rVerts[inc]  ;
  47.             inc++
  48.             var vz:Number=  rVerts[inc] ;
  49.             inc++
  50.             var s:Number = Math.pow(vx  * vx  + vy * vy + vz * vz + R*R - r * r, 2) - 4 * (R * R)*(vx * vx + vy * vy);
  51.             if (s <0 && s> -.5){
  52.                 verts[vinc] = (i * 50);
  53.                 vinc++
  54.                 verts[vinc] = (j * 50);
  55.                 vinc++
  56.                 verts[vinc] = (k * 50);
  57.                 vinc++
  58.                   inc += int((hs - k) / step) * 3;
  59.                   k = hs;
  60.              }
  61.         }
  62.     }
  63. }
  64.  
  65. var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
  66. addChild(new Bitmap(canvas));
  67. render();
  68. function render():void{
  69.     matrix.identity();
  70.     matrix.appendTranslation(200, 200, 0);
  71.     Utils3D.projectVectors(matrix, verts, pVerts, uvts);
  72.     canvas.lock();
  73.     canvas.fillRect(canvas.rect, 0x000000);
  74.     var inc:int = 2;
  75.     var c:int = 0;
  76.     var r:Rectangle = new Rectangle();
  77.     r.width = r.height = 2;
  78.     for (var i:int = 0; i<pVerts.length; i+=2){
  79.           r.x = pVerts[i];
  80.           r.y = pVerts[i + 1];
  81.           c = Math.max(0,100 - verts[inc]);
  82.           canvas.fillRect(r, c <<16 | c <<8 | c);
  83.           inc += 3;
  84.     }
  85.     canvas.unlock();
  86. }

This snippet uses some of the techniques from the last few posts to create a distance render - this renders the implicit equation for a torus.

Also posted in BitmapData, Math, Vector, graphics algorithms, matrix, pixel manipulation | Tagged , | Leave a comment

(HSV HSB) to RGB

By Zevan | February 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=720,height=360,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. // ported from here:
  4. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  5.  
  6. function hsv(h:Number, s:Number, v:Number):Array{
  7.     var r:Number, g:Number, b:Number;
  8.     var i:int;
  9.     var f:Number, p:Number, q:Number, t:Number;
  10.      
  11.     if (s == 0){
  12.         r = g = b = v;
  13.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  14.     }
  15.    
  16.     h /= 60;
  17.     i  = Math.floor(h);
  18.     f = h - i;
  19.     p = v *  (1 - s);
  20.     q = v * (1 - s * f);
  21.     t = v * (1 - s * (1 - f));
  22.    
  23.     switch( i ) {
  24.         case 0:
  25.             r = v;
  26.             g = t;
  27.             b = p;
  28.             break;
  29.         case 1:
  30.             r = q;
  31.             g = v;
  32.             b = p;
  33.             break;
  34.         case 2:
  35.             r = p;
  36.             g = v;
  37.             b = t;
  38.             break;
  39.         case 3:
  40.             r = p;
  41.             g = q;
  42.             b = v;
  43.             break;
  44.         case 4:
  45.             r = t;
  46.             g = p;
  47.             b = v;
  48.             break;
  49.         default:        // case 5:
  50.             r = v;
  51.             g = p;
  52.             b = q;
  53.             break;
  54.     }
  55.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  56. }
  57.  
  58.  
  59. //
  60. //  -- test it out by drawing a few things
  61. //
  62.  
  63. var canvas:BitmapData = new BitmapData(720, 360, false, 0x000000);
  64.  
  65. addChild(new Bitmap(canvas));
  66.  
  67. canvas.lock();
  68. var size:int = canvas.width * canvas.height;
  69. var xp:int, yp:int, c:Array, i:int;
  70.  
  71. for (i = 0; i<size; i++){
  72.     xp = i % 360;
  73.     yp = i / 360;
  74.     c =  hsv(xp, 1, yp / 360);
  75.     canvas.setPixel(xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
  76. }
  77.  
  78. var dx:Number, dy:Number, dist:Number, ang:Number;
  79.  
  80. for (i = 0; i<size; i++){
  81.     xp = i % 360;
  82.     yp = i / 360;
  83.     dx = xp - 180;
  84.     dy = yp - 180;
  85.     dist = 1 - Math.sqrt((dx * dx) + (dy * dy)) / 360;
  86.     ang = Math.atan2(dy, dx) / Math.PI * 180;
  87.     if (ang <0){
  88.         ang += 360;
  89.     }
  90.     c =  hsv(ang, 1, dist);
  91.     canvas.setPixel(360 + xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
  92. }
  93. canvas.unlock();

This is one of those things I've been meaning to play with for awhile. The above demos a function called hsv() which takes 3 arguments: angle (0-360), saturation(0-1) and value(0-1). The function returns an array of rgb values each with a range of (0-255).

There's some room for optimization here, but for clarity I left as is. Even just playing with HSV (also know as HSB) for a few minutes, I see some interesting potential for dynamically generating color palettes for generative style experiments.

I looked around for the most elegant looking code snippet to port in order to write this... I eventually stumbled upon this great resource.

If you test the above on your timeline it will generate this image:

I usually only post one snippet a day... not sure why I decided to post two today.

Also posted in BitmapData, graphics algorithms, pixel manipulation, setPixel | Tagged , , | 6 Comments

E4X and ActionScript Variables

By Zevan | December 30, 2008
CLICK HERE TO COPY
Actionscript:
  1. var backgroundColor:uint = 0xEFEFEF;
  2. var borderColor:uint = 0xFF0000;
  3. var buttonOverColor:uint = 0x0000FF;
  4. var buttonOutColor:uint = 0x00CCCC;
  5.  
  6. var uiColors:XML = <ui>
  7.     <default color="0xCCCCCC" />
  8.     <background color = { backgroundColor } />
  9.    
  10.     <!-- note hexidecimal formatting code -->
  11.     <border color={ ("0x" + borderColor.toString(16)) } />
  12.    
  13.     <button overColor={ buttonOverColor} outColor={ buttonOutColor } />
  14. </ui>
  15.  
  16. trace(uiColors.toXMLString());
  17.  
  18. /*outputs:
  19. <ui>
  20.   <default color="0xCCCCCC"/>
  21.   <background color="15724527"/>
  22.   <border color="0xff0000"/>
  23.   <button overColor="255" outColor="52428"/>
  24. </ui>
  25. */

The first time I needed to use an ActionScript variable within inline XML I was stumped. I couldn't figure it out and I wasn't able to easily find it on google. I eventually found it somewhere (don't remember where... possibly hidden away in the docs).

Now a search for "insert actionscript variables into e4x" on google gives plenty of results. But I figure it's worth a post.

I use actionscript to generate XML all the time so this comes in handy. I also store color values in automatically generated XML all the time. If I'm feeling organized I'll use something like what you see on line 10:

CLICK HERE TO COPY
Actionscript:
  1. <border color={ ("0x" + borderColor.toString(16)) } />

If you look at the output you'll see this formats the uint so that it's readable as a hex number. By default (as you can see in the output) uints will show up in decimal notation. This really doesn't make any difference if you don't care about XML readability ... or if you just don't care about the readability of the colors stored in your XML.....

Also posted in XML, variables | Tagged , , , | Leave a comment

Isometric Voxels

By Zevan | December 28, 2008
CLICK HERE TO COPY
Actionscript:
  1. // isometric conversion
  2. var centerX:Number=stage.stageWidth/2;
  3. var centerY:Number=stage.stageHeight/2;
  4. var theta:Number=Math.PI/4;// 45 degrees;
  5. var cosX:Number=Math.cos(theta);
  6. var sinX:Number=Math.sin(theta);
  7. var pnt:Point = new Point();
  8. function iso3D(x:Number, y:Number, z:Number):Point {
  9.     pnt.x = centerX + (x-z) *  cosX
  10.     pnt.y = centerY -  (x+z) * 0.5 * sinX - y;
  11.     return pnt;
  12. }
  13. // example:
  14. var canvas:BitmapData=new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFF000000);
  15. addChild(new Bitmap(canvas,"auto",true));
  16. var size:int=100;
  17. var hs:int=size / 2;
  18. var pen:Point = new Point();
  19. var vect:Vector3D = new Vector3D();
  20. // draw a few shapes with offset:
  21. for (var dist:int = 10; dist <= 80; dist *= 2) {
  22.     // voxel space:
  23.     for (var i:int = 0; i<size; i++) {
  24.         for (var j:int = 0; j<size; j++) {
  25.             for (var k:int = 0; k<size; k++) {
  26.                 vect.x=j-hs;
  27.                 vect.y=i-hs;
  28.                 vect.z=k-hs;
  29.                 pen = iso3D(vect.x,vect.y,vect.z);
  30.                 if (Math.sqrt((vect.x * vect.x) + (vect.y * vect.y) + (vect.z * vect.z)) <dist) {
  31.                     // using Vector3D.distance() is very slow compared to above
  32.                     // a few types of coloring:
  33.                     var xp:Number = pen.x + (dist <<2) - 200;
  34.                     canvas.setPixel(xp, pen.y-100, (i <<16 | j <<8 | k) <<1);
  35.                     canvas.setPixel(xp, pen.y+100, (k <<16 | k <<8 | k+j)  );
  36.                 }
  37.             }
  38.         }
  39.     }
  40. }

The above will draw this:

You can read more about voxels here.

This isn't the speediest way to do voxels (especially if you want to animate). This was just the first thing that came to mind.

Also posted in 3D, BitmapData, pixel manipulation, setPixel | Tagged , , , | 3 Comments

MovieClip.prototype

By Zevan | November 22, 2008
CLICK HERE TO COPY
Actionscript:
  1. MovieClip.prototype.tint = function(col:uint):void {
  2.     var ct:ColorTransform = transform.colorTransform;
  3.     ct.color = col;
  4.     this.transform.colorTransform = ct;
  5. }
  6.  
  7. var circle:MovieClip = MovieClip(addChild(new MovieClip()));
  8. with (circle.graphics) {
  9.     beginFill(0x123455);
  10.     drawCircle(0,0,50);
  11.     x = 100;
  12.     y = 100;
  13. }
  14.  
  15. circle.tint(0xFF0000);

When AS3 first came out I didn't realize that prototype was still around.... This adds a function called tint() to all MovieClips. You should extend MovieClip instead of using this method.... but it's interesting to see that it's still around. There's an explanation of prototype and the AS3 namespace here.

Also posted in MovieClip | Tagged , , , | Leave a comment

Basic Tint Function

By Zevan | November 17, 2008
CLICK HERE TO COPY
Actionscript:
  1. // display object, red (0-255), green, blue, amount (0-1)
  2. function tint(dsp:DisplayObject, r:Number, g:Number, b:Number, amount:Number=1):void {
  3.     if (amount != 1) {
  4.         r *= amount;
  5.         g *= amount;
  6.         b *= amount;
  7.     }
  8.     amount = 1-amount;
  9.     var ct:ColorTransform = transform.colorTransform;
  10.     ct.redOffset = r;
  11.     ct.redMultiplier = amount;
  12.     ct.greenOffset = g;
  13.     ct.greenMultiplier = amount;
  14.     ct.blueOffset = b;
  15.     ct.blueMultiplier = amount;
  16.     dsp.transform.colorTransform = ct;
  17. }
  18.  
  19. // test out the tint function on a circle with a stroke:
  20. var circle:Shape = Shape(addChild(new Shape()));
  21. with (circle.graphics) {
  22.     lineStyle(5, 0x339999);
  23.     beginFill(0x003333);
  24.     drawCircle(0,0,50);
  25.     x = 100;
  26.     y = 100;
  27. }
  28.  
  29. // tint the circle 50% green
  30. tint(circle, 0, 255, 0, .5);

The ColorTransform object is a little confusing with its "redMultiplier, redOffset, greenMultiplier etc..." properties. Once you understand them it's not a big deal, but I still find them a bit cumbersome. So when I just want to tint a clip similar to the way you might tint a clip in the IDE... I use this tint function. Rather than taking a hexidecimal number it takes values for red, green and blue (0-255) - and an amount argument (0-1).

Posted in color | Tagged , , , | 1 Comment