tomgidden · February 8, 2019 03:42
diff --git a/tri.html b/tri.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="ugly purple triangles">
  <meta charset="utf-8">
 </head>
 <body>
  <div id="drawing" style="outline:1px solid red; width:100%; height:100%; position:absolute;"></div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.11/svg.js"></script>
  <script src="tri.js"></script>
 </body>
 </html>
diff --git a/tri.js b/tri.js
 function render(m, s, t) {
    // Prep SVG
    var g = SVG().addTo('#drawing').size("100%", "100%");

    // Maths
    var r33 = Math.sqrt(3)/3;

    // Generate triangles
    var t1 = g.defs().group();
    var t2 = g.defs().group().scale(1,-1);
    var i=0;
    for (a=m; a>0; a-=m/s) {
        a = Math.floor(a,2);
        r = Math.round(a*r33,2);
        i1 = i;
        i2 = s-i-1;
        t1.polygon([0,-2*r, -a,r, a,r]).attr({'class':'tri'+(i1)});
        t2.polygon([0,-2*r, -a,r, a,r]).attr({'class':'tri'+(i2)});
        i++;
    }

    // Generate pattern
    var p = g.defs().pattern(m*2,m*6*r33, function (P) {
        P.use(t1).move(0, m*2*r33);
        P.use(t2).move(m, m*1*r33);
        P.use(t1).move(2*m, m*2*r33);
        P.use(t2).move(0, m*4*r33);
        P.use(t1).move(m, m*5*r33);
        P.use(t2).move(2*m, m*4*r33);
    });

    // Generate styles for palette switching
    buf = '';
    for (var x=0; x<s; x++) {
        for (var y=0; y<s; y++) {
            var sp = (Math.sin(4*Math.PI * ((x+y) % s)/s));
            var R = Math.round(96 - 96*sp);
            var G = 0;
            var B = Math.round(128 - 128*sp);
            buf = buf + '.frame'+x+' .tri'+y+'{fill:rgb('+R+','+G+','+B+')}';
        }
    }
    $('<style>'+buf+'</style>').appendTo($('svg'));

    // Fill SVG with patterned rectangle
    g.rect('100%', '100%').fill(p);

    // Animate
    var f = 0;
    setInterval(function () {
        t1.attr({'class':'frame'+f});
        t2.attr({'class':'frame'+f});
        f = (f+1) % s;
    }, t);
 }

 $(function () { render(100, 30, 100); });
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="ugly purple triangles">
	<meta charset="utf-8">
	</head>
	<body>
	<div id="drawing" style="outline:1px solid red; width:100%; height:100%; position:absolute;"></div>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.11/svg.js"></script>
	<script src="tri.js"></script>
	</body>
	</html>
	function render(m, s, t) {
	// Prep SVG
	var g = SVG().addTo('#drawing').size("100%", "100%");

	// Maths
	var r33 = Math.sqrt(3)/3;

	// Generate triangles
	var t1 = g.defs().group();
	var t2 = g.defs().group().scale(1,-1);
	var i=0;
	for (a=m; a>0; a-=m/s) {
	a = Math.floor(a,2);
	r = Math.round(a*r33,2);
	i1 = i;
	i2 = s-i-1;
	t1.polygon([0,-2*r, -a,r, a,r]).attr({'class':'tri'+(i1)});
	t2.polygon([0,-2*r, -a,r, a,r]).attr({'class':'tri'+(i2)});
	i++;
	}

	// Generate pattern
	var p = g.defs().pattern(m2,m6*r33, function (P) {
	P.use(t1).move(0, m2r33);
	P.use(t2).move(m, m1r33);
	P.use(t1).move(2m, m2*r33);
	P.use(t2).move(0, m4r33);
	P.use(t1).move(m, m5r33);
	P.use(t2).move(2m, m4*r33);
	});

	// Generate styles for palette switching
	buf = '';
	for (var x=0; x<s; x++) {
	for (var y=0; y<s; y++) {
	var sp = (Math.sin(4Math.PI ((x+y) % s)/s));
	var R = Math.round(96 - 96*sp);
	var G = 0;
	var B = Math.round(128 - 128*sp);
	buf = buf + '.frame'+x+' .tri'+y+'{fill:rgb('+R+','+G+','+B+')}';
	}
	}
	$('<style>'+buf+'</style>').appendTo($('svg'));

	// Fill SVG with patterned rectangle
	g.rect('100%', '100%').fill(p);

	// Animate
	var f = 0;
	setInterval(function () {
	t1.attr({'class':'frame'+f});
	t2.attr({'class':'frame'+f});
	f = (f+1) % s;
	}, t);
	}

	$(function () { render(100, 30, 100); });