Flag test

by jcubed111

HTML

Black: x vs t <br/>
Blue: fac vs t <br/>
Magenta: z vs t <br/>
Green: Flag from above <br/>
Red: Flag from front <br/>
<canvas id='canvas' width='500' height='500'></canvas>

CSS

body{
    background:#EEE;
}
canvas{
    width:500px;
    height:500px;
    background:#FFF;
    border:1px solid #CCC;
}

JavaScript

//canvas base
"use strict";

var ctx=document.getElementById('canvas').getContext('2d');

var t=[];
for(var i=0; i<=12; i+=0.1) {
	t.push(i);
}

t = t.map(t => {
	return {
		t: t,
		x: 0,
		z: 0,
		fac: 0,
	};
})

var period = 5;
var xPerZ = -0.23;
var offset = 0;
var magPerT = 0.2;
var baseZPerT = 3;//4;

function step() {
	ctx.clearRect(0, 0, 500, 500);
	t.forEach(e => {
		var fun;
		fun = t => t;
		fun = t => Math.log(t+1) * 4.67845;
		fun = t => Math.min(t*2, Math.log((t+1)) / Math.pow((t+7)/15, 1) * 5);
		fun = t => Math.min(t*2, 14-t*0.5)*1;
		// fun = t => Math.log((t+1)) / Math.pow((t+7)/15, 1) * 5
		
		e.fac = fun(e.t);
		e.z = magPerT*e.fac*Math.sin((e.t-offset)*2*Math.PI/period) + baseZPerT*e.t;
		e.x = e.t + e.z*xPerZ;
	});

	ctx.strokeStyle = '#000';
	ctx.beginPath();
	t.forEach(e => {
		ctx.lineTo(10+e.t*30, 250-e.x*50);
	});
	ctx.stroke();

	ctx.strokeStyle = '#00f';
	ctx.beginPath();
	t.forEach(e => {
		ctx.lineTo(10+e.t*30, 250-e.fac*10);
	});
	ctx.stroke();

	ctx.strokeStyle = '#f0f';
	ctx.beginPath();
	t.forEach(e => {
		ctx.lineTo(10+e.t*30, 250-e.z*2);
	});
	ctx.stroke();

	ctx.strokeStyle = '#0f0';
	ctx.beginPath();
	t.forEach(e => {
		ctx.lineTo(10+e.x*70, 275 + e.t*-5);
	});
	ctx.stroke();

	ctx.strokeStyle = '#f00';
	ctx.beginPath();
	t.forEach(e => {
		ctx.lineTo(10+e.x*70, 275 + e.t*15);
	});
	for(var i=t.length-1; i>=0; i--) {
		var e = t[i];
		ctx.lineTo(10+e.x*70, 275 + e.t*2 + 156);
	}
	ctx.stroke();
	
	offset += 0.02;
}

var int = setInterval(step, 30);
document.addEventListener('click', function() {
	clearInterval(int);
});