1const noiseScale = 4137;
 2const scale = 160; // 160
 3var oldWidth = 0;
 4var oldHeight = 0;
 5var wiggleScale = 40;
 6//var timeBeforeRefresh = 1*240;
 7var thetaSpeed = 0.1;
 8var zoomSpeed = 1.005;
 9
10canvas = document.getElementsByTagName("canvas")[0];
11var width = canvas.width;
12var height = canvas.height;
13var ctx = canvas.getContext("2d");
14noise.seed(Math.random());
15
16function startDrawing() {
17  (function animloop() {
18    requestAnimationFrame(animloop);
19    ctx.fillStyle = "hsl(" + Math.random() * 360 + ", 85%, 50%)";
20    ctx.font = Math.random() * scale + "px Yusei Magic";
21    ctx.fillText(
22      listOfLemmas[Math.floor(Math.random() * listOfLemmas.length)],
23      Math.random() * width,
24      Math.random() * height
25    );
26    ctx.translate(width / 2, height / 2);
27    ctx.rotate((thetaSpeed * Math.PI) / 180);
28    ctx.scale(zoomSpeed, zoomSpeed);
29    //ctx.transform(noise.simplex2((new Date()-0)/noiseScale,10010), noise.simplex2((new Date()-0)/noiseScale,1010), noise.simplex2((new Date()-0)/noiseScale,10), noise.simplex2((new Date()-0)/noiseScale,100010), noise.simplex2((new Date()-0)/noiseScale,20010), noise.simplex2((new Date()-0)/noiseScale,30010));
30    //ctx.transform(noise.simplex2((new Date()-0)/noiseScale,180010), noise.simplex2((new Date()-0)/noiseScale,10810), noise.simplex2((new Date()-0)/noiseScale,810), noise.simplex2((new Date()-0)/noiseScale,1008010), noise.simplex2((new Date()-0)/noiseScale,208010), noise.simplex2((new Date()-0)/noiseScale,380010));
31    ctx.translate(-width / 2, -height / 2);
32    ctx.drawImage(
33      canvas,
34      noise.simplex2((new Date() - 0) / noiseScale, 10010) * wiggleScale,
35      noise.simplex2((new Date() - 0) / noiseScale, 1080) * wiggleScale
36    );
37    ctx.resetTransform();
38    //if (Math.random()<1/timeBeforeRefresh){
39    //ctx.clearRect(0, 0, canvas.width, canvas.height);
40    //}
41  })();
42}
43
44// Get list of lemmas
45const url =
46  "https://ontake.dev/legacy/v5/daily-kanji/assets/datasets/listoflemmas.txt";
47$.ajax({
48  url: url,
49  success: function (result) {
50    listOfLemmas = result.split("\r\n");
51    startDrawing();
52  },
53});
54
55setInterval(function () {
56  if (oldWidth == window.innerWidth) {
57  } else if (oldHeight == window.innerHeight) {
58  } else {
59    canvas.width = window.innerWidth;
60    canvas.height = window.innerHeight;
61    width = canvas.width;
62    height = canvas.height;
63    oldWidth = window.innerWidth;
64    oldHeight = window.innerHeight;
65  }
66}, 1000);