ds0nt/epic-graph.html

## epic-graph.html
<body style="background: black;">
  <canvas width="900" height="900" style="position: absolute; top: 0; bottom: 0;right: 0; left: 0;"></canvas>

<script type="text/javascript">
var fragShaderSource = `

precision highp float;
uniform vec4 u_color;

void main(void) {
  gl_FragColor = u_color;
}

`

var vtxShaderSource = `

attribute vec3 a_position;
uniform vec4 u_color;
uniform mat4 u_mvMatrix;
uniform mat4 u_pMatrix;

void main(void) {
  gl_Position = u_pMatrix * u_mvMatrix * vec4(a_position, 1.0);
}

`


function get_shader(type, source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

var gl, pMatrix, mvMatrix, vbuf, ibuf, shaderProgram;

function initGl() {
  var canvas = document.getElementsByTagName('canvas')[0];
  gl = canvas.getContext("experimental-webgl", { antialias: true });
  gl.viewport(0, 0, canvas.width, canvas.height);
}

function initShaders() {
    var vertexShader = get_shader(gl.VERTEX_SHADER, vtxShaderSource);
    var fragmentShader = get_shader(gl.FRAGMENT_SHADER, fragShaderSource);

    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    shaderProgram.aposAttrib = gl.getAttribLocation(shaderProgram, "a_position");
    gl.enableVertexAttribArray(shaderProgram.aposAttrib);
    shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "u_color");
    shaderProgram.pMUniform = gl.getUniformLocation(shaderProgram, "u_pMatrix");
    shaderProgram.mvMUniform = gl.getUniformLocation(shaderProgram, "u_mvMatrix");
}

function initScene() {
    gl.clearColor(0.0, 0.0, 0.0, 0.0);
    mvMatrix =
                      [1, 0, 0, 0
                      , 0, 1, 0.00009999999747378752, 0,
                      0, -0.00009999999747378752, 1, 0,
                      0, 1.3552527156068805e-20, -100, 1];
    pMatrix =
                      [2.4142136573791504, 0, 0, 0,
                      0, 2.4142136573791504, 0, 0,
                      0, 0, -1.0020020008087158, -1,
                      0, 0, -0.20020020008087158, 0];
    gl.enable(gl.DEPTH_TEST);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.uniformMatrix4fv(shaderProgram.pMUniform, false, new Float32Array(pMatrix));
    gl.uniformMatrix4fv(shaderProgram.mvMUniform, false, new Float32Array(mvMatrix));
}

function initBuffer(glELEMENT_ARRAY_BUFFER, data) {
    var buf = gl.createBuffer();
    gl.bindBuffer(glELEMENT_ARRAY_BUFFER, buf);
    gl.bufferData(glELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
    return buf;
}

function initBuffers(vtx, idx) {
    vbuf = initBuffer(gl.ARRAY_BUFFER, vtx);
    ibuf = initBuffer(gl.ELEMENT_ARRAY_BUFFER, idx);
    gl.vertexAttribPointer(shaderProgram.aposAttrib, 3, gl.FLOAT, false, 0, 0);
}

function unbindBuffers() {
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
}


function start3d() {
    initGl();
    initShaders();
    initScene();

    gl.lineWidth(2.0);
}

function render3d(graph) {
  var pointArray = []
  var indexArray = []
  for (var i = 0; i < graph.length; i+=3) {
    pointArray.push(graph[i])
    pointArray.push(graph[i+1])
    pointArray.push(graph[i+2])
    indexArray.push(i/3)
  }

  var vtx = new Float32Array(pointArray);
  var idx = new Uint16Array(indexArray);
  initBuffers(vtx, idx);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.uniform4f(shaderProgram.colorUniform, 1, 1, 1, 1);
  gl.drawElements(gl.LINES, idx.length, gl.UNSIGNED_SHORT, 0);

  unbindBuffers();
}

function end3d() {
}

var graph = [
  [[],[[],[]]],
  [[],[[],[[],[]]]],
  [[],[[],[]]],
  [[],[[],[[[],[],[],[],[]]]]],
  [[],[[],[]]],
  [[],[]],
  [[],[
  [[],[[],[[],[]]]],
  [[],[[],[]]],
  [[],[[],[[[],[],[],[
  [[],[[],[[],[]]]],
  [[],[[],[]]],
  [[],[[],[[[],[],[],[],[]]]]],],[]]]]],]],
  [[],[]],
]

var lines = [];
var angle = 0

function traverse(a, x, y, z, v, tt) {
  var len = a.length
  var p = (2 * Math.PI) / len
  var e = angle + tt
  var d = 5
  for (var i = 0; i < len; i++) {
    var dx = x + v
    var dy = Math.sin(e) * d + y
    var dz = Math.cos(e) * d + z
    e += p
    lines.push(x)
    lines.push(y)
    lines.push(z)
    lines.push(dx)
    lines.push(dy)
    lines.push(dz)
    traverse(a[i], dx, dy, dz, v, e - angle)
  }
}

function startTraverse(a, x, y, z, v, tt) {
  var A = []
  var B = []
  var len = a.length
  for (var i = 0; i < a.length; i++) {
    if (i > len / 2) {
      B.push(a[i])
    } else {
      A.push(a[i])
    }
  }
  traverse(A, x, y, z, v, tt)
  traverse(B, x, y, z, -v, tt)
}

start3d()

function renderLoop() {
  lines = []
  startTraverse(graph, 0, 0, 50, 5, 0)
  angle += 0.01;
  render3d(lines)
  window.requestAnimationFrame(renderLoop)
}
renderLoop()
</script>
</body>
	<body style="background: black;">
	<canvas width="900" height="900" style="position: absolute; top: 0; bottom: 0;right: 0; left: 0;"></canvas>

	<script type="text/javascript">
	var fragShaderSource = `

	precision highp float;
	uniform vec4 u_color;

	void main(void) {
	gl_FragColor = u_color;
	}

	`

	var vtxShaderSource = `

	attribute vec3 a_position;
	uniform vec4 u_color;
	uniform mat4 u_mvMatrix;
	uniform mat4 u_pMatrix;

	void main(void) {
	gl_Position = u_pMatrix * u_mvMatrix * vec4(a_position, 1.0);
	}

	`


	function get_shader(type, source) {
	var shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	return shader;
	}

	var gl, pMatrix, mvMatrix, vbuf, ibuf, shaderProgram;

	function initGl() {
	var canvas = document.getElementsByTagName('canvas')[0];
	gl = canvas.getContext("experimental-webgl", { antialias: true });
	gl.viewport(0, 0, canvas.width, canvas.height);
	}

	function initShaders() {
	var vertexShader = get_shader(gl.VERTEX_SHADER, vtxShaderSource);
	var fragmentShader = get_shader(gl.FRAGMENT_SHADER, fragShaderSource);

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);
	gl.useProgram(shaderProgram);

	shaderProgram.aposAttrib = gl.getAttribLocation(shaderProgram, "a_position");
	gl.enableVertexAttribArray(shaderProgram.aposAttrib);
	shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "u_color");
	shaderProgram.pMUniform = gl.getUniformLocation(shaderProgram, "u_pMatrix");
	shaderProgram.mvMUniform = gl.getUniformLocation(shaderProgram, "u_mvMatrix");
	}

	function initScene() {
	gl.clearColor(0.0, 0.0, 0.0, 0.0);
	mvMatrix =
	[1, 0, 0, 0
	, 0, 1, 0.00009999999747378752, 0,
	0, -0.00009999999747378752, 1, 0,
	0, 1.3552527156068805e-20, -100, 1];
	pMatrix =
	[2.4142136573791504, 0, 0, 0,
	0, 2.4142136573791504, 0, 0,
	0, 0, -1.0020020008087158, -1,
	0, 0, -0.20020020008087158, 0];
	gl.enable(gl.DEPTH_TEST);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	gl.uniformMatrix4fv(shaderProgram.pMUniform, false, new Float32Array(pMatrix));
	gl.uniformMatrix4fv(shaderProgram.mvMUniform, false, new Float32Array(mvMatrix));
	}

	function initBuffer(glELEMENT_ARRAY_BUFFER, data) {
	var buf = gl.createBuffer();
	gl.bindBuffer(glELEMENT_ARRAY_BUFFER, buf);
	gl.bufferData(glELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
	return buf;
	}

	function initBuffers(vtx, idx) {
	vbuf = initBuffer(gl.ARRAY_BUFFER, vtx);
	ibuf = initBuffer(gl.ELEMENT_ARRAY_BUFFER, idx);
	gl.vertexAttribPointer(shaderProgram.aposAttrib, 3, gl.FLOAT, false, 0, 0);
	}

	function unbindBuffers() {
	gl.bindBuffer(gl.ARRAY_BUFFER, null);
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
	}


	function start3d() {
	initGl();
	initShaders();
	initScene();

	gl.lineWidth(2.0);
	}

	function render3d(graph) {
	var pointArray = []
	var indexArray = []
	for (var i = 0; i < graph.length; i+=3) {
	pointArray.push(graph[i])
	pointArray.push(graph[i+1])
	pointArray.push(graph[i+2])
	indexArray.push(i/3)
	}

	var vtx = new Float32Array(pointArray);
	var idx = new Uint16Array(indexArray);
	initBuffers(vtx, idx);

	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	gl.uniform4f(shaderProgram.colorUniform, 1, 1, 1, 1);
	gl.drawElements(gl.LINES, idx.length, gl.UNSIGNED_SHORT, 0);

	unbindBuffers();
	}

	function end3d() {
	}

	var graph = [
	[[],[[],[]]],
	[[],[[],[[],[]]]],
	[[],[[],[]]],
	[[],[[],[[[],[],[],[],[]]]]],
	[[],[[],[]]],
	[[],[]],
	[[],[
	[[],[[],[[],[]]]],
	[[],[[],[]]],
	[[],[[],[[[],[],[],[
	[[],[[],[[],[]]]],
	[[],[[],[]]],
	[[],[[],[[[],[],[],[],[]]]]],],[]]]]],]],
	[[],[]],
	]

	var lines = [];
	var angle = 0

	function traverse(a, x, y, z, v, tt) {
	var len = a.length
	var p = (2 * Math.PI) / len
	var e = angle + tt
	var d = 5
	for (var i = 0; i < len; i++) {
	var dx = x + v
	var dy = Math.sin(e) * d + y
	var dz = Math.cos(e) * d + z
	e += p
	lines.push(x)
	lines.push(y)
	lines.push(z)
	lines.push(dx)
	lines.push(dy)
	lines.push(dz)
	traverse(a[i], dx, dy, dz, v, e - angle)
	}
	}

	function startTraverse(a, x, y, z, v, tt) {
	var A = []
	var B = []
	var len = a.length
	for (var i = 0; i < a.length; i++) {
	if (i > len / 2) {
	B.push(a[i])
	} else {
	A.push(a[i])
	}
	}
	traverse(A, x, y, z, v, tt)
	traverse(B, x, y, z, -v, tt)
	}

	start3d()

	function renderLoop() {
	lines = []
	startTraverse(graph, 0, 0, 50, 5, 0)
	angle += 0.01;
	render3d(lines)
	window.requestAnimationFrame(renderLoop)
	}
	renderLoop()
	</script>
	</body>