pouët.net

migablitter: How does this tornado effect work ?

category: code [glöplog]
make that 3 long lines of code :)
added on the 2011-08-07 03:14:14 by BiTL BiTL
Nice, but slow as fuck here...
added on the 2011-08-07 13:47:25 by raer raer
raer, slow? 0_o Use Chrome, FF, Opera, and be happy. This js rotozoomer very fast on my netbook (1.8 gigagerz, Ubuntu)
added on the 2011-08-08 01:13:31 by BiTL BiTL
Strange, but it takes ~1minute (read: f%king ages) till that spot in the middle grows to 10x10 pixel... (Win7, FF4 and i5 here)
added on the 2011-08-08 02:30:40 by raer raer
Ops, not use Firefox for this http://www.bel.fi/~alankila/rotzoomer.html !!! ;)

In Chrome and Opera this JS-code work fast
added on the 2011-08-09 02:54:38 by BiTL BiTL
it's perfectly fast in firefox on my netbook, and shit slow on my high-end work pc. *sigh*
added on the 2011-08-09 03:15:11 by Gargaj Gargaj
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 :)
added on the 2011-08-09 09:30:24 by rez rez
Gargaj. Indeed wtf. Runs really fast on my Work-PC with the same FF version, an E8400 and WinXP...
added on the 2011-08-09 12:03:59 by raer raer
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.
added on the 2011-08-09 12:09:53 by psonice psonice
Did you check the interference effect, from the same dude? Neat...
added on the 2011-08-09 12:15:38 by ara ara
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); };
added on the 2011-08-09 13:58:48 by raer raer
My super-light JS-version http://www.labinsk.ru/tmp/rotozoom/rotozooma2.html (only FireFox!) Enjoy! ;)
added on the 2011-08-09 16:36:14 by BiTL BiTL
My super-light JS-version http://www.labinsk.ru/tmp/rotozoom/rotozooma2.html (only FireFox!) Enjoy! ;)
added on the 2011-08-09 16:36:40 by BiTL BiTL
Hehe. Canvas object rotoblitter ftw. ;)
added on the 2011-08-09 17:55:33 by raer raer
http://pouet.net/prod.php?which=57767
my prod w/src. n-joy!

login