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:
By Zevan | August 3, 2018
Awhile back, I wrote some collision detection code that blitted existing interactive SVG to Canvas and then used the pixel data to figure out various aspects of the relationships between arbitrary SVG nodeTypes. A really simple trick I used can be seen in this pen:
The trick is to load the svg data into an image as a datauri. There are other tricks like this - one of which is using an svg `foreignObject` to blit html to canvas:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
There were some browser issues at the time with this. The main one being IE 10/11 didn’t really work (tainted canvas if I recall correctly). The `foreignObject` trick didn’t work with image xlink:hrefs in safari at the time… (weirdly if you opened the dev tools it would start to work) anyway…
I ended up forking canvg for various cases. canvg is really cool… just a note, a coworker of mine went in at some point and optimized it like crazy and improved the perf a good deal by “drying things up”. Maybe I’ll suggest that he submit his optimizations at some point.
Also posted in Graphics, html5, javascript, misc, svg | Tagged blitting, canvas, canvg, foreignObject, javascript, svg, trick |
By Zevan | March 11, 2010
Actionscript:
-
[SWF(width = 800, height= 600)]
-
var sw:Number = 800;
-
var sh:Number = 600;
-
var pixelNum:int = sw * sh;
-
var blurAmount:Number = 10;
-
var pnt:Point = new Point(0,0);
-
var rect:Rectangle = new Rectangle(0,0,sw,sh);
-
-
var canvas:BitmapData = new BitmapData(sw, sh, false, 0x000000);
-
var buffer:BitmapData = new BitmapData(sw, sh, false, 0x000000);
-
var feed :BitmapData = new BitmapData(sw, sh, false, 0x000000);
-
var prev :BitmapData = new BitmapData(sw, sh, false, 0x000000);
-
-
var frame:Bitmap = new Bitmap(canvas, "auto", true);
-
addChild(frame);
-
-
var cam:Camera = Camera.getCamera();
-
cam.setMode(sw,sh,12);
-
var video:Video = new Video(sw, sh);
-
video.attachCamera(cam);
-
-
cam.addEventListener(ActivityEvent.ACTIVITY, onActivityStart);
-
-
function onActivityStart(evt:ActivityEvent):void {
-
addEventListener(Event.ENTER_FRAME, onRun);
-
cam.removeEventListener(ActivityEvent.ACTIVITY, onActivityStart);
-
}
-
-
function onRun(evt:Event):void{
-
buffer.draw(video);
-
feed.copyPixels(buffer, rect, pnt);
-
buffer.draw(prev, null, null, BlendMode.DIFFERENCE);
-
prev.draw(video);
-
canvas.copyPixels(buffer, rect, pnt);
-
}
This snippet shows a simple method to do frame differencing with a web cam. This is useful for detecting which areas of the screen have change from frame to frame. This post assumes you pretty much know what frame differencing is.
You can view an swf file here:
This is one of those things I do a good deal but never wrapped up into a library... it's easy (for me at least) to forget exactly how to set it up from scratch.
I added an extra buffer because it's pretty common that you'll want to other things aside from just frame differencing alone, so it's nice to have it all wrapped up in a buffer BitmapData that you can use elsewhere. If speed is a real concern, you can do away with the buffer and just use the canvas instead - depending on what kind of analysis your doing on the frame differenced image it may be trickier without the buffer.
By Zevan | January 3, 2010
Actionscript:
-
[SWF(width = 500, height = 500, frameRate = 30)]
-
-
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
-
-
var indexCanvas:BitmapData = new BitmapData(stage.stage.stageWidth, stage.stageHeight, false,
-
0xFFFFFF);
-
addChild(new Bitmap(canvas));
-
-
var s:Shape = new Shape();
-
-
var lineData:Array = [];
-
var dataIndex:int = 0;
-
-
trace(0xFFFFFF - 1)
-
var totalLines:int = 20000;
-
var iterations:int = 9;
-
var linesPerIter:int = totalLines / iterations;
-
-
var xp:int = stage.stageWidth / 2;
-
var yp:int = stage.stageHeight / 2;
-
-
var stepAmt:Number = 60;
-
var halfStepAmt:Number = stepAmt / 2;
-
-
addEventListener(Event.ENTER_FRAME, onDraw);
-
function onDraw(evt:Event):void {
-
if (lineData.length <totalLines){
-
generateData(linesPerIter);
-
}else{
-
stage.quality = "high";
-
addChild(s);
-
s.x = 0;
-
s.y = 0;
-
-
removeEventListener(Event.ENTER_FRAME, onDraw);
-
addEventListener(Event.ENTER_FRAME, onRun);
-
}
-
}
-
-
function onRun(evt:Event):void {
-
var currentIndex:int = indexCanvas.getPixel(mouseX, mouseY);
-
var currentLine:Array = lineData[currentIndex];
-
-
s.graphics.clear();
-
if (currentIndex != 0xFFFFFF){
-
s.graphics.lineStyle(3, 0xFF0000);
-
s.graphics.moveTo(currentLine[0], currentLine[1]);
-
s.graphics.lineTo(currentLine[2], currentLine[3]);
-
}
-
}
-
-
function generateData(num:int):void{
-
var rxA:int, rxB:int, ryA:int, ryB:int;
-
var g:Graphics = s.graphics;
-
for (var i:int = 0; i<num; i++){
-
rxA = xp;
-
ryA = yp;
-
-
xp += Math.round(Math.random() * stepAmt) - halfStepAmt;
-
yp += Math.round(Math.random() * stepAmt) - halfStepAmt;
-
-
if (xp> stage.stageWidth){
-
xp = stage.stageWidth - halfStepAmt;
-
}else
-
if (xp <0){
-
xp = halfStepAmt;
-
}
-
if (yp> stage.stageHeight){
-
yp = stage.stageHeight - halfStepAmt;
-
}else
-
if (yp <0){
-
yp = halfStepAmt;
-
}
-
-
rxB = xp;
-
ryB = yp;
-
-
lineData[dataIndex] = [rxA, ryA, rxB, ryB];
-
s.x = rxA;
-
s.y = ryA;
-
var endX:Number = rxB - rxA;
-
var endY:Number = ryB - ryA;
-
var m:Matrix = s.transform.matrix;
-
g.clear();
-
g.lineStyle(1, 0x000000, 0.3);
-
-
g.lineTo(endX, endY);
-
stage.quality = "high";
-
canvas.draw(s, m);
-
-
g.clear();
-
g.lineStyle(3, dataIndex);
-
-
g.lineTo(endX, endY);
-
stage.quality = "low";
-
indexCanvas.draw(s, m);
-
-
dataIndex++
-
}
-
}
I'm working on a data visualization that contains a long path made up of approximately one million points. There is some information associated with every two sets of coordinates that needs to be displayed when the user rolls their mouse over any part of the line.
I took a little time to think about the best way to do this and came up with a few techniques. The first one I tried seems to work nicely - this snippet is the proof of concept for that first technique. I tested this snippet with 1,000,000 xy coordinates and it works nicely. It takes a little while to draw though, so for the purposes of this demo I've just included 20,000 coordinates.
Have a look at the swf over at wonderfl.net
The way this works is by drawing lines to two different BitmapData instances. I draw anti-aliased slightly transparent lines to a BitmapData instance called "canvas" (this is added to the display list) - I then draw aliased lines to a BitmapData called "indexCanvas" (this is never added to the display list) - each aliased line uses an incremental value for its color - this incremental value is also the index for a two dimensional array containing the coordinate information for the aliased line. I use getPixel() on the "indexCanvas" and use the return value as the index for the 2D array. The data from the 2D array is used to draw a red line with the graphics class. This technique enables you to have many many rollovers and all you ever have to do is call getPixel() and use the returned color value to look up info about what you're mouse is touching.
There are a few cool ways this could be repurposed and this is really only one solution to the problem of having many many things that you need to be able to rollover... there are others that don't use BitmapData at all... I may write those up in the next couple of days.
Also posted in BitmapData, Data Structures, UI, arrays, display list, graphics algorithms, matrix, misc, return values | Tagged actionscript, as3, flash |