migablitter: How does this tornado effect work ?
category: code [glöplog]
make that 3 long lines of code :)
subj on JavaScript: http://www.bel.fi/~alankila/rotzoomer.html
Nice, but slow as fuck here...
raer, slow? 0_o Use Chrome, FF, Opera, and be happy. This js rotozoomer very fast on my netbook (1.8 gigagerz, Ubuntu)
Strange, but it takes ~1minute (read: f%king ages) till that spot in the middle grows to 10x10 pixel... (Win7, FF4 and i5 here)
Ops, not use Firefox for this http://www.bel.fi/~alankila/rotzoomer.html !!! ;)
In Chrome and Opera this JS-code work fast
In Chrome and Opera this JS-code work fast
it's perfectly fast in firefox on my netbook, and shit slow on my high-end work pc. *sigh*
works fast on chrome! :D
thank a lot for this link, now I can code the end part of this beauty! :')
Someone knows the coder of this javascript? I want to ask if I can borrow the code :)
thank a lot for this link, now I can code the end part of this beauty! :')
Someone knows the coder of this javascript? I want to ask if I can borrow the code :)
Gargaj. Indeed wtf. Runs really fast on my Work-PC with the same FF version, an E8400 and WinXP...
Cool! Runs "kind of" ok on my mac here (safari, core i5 something). Seems to be smooth, but then stops completely for a short time every 2-3 seconds.
Did you check the interference effect, from the same dude? Neat...
Pretty crude, but sorta lets you use float values for zoom and rotation:
Code:
onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var getRandom8BitValue = function() {
return Math.floor(Math.random() * 13);
};
var colors = [192, 64, 128];
var putRandomPixel = function(x, y) {
for (var i = 0; i < 3; i ++) {
colors[i] += getRandom8BitValue() - 6;
colors[i] &= 0xff;
}
ctx.fillStyle = "rgb(" + colors + ")";
ctx.fillRect(x, y, 1, 1);
};
var zoomField = document.getElementById("zoom");
var rotationField = document.getElementById("rotation");
var ditherBox = document.getElementById("dither");
var pos = 0;
Math.signum = function(num) {
if(num<0) return -1;
if(num>0) return 1;
return 0;
};
var zoom;
var oldzoom;
var izoom;
var restzoom;
var errorzoom;
var rotation;
var oldrot;
var irot;
var restrot;
var errorrot;
setInterval(function() {
var newzoom = parseFloat(zoomField.value);
if (isNaN(newzoom))
newzoom = 0;
var newrotation = parseFloat(rotationField.value);
if (isNaN(newrotation))
newrotation = 0;
if (oldzoom != newzoom) {
oldzoom = newzoom;
zoom = newzoom;
izoom = Math.floor(zoom);
restzoom = zoom - izoom;
errorzoom = 0;
}
if (oldrot != newrotation) {
oldrot = newrotation;
rotation = newrotation;
irot = Math.floor(rotation);
restrot = rotation - irot;
errorrot = 0;
}
if (Math.abs(errorzoom) > 1) {
errorzoom -= Math.signum(errorzoom);
zoom = izoom + Math.signum(errorzoom);
}
else {
zoom = izoom;
}
if (Math.abs(errorrot) > 1) {
errorrot -= Math.signum(errorrot);
rotation = irot + Math.signum(errorrot);
}
else {
rotation = irot;
}
/* XXX work out how to compensate for the bias.
* the bias is really a function of where the stationary center
* of the image is combined with the average properties of the
* center shuffling mechanism. The center is defined as the point
* which is moved as little as possible by the deformations. */
for (var y = 0; y < 2; y ++) {
for (var x = 0; x < 2; x ++) {
putRandomPixel(
286 + x - (rotation < 0 ? 16 : 0),
302 + y - (rotation < 0 ? 16 : 0)
);
}
}
/* shuffle image center around deterministically */
pos ++;
var shift = 0;
if (ditherBox.checked) {
for (var i = 0; i < 5; i ++) {
shift <<= 1;
shift |= (pos >> i) & 1;
}
/* inject some long-term variation */
shift = shift ^ (pos >> 5) & 0x1f;
}
/* now move graphics around. */
var pieceSize = 32;
var dataChunks = [];
for (var y = 0; y < 17; y ++) {
for (var x = 0; x < 17; x ++) {
var data = ctx.getImageData(
x * pieceSize + shift + (16 - y) * rotation + x * zoom,
y * pieceSize + shift + x * rotation - (16 - y) * zoom,
pieceSize, pieceSize);
dataChunks.push(data);
}
}
var i = 0;
for (var y = 0; y < 17; y ++) {
for (var x = 0; x < 17; x ++) {
var data = dataChunks[i++];
ctx.putImageData(data, x * pieceSize + shift + 8 * rotation + 8 * zoom, y * pieceSize + shift + 8 * rotation - 8 * zoom);
}
}
errorzoom += restzoom;
errorrot += restrot;
}, 20);
};
My super-light JS-version http://www.labinsk.ru/tmp/rotozoom/rotozooma2.html (only FireFox!) Enjoy! ;)
My super-light JS-version http://www.labinsk.ru/tmp/rotozoom/rotozooma2.html (only FireFox!) Enjoy! ;)
Hehe. Canvas object rotoblitter ftw. ;)
http://pouet.net/prod.php?which=57767
my prod w/src. n-joy!
my prod w/src. n-joy!
