Rotierende Punkte

by Erik Wegner

HTML

<canvas id="c" width="64" height="32"></canvas>
<pre id="output"></pre>

JavaScript

/* 8 .. h15 .. 9 */
const numPoints = 12;
const numAnimsteps = 15;
const radius = 15.0;

var c = document.getElementById("c");
var canvas = c.getContext("2d");
var width = c.width;
var height = c.height;
var pointscoordinates = [];
var pointstep = 0;
const cx = width / 2;
const cy = 22;
const dx = 18
const dz = 2

function xyzToString(data) {
  return "{" + data.x + ", " + data.y + ", " + data.z + "}";
}

function rowToString(data) {
  var c1, c1max, row;
  c1max = data.length;
  row = []
  for (c1 = 0; c1 < c1max; c1++) {
  	row.push(xyzToString(data[c1]))
  }
  
  return "{" + row.join(", ") + "}";
}

function output(data) {
	var c1, c1max, text, c2, c2max;
  row = [];
  lencollector = [];
  text = "";
  c1max = data.length;
  for (c1 = 0; c1 < c1max; c1++) {
  	lencollector.push(data[c1].length);
  	//row.push(rowToString(data[c1]));
    for (c2 = 0, c2max = data[c1].length; c2 < c2max; c2++) {
    	row.push(xyzToString(data[c1][c2]));
    }
  }
  
  text += "const PROGMEM uint8_t pointslengths[] = {" + lencollector.join(", ") + "};\n";
  text += "const PROGMEM uint8_t points[][3] = {\n" + row.join(",\n ") + "};\n";
  
  document.getElementById("output").innerText = text;
}

function init() {
  var c1, c2, row, angle, anglePerPointAndStep, anglePerPoint, x, y;
  var miny = height,
    minx = width,
    maxy = 0,
    maxx = 0;
  anglePerPoint = 360 / numPoints;
  anglePerPointAndStep = 360 / numPoints / numAnimsteps;
  for (c1 = 0; c1 < numAnimsteps; c1++) {
    row = []
    for (c2 = 0; c2 < numPoints; c2++) {
      angle = 270 /* twelve o'clock */
        /* move the starting angle */
        + anglePerPointAndStep * c1
        /* move to the actual point */
        + anglePerPoint * c2;
      if (angle > 360) {
        angle = angle - 360;
      }
      x = Math.cos(angle * Math.PI / 180.0) * radius * 3.4 - dx;
      y = Math.sin(angle * Math.PI / 180.0) * radius * 0.80;
      z = (1 + dz) - Math.sin(angle * Math.PI / 180.0) * dz;

      x = cx +...