0xa/trixels.html

## 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>