0xa · April 22, 2018 16:07
diff --git a/trixels.html b/trixels.html
 <!DOCTYPE html>
 <!-- saved from url=(0017)https://xomg.net/ -->
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>xomg</title>
 <style type="text/css">
    * { margin: 0; padding: 0; }
    body { background: #000; text-align: center; }
    p.noscript { color: white; font-size: 2em; }
 </style>
 <script src="CCapture.all.min.js"></script>
 <style></style></head>
 <body style="">
 <noscript>
    &lt;p class="noscript"&gt;You need javascript to see all this awesomeness. Enable it, it's totally worth it.&lt;/p&gt;
 </noscript>
 <canvas id="triangle" width="186" height="186"></canvas>
 <script>

 /*
 |-----------------|   y ^
 |  /\    /\    /\ |     |
 | /  \  /  \  /  \|     +----> x
 |/    \/    \/    |  
 |-----------------|  # lines are split into:
 |\  2 /\ 4  /\ 6  |  # x%2==0 : lower tris
 | \  /  \  /  \   |  # x%2==1 : upper tris
 |1 \/ 3  \/ 5  \  |  
 |-----------------|  

 */

 var it_points = 80;
 var keep_its = 100;

 var size = 60;
 var trixel_size = 6;

 var canvas_element = document.getElementById("triangle");
 var canvas_ctx = canvas_element.getContext("2d");

 canvas_element.height = size * trixel_size;
 canvas_element.width = size * trixel_size;
 canvas_ctx.height = size * trixel_size;
 canvas_ctx.width = size * trixel_size;

 var points = Array();

 var size_x = size * 2;
 var size_y = size;

 var triangle = [
    [size_x/2, 1],
    [1, size_y],
    [size_x, size_y]
 ];

 var px = size/2;
 var py = size/2;


 var h_mod = 1;

 function set_pixel(data, x, y, ratio) {
 	var x = Math.round(x);
 	var y = Math.round(y);
 	var offset = (x + y*size_x * trixel_size) * 4;
 	data[offset + 0] = 0xff * (ratio * 1.5 - 0.5);
 	data[offset + 1] = 0x3d * (ratio * 1.5 - 0.5);
 	data[offset + 2] = 0xa5 * (ratio * 0.5 + 0.5);
 	data[offset + 3] = 255;
 }

 function set_trixel(data, x, y, ratio) {
 	var hr = 1;
 	var hy = Math.round(y / hr);
 	
 	var half = Math.round(trixel_size / 2);
 	if (x % 2 == 0) {
 		// upper triangle
 		for (var i=0; i<trixel_size*2*hr; i++) {
 			var m = Math.round(i/2);
 			for (var j=0+m; j<trixel_size-m; j++) {
 				set_pixel(data, x*trixel_size*0.5+j, hy*trixel_size+i, ratio);
 			}
 		}
 	} else {
 		// lower triangles
 		for (var i=0; i<trixel_size*2*hr; i++) {
 			var m = trixel_size - Math.round(i/2);
 			for (var j=0+m; j<trixel_size-m; j++) {
 				set_pixel(data, x*trixel_size*0.5+j, hy*trixel_size+i, ratio);
 			}
 		}
 	}
 }

 function it(time) {
    id = canvas_ctx.createImageData(size_x * trixel_size, size_y * trixel_size);

    // Zoom
    h_mod = Math.min(1, h_mod + 0.005);
    //console.log(h_mod);

    // remove oldest iteration
    while(points.length > it_points * keep_its) {
        points.splice(0, it_points);
    }

    for (var i=0; i < it_points; i++) {
        var rpoint = triangle[Math.floor(Math.random() * 3)];
        px = Math.floor((px + rpoint[0]) / 2);
        py = Math.floor((py + rpoint[1]) / 2 * h_mod);

        points.push([px, py]);
    }

    // Background
    for (var x=0; x < size_x * trixel_size; x++) {
        for (var y=0; y < size_y * trixel_size; y++) {
            var offset = (x + y*size_x * trixel_size) * 4;
            id.data[offset + 0] = 0;
            id.data[offset + 1] = 0;
            id.data[offset + 2] = 0;
            id.data[offset + 3] = 255;
        }
    }

    // Points
    var pl = points.length;
    for (var i=0; i < pl; i++) {
        var ratio =  i / pl * 0.9;
        set_trixel(id.data, points[i][0], points[i][1], ratio);
    }

    canvas_ctx.putImageData(id, 0, 0);

    requestAnimationFrame(it);
 	if (capturer) {
 		capturer.capture(canvas_element);
 	}
 }


 var capturer = null;

 /*
 setTimeout(function() {
 	capturer = new CCapture( { format: 'gif', workersPath: './', framerate: 30, verbose: true, timeLimit: 4, display: true } );
 	capturer.start();
 }, 3000);
 //*/

 it()

 </script>

    

 </body></html>
	<!DOCTYPE html>
	<!-- saved from url=(0017)https://xomg.net/ -->
	<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>xomg</title>
	<style type="text/css">
	* { margin: 0; padding: 0; }
	body { background: #000; text-align: center; }
	p.noscript { color: white; font-size: 2em; }
	</style>
	<script src="CCapture.all.min.js"></script>
	<style></style></head>
	<body style="">
	<noscript>
	<p class="noscript">You need javascript to see all this awesomeness. Enable it, it's totally worth it.</p>
	</noscript>
	<canvas id="triangle" width="186" height="186"></canvas>
	<script>

	/*
	\|-----------------\| y ^
	\| /\ /\ /\ \| \|
	\| / \ / \ / \\| +----> x
	\|/ \/ \/ \|
	\|-----------------\| # lines are split into:
	\|\ 2 /\ 4 /\ 6 \| # x%2==0 : lower tris
	\| \ / \ / \ \| # x%2==1 : upper tris
	\|1 \/ 3 \/ 5 \ \|
	\|-----------------\|

	*/

	var it_points = 80;
	var keep_its = 100;

	var size = 60;
	var trixel_size = 6;

	var canvas_element = document.getElementById("triangle");
	var canvas_ctx = canvas_element.getContext("2d");

	canvas_element.height = size * trixel_size;
	canvas_element.width = size * trixel_size;
	canvas_ctx.height = size * trixel_size;
	canvas_ctx.width = size * trixel_size;

	var points = Array();

	var size_x = size * 2;
	var size_y = size;

	var triangle = [
	[size_x/2, 1],
	[1, size_y],
	[size_x, size_y]
	];

	var px = size/2;
	var py = size/2;


	var h_mod = 1;

	function set_pixel(data, x, y, ratio) {
	var x = Math.round(x);
	var y = Math.round(y);
	var offset = (x + ysize_x trixel_size) * 4;
	data[offset + 0] = 0xff * (ratio * 1.5 - 0.5);
	data[offset + 1] = 0x3d * (ratio * 1.5 - 0.5);
	data[offset + 2] = 0xa5 * (ratio * 0.5 + 0.5);
	data[offset + 3] = 255;
	}

	function set_trixel(data, x, y, ratio) {
	var hr = 1;
	var hy = Math.round(y / hr);

	var half = Math.round(trixel_size / 2);
	if (x % 2 == 0) {
	// upper triangle
	for (var i=0; i<trixel_size2hr; i++) {
	var m = Math.round(i/2);
	for (var j=0+m; j<trixel_size-m; j++) {
	set_pixel(data, xtrixel_size0.5+j, hy*trixel_size+i, ratio);
	}
	}
	} else {
	// lower triangles
	for (var i=0; i<trixel_size2hr; i++) {
	var m = trixel_size - Math.round(i/2);
	for (var j=0+m; j<trixel_size-m; j++) {
	set_pixel(data, xtrixel_size0.5+j, hy*trixel_size+i, ratio);
	}
	}
	}
	}

	function it(time) {
	id = canvas_ctx.createImageData(size_x * trixel_size, size_y * trixel_size);

	// Zoom
	h_mod = Math.min(1, h_mod + 0.005);
	//console.log(h_mod);

	// remove oldest iteration
	while(points.length > it_points * keep_its) {
	points.splice(0, it_points);
	}

	for (var i=0; i < it_points; i++) {
	var rpoint = triangle[Math.floor(Math.random() * 3)];
	px = Math.floor((px + rpoint[0]) / 2);
	py = Math.floor((py + rpoint[1]) / 2 * h_mod);

	points.push([px, py]);
	}

	// Background
	for (var x=0; x < size_x * trixel_size; x++) {
	for (var y=0; y < size_y * trixel_size; y++) {
	var offset = (x + ysize_x trixel_size) * 4;
	id.data[offset + 0] = 0;
	id.data[offset + 1] = 0;
	id.data[offset + 2] = 0;
	id.data[offset + 3] = 255;
	}
	}

	// Points
	var pl = points.length;
	for (var i=0; i < pl; i++) {
	var ratio = i / pl * 0.9;
	set_trixel(id.data, points[i][0], points[i][1], ratio);
	}

	canvas_ctx.putImageData(id, 0, 0);

	requestAnimationFrame(it);
	if (capturer) {
	capturer.capture(canvas_element);
	}
	}


	var capturer = null;

	/*
	setTimeout(function() {
	capturer = new CCapture( { format: 'gif', workersPath: './', framerate: 30, verbose: true, timeLimit: 4, display: true } );
	capturer.start();
	}, 3000);
	//*/

	it()

	</script>



	</body></html>