Category Archives: color

Blobby WebGL

By Zevan | November 11, 2024

Still speed-coding shorts for youtube these last few months… - move your mouse over the codepen below - click and hold to zoom out :D

https://www.youtube.com/@zevanrosser/shorts

Also posted in 3D, Graphics, Math, glsl, graphics algorithms, html5, javascript, matrix, misc, motion, webgl | Leave a comment

Updates Shorts and Rbn… snippet.zone zapp.codes etc…

By Zevan | June 27, 2024

I started making youtube shorts using a monaco-powered micro-editor I created called https://zapp.codes. Check them out here: https://www.youtube.com/@shapevent/shorts

I don’t think I ever mentioned https://snippet.zone here. It’s just another actionsnippet-like site I created a few years ago… I don’t update it all that frequently but it has many snippets mostly written in js.

recent fork of a snippet.zone that I used in a short…

Here’s a short showing something I did for genuary 2022…

Also posted in Graphics, es6, glsl, graphics algorithms, html5, javascript, misc | Leave a comment

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