Renamed JS folder and started learning Crystal

JavaScript/SimpleWebServer/public/JS/Animatething/animate.js

@@ -0,0 +1,33 @@
+let angle = 0;
+let w = 24;
+let ma;
+let maxD;
+
+function setup() {
+  createCanvas(400, 400, WEBGL);
+  ma = atan(cos(QUARTER_PI));
+  maxD = dist(0, 0, 200, 200);
+}
+
+function draw() {
+  background(100);
+  ortho(-400, 400, 400, -400, 0, 1000);
+  rotateX(-ma);
+  rotateY(-QUARTER_PI);
+
+  for (let z = 0; z < height; z += w) {
+    for (let x = 0; x < width; x += w) {
+      push();
+      let d = dist(x, z, width / 2, height / 2);
+      let offset = map(d, 0, maxD, -PI + 2, PI + 2);
+      let a = angle + offset;
+      let h = floor(map(sin(a), 0, 1, 100, 300));
+      translate(x - width / 2, 0, z - height / 2);
+      normalMaterial();
+      box(w, h, w);
+      pop();
+    }
+  }
+
+  angle -= 0.05;
+}

JavaScript/SimpleWebServer/public/JS/Rainbow/Rainbow.js

@@ -0,0 +1,57 @@
+var bandsize = 500;
+var gapsize = 50;
+var position = 1;
+var subtractionamount = 0;
+var backgroundcol = 230;
+
+function setup() {
+
+  createCanvas(800, 800);
+  background(backgroundcol);
+
+
+  noStroke();
+  fill(255, 0, 0)
+  arc(width / 2, height / 2, bandsize, bandsize, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(255, 69, 0);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize  - subtractionamount, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(255, 215, 0);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize - subtractionamount, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(65, 105, 225);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize - subtractionamount, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(50, 205, 50);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize - subtractionamount, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(75, 0, 130);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize - subtractionamount, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(138, 43, 226);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize - subtractionamount, PI, PI);
+
+  subtractionamount = gapsize * position;
+  position++;
+  fill(backgroundcol);
+  arc(width / 2, height / 2, bandsize - subtractionamount, bandsize - subtractionamount, PI, PI);
+
+
+}
+
+function draw() {
+
+}

JavaScript/SimpleWebServer/public/JS/Starfeild/Star.js

@@ -0,0 +1,36 @@
+function Star() {
+  this.x = random(-width, width);
+  this.y = random(-height, height);
+  this.z = random(width);
+  this.pz = this.z;
+
+  this.update = function() {
+    this.z = this.z - speed;
+    if (this.z < 1) {
+      this.z = width;
+      this.x = random(-width, width);
+      this.y = random(-height, height);
+      this.pz = this.z;
+    }
+  }
+
+  this.show = function() {
+    fill(255);
+    noStroke();
+
+    var sx = map(this.x / this.z, 0, 1, 0, width);
+    var sy = map(this.y / this.z, 0, 1, 0, height);
+
+    var r = map(this.z, 0, width, 4, 0);
+    ellipse(sx, sy, r, r);
+
+    var px = map(this.x / this.pz, 0, 1, 0, width);
+    var py = map(this.y / this.pz, 0, 1, 0, height);
+
+    this.pz = this.z;
+
+    stroke(255);
+    line(px, py, sx, sy);
+
+  }
+}

JavaScript/SimpleWebServer/public/JS/Starfeild/sketch.js

@@ -0,0 +1,20 @@
+var stars = [];
+
+var speed;
+
+function setup() {
+  createCanvas(600, 600);
+  for (var i = 0; i < 800; i++) {
+    stars[i] = new Star();
+  }
+}
+
+function draw() {
+  speed = map(mouseX, 0, width, 0, 20);
+  background(0);
+  translate(width / 2, height / 2);
+  for (var i = 0; i < stars.length; i++) {
+    stars[i].update();
+    stars[i].show();
+  }
+}

JavaScript/SimpleWebServer/public/JS/Timer/sketch.js

@@ -0,0 +1,41 @@
+var timeleft = 10;
+var startTime = 0;
+var currentTime = 0;
+
+function convertSeconds(s) {
+  var min = floor(s / 60);
+  var sec = s % 60;
+  return nf(min, 2) + ':' + nf(sec, 2);
+}
+
+var ding;
+
+function preload() {
+  ding = loadSound("ding.mp3");
+}
+
+function setup() {
+  noCanvas();
+  startTime = millis();
+
+  var params = getURLParams();
+  console.log(params);
+  if (params.min) {
+    var min = params.min;
+    timeleft = min * 60;
+  }
+
+  var timer = select('#timer');
+  timer.html(convertSeconds(timeleft - currentTime));
+
+  var interval = setInterval(timeIt, 1000);
+
+  function timeIt() {
+    currentTime = floor((millis() - startTime) / 1000);
+    timer.html(convertSeconds(timeleft - currentTime));
+    if (currentTime == timeleft) {
+      ding.play();
+      clearInterval(interval);
+    }
+  }
+}