Merge branch 'main' of https://github.com/SamEyeBam/animate

rfid/js/helper.js

@@ -2,96 +2,89 @@ async function fetchConfig(className) {
   //   const config = await $.getJSON("config.json");
   const config = {
     PolyTwistColourWidth: [
-      { type: "range", min: 3, max: 10, defaultValue: 5, property: "sides" },
-      { type: "range", min: 400, max: 2000, defaultValue: 400, property: "width" },
-      { type: "range", min: 2, max: 5, defaultValue: 5, property: "line_width" },
-      { type: "range", min: 1, max: 100, defaultValue: 50, property: "depth" },
+      { type: "range", min: 3, max: 6, defaultValue: 5, property: "sides" },
+      { type: "range", min: 380, max: 380, defaultValue: 380, property: "width" },
+      { type: "range", min: 5, max: 5, defaultValue: 5, property: "line_width" },
+      { type: "range", min: 10, max: 50, defaultValue: 50, property: "depth" },
       { type: "range", min: -180, max: 180, defaultValue: -90, property: "rotation", },
-      { type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", },
       { type: "color", defaultValue: "#4287f5", property: "colour1" },
       { type: "color", defaultValue: "#42f57b", property: "colour2" },
     ],
     FloralPhyllo: [
-      { type: "range", min: 1, max: 600, defaultValue: 300, property: "width" },
-      { type: "range", min: 1, max: 300, defaultValue: 150, property: "depth" },
+      { type: "range", min: 300, max: 300, defaultValue: 300, property: "width" },
+      { type: "range", min: 150, max: 150, defaultValue: 150, property: "depth" },
       { type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
       { type: "color", defaultValue: "#4287f5", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
     ],
     Spiral1: [
       { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
-      { type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
-      { type: "color", defaultValue: "#4287f5", property: "colour" },
+      { type: "range", min: 240, max: 240, defaultValue: 240, property: "width" },
+      { type: "color", defaultValue: "#4287f5", property: "colour1" },
     ],
     FloralAccident: [
-      { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
-      { type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
-      { type: "color", defaultValue: "#4287f5", property: "colour" },
+      { type: "range", min: 4, max: 10, defaultValue: 20, property: "sides" },
+      { type: "range", min: 240, max: 240, defaultValue: 240, property: "width" },
+      { type: "color", defaultValue: "#4287f5", property: "colour1" },
     ],
     FloralPhyllo_Accident: [
       { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" },
-      { type: "range", min: 1, max: 600, defaultValue: 240, property: "width" },
+      { type: "range", min: 240, max: 240, defaultValue: 240, property: "width" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
     ],
     Nodal_expanding: [
-      { type: "range", min: 1, max: 100, defaultValue: 5, property: "expand" },
-      { type: "range", min: 1, max: 1000, defaultValue: 150, property: "points" },
+      { type: "range", min: 10, max: 10, defaultValue: 10, property: "expand" },
+      { type: "range", min: 100, max: 100, defaultValue: 100, property: "points" },
       { type: "range", min: 1, max: 360, defaultValue: 0, property: "start" },
-      { type: "range", min: 1, max: 10, defaultValue: 6, property: "line_width" },
+      { type: "range", min: 4, max: 6, defaultValue: 6, property: "line_width" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
       { type: "range", min: 0, max: 10, defaultValue: 5, property: "colour_change" },
     ],
     Phyllotaxis: [
-      { type: "range", min: 1, max: 40, defaultValue: 24, property: "width" },
+      { type: "range", min: 24, max: 24, defaultValue: 24, property: "width" },
       { type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
-      { type: "range", min: 1, max: 1000, defaultValue: 300, property: "nMax" },
+      { type: "range", min: 300, max: 300, defaultValue: 300, property: "nMax" },
       { type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
       { type: "color", defaultValue: "#FC0362", property: "colour2" },
     ],
     SquareTwist_angle: [
-      { type: "range", min: 1, max: 800, defaultValue: 400, property: "width" },
+      { type: "range", min: 400, max: 400, defaultValue: 400, property: "width" },
       { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" },
       { type: "color", defaultValue: "#2D81FC", property: "colour1" },
     ],
     EyePrototype: [
       { type: "range", min: 0, max: 0, defaultValue: 0, property: "x" },
       { type: "range", min: 0, max: 0, defaultValue: 0, property: "y" },
-      { type: "range", min: -180, max: 180, defaultValue: 0, property: "rotate" },
+      { type: "range", min: 0, max: 0, defaultValue: 0, property: "rotate" },
       { type: "range", min: 0, max: 1, defaultValue: 1, property: "flip" },
-      { type: "range", min: 1, max: 800, defaultValue: 400, property: "width" },
-      { type: "range", min: 1, max: 20, defaultValue: 5, property: "blink_speed" },
-      { type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_spiral" },
-      { type: "range", min: 0, max: 1, defaultValue: 1, property: "spiral_full" },
-      { type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_pupil" },
-      { type: "range", min: 0, max: 1, defaultValue: 0, property: "draw_expand" },
-      { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_hypno" },
+      { type: "range", min: 700, max: 700, defaultValue: 600, property: "width" },
+      { type: "range", min: 3, max: 20, defaultValue: 5, property: "blink_speed" },
+      { type: "range", min: 0, max: 3, defaultValue: 0, property: "mode" },
       { type: "range", min: 1, max: 10, defaultValue: 1, property: "line_width" },
-      { type: "color", defaultValue: "#00fffb", property: "colourPupil" },
-      { type: "color", defaultValue: "#ff0000", property: "colourSpiral" },
-      { type: "color", defaultValue: "#00fffb", property: "colourExpand" },
-      { type: "range", min: 0, max: 1, defaultValue: 1, property: "draw_eyelid" },
+      { type: "color", defaultValue: "#00fffb", property: "colour1" },
+      { type: "color", defaultValue: "#ff0000", property: "colour2" },
     ],
     CircleExpand: [
       { type: "range", min: 1, max: 70, defaultValue: 21, property: "nCircles" },
       { type: "range", min: 50, max: 150, defaultValue: 150, property: "gap" },
       { type: "range", min: 0, max: 1, defaultValue: 1, property: "linear" },
-      { type: "range", min: 0, max: 1, defaultValue: 1, property: "heart" },
+      { type: "range", min: 0, max: 0, defaultValue: 0, property: "heart" },
       { type: "color", defaultValue: "#fc03cf", property: "colour1" },
       { type: "color", defaultValue: "#00fffb", property: "colour2" },
     ],
-    MaryFace: [
-      { type: "range", min: -400, max: 400, defaultValue: -110, property: "x1" },
-      { type: "range", min: -400, max: 400, defaultValue: -140, property: "y1" },
-      { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate1" },
-      { type: "range", min: 0, max: 400, defaultValue: 160, property: "width1" },
-      { type: "range", min: -400, max: 400, defaultValue: 195, property: "x2" },
-      { type: "range", min: -400, max: 400, defaultValue: -30, property: "y2" },
-      { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate2" },
-      { type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
-    ],
+    // MaryFace: [
+    //   { type: "range", min: -400, max: 400, defaultValue: -110, property: "x1" },
+    //   { type: "range", min: -400, max: 400, defaultValue: -140, property: "y1" },
+    //   { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate1" },
+    //   { type: "range", min: 0, max: 400, defaultValue: 160, property: "width1" },
+    //   { type: "range", min: -400, max: 400, defaultValue: 195, property: "x2" },
+    //   { type: "range", min: -400, max: 400, defaultValue: -30, property: "y2" },
+    //   { type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate2" },
+    //   { type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
+    // ],
   };
   if (className === undefined) {
     return config
@@ -101,6 +94,19 @@ async function fetchConfig(className) {
   }
 }
 
+let colourPairs = [
+  ["#2D81FC", "#FC0362"],
+  ["#fc03cf", "#00fffb"],
+  ["#D4D4D4", "#FFD300"],
+  ["#e52165", "#0d1137"],
+  ["#ff6e40", "#1e847f"],
+  ["#77c593", "#ed3572"],
+
+  // ["#fc0", "#00fffb"],
+  // ["#fc0", "#00fffb"],//last never picked?
+]
+
+
 function addControl(item, instance) {
   console.log(item);
   let parentDiv = document.getElementById("custom");
@@ -349,17 +355,17 @@ function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
   console.log(Math.cos(orgAngle - rad(rotation)) * d)
   console.log(d)
   // console.log(d)
-  let newPointX = Math.cos(orgAngle - rad(rotation+90)) * d + centerXX;
-  let newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY;
+  let newPointX = Math.cos(orgAngle - rad(rotation + 90)) * d + centerXX;
+  let newPointY = Math.sin(orgAngle - rad(rotation + 90)) * d + centerYY;
   return [newPointX, newPointY]
 }
 
-function rotatePoint(x,y,rotation){
+function rotatePoint(x, y, rotation) {
   let nCos = Math.cos(rad(rotation))
   // console.log(nCos*(180/Math.PI))
   // console.log(rad(rotation))
   let nSin = Math.sin(rad(rotation))
-  let newX = x*nCos - y*nSin
-  let newY = y*nCos + x*nSin
-  return [newX,newY]
+  let newX = x * nCos - y * nSin
+  let newY = y * nCos + x * nSin
+  return [newX, newY]
 }

rfid/js/index.js

@@ -20,12 +20,13 @@ function onClose(event) {
   console.log('Connection closed');
   setTimeout(initWebSocket, 2000);
 }
+
 function onMessage(event) {
   console.log(event.data)
   console.log("--")
   setSeed(event.data)
   Reset()
-  updateDrawObj()
+  updateDrawObj(event.data)
   // TogglePause()
 }
 
@@ -62,11 +63,11 @@ const classMap = {
   FloralAccident: FloralAccident,
   FloralPhyllo_Accident: FloralPhyllo_Accident,
   Nodal_expanding: Nodal_expanding,
-  Phyllotaxis:Phyllotaxis,
-  SquareTwist_angle:SquareTwist_angle,
-  EyePrototype:EyePrototype,
-  CircleExpand:CircleExpand,
-  MaryFace:MaryFace,
+  Phyllotaxis: Phyllotaxis,
+  SquareTwist_angle: SquareTwist_angle,
+  EyePrototype: EyePrototype,
+  CircleExpand: CircleExpand,
+  MaryFace: MaryFace,
   // Add more class constructors here as needed
 };
 function createInstance(className, args) {
@@ -122,44 +123,67 @@ function PRNGinRange(min = 0, max = 100) {
   return randTmp;
 }
 
-async function createShapeWithRandomProperties(inputNumber, shapeConfig) {
-
-  console.log(shapeConfig)
-  // const shapeName = Object.keys(shapeConfig)[PRNGinRange(0, Object.keys(shapeConfig).length - 1)];
+async function createShapeWithRandomProperties() {
+  let shapeConfig = await fetchConfig()
   const shapeName = Object.keys(shapeConfig)[PRNGinRange(0, Object.keys(shapeConfig).length - 1)];
   const ShapeClass = classMap[shapeName];
   const config = await fetchConfig(shapeName);
   const properties = {};
   console.log(config)
 
+  const colours = colourPairs[PRNGinRange(0, 6)]
+  const colour1 = colours[0]
+  const colour2 = colours[1]
+  console.log(colours)
+
   config.forEach((item, index) => {
     const min = item.min || 0;
-    const max = item.max || 1;
+    const max = (item.max+1) || 1;
+    // console.log(item)
     const randomValue = PRNGinRange(min, max);
-    // console.log(PRNGinRange(1, 100))
-    properties[item.property] = item.type === "color" ? "#4287f5" : Math.round(randomValue);
+    if (item.type === "color") {
+      if (item.property === "colour1") {
+        properties[item.property] = colour1;
+      }
+      else {
+        properties[item.property] = colour2;
+      }
+    }
+    else {
+      properties[item.property] = randomValue;
+    }
   });
 
   return new ShapeClass(...Object.values(properties));
 }
 
-async function updateDrawObj() {
-  const shapeSelector = document.getElementById("shape-selector");
-  const selectedShape = shapeSelector.value;
-  const configControls = await fetchConfig(selectedShape);
+async function updateDrawObj(tagId) {
   if (drawObj) {
     drawObj.remove(); // Remove the previous instance
   }
-  // Extract default values from the configuration
-  const defaultValues = configControls
-    // .filter((item) => item.type !== "color") // Exclude color inputs
-    .map((item) => item.defaultValue);
+
+  const heartTags = ["6624821687","26721587","3421222587","1143021587","662721587"]
+  const faceTags = ["22622221287","226123187","11423322187","22610621287","9825523787"]
+  const rickTags = ["2424722587","1942721587","1144921087","17822321287","22617222487"]
+
+  console.log(heartTags)
+  console.log(tagId)
+  if(heartTags.includes(tagId)){
+    drawObj = new CircleExpand(14,150,1,1,"#fc03cf","#00fffb");
+  }
+  else if(faceTags.includes(tagId)){
+    drawObj = new MaryFace(-110,-140,18,160,195,-30,18,160);
+  }
+  else if(rickTags.includes(tagId)){
+    drawObj = new RickRoll();
+  }
+  else{
+    drawObj = await createShapeWithRandomProperties();
+  }
+  drawObj.initialise();
 
 
-  // drawObj = createInstance(selectedShape, defaultValues);
-  drawObj = await createShapeWithRandomProperties(813311281, await fetchConfig());
   console.log(drawObj)
-  drawObj.initialise(configControls);
 }
 
 updateDrawObj();
@@ -189,7 +213,7 @@ let toolbarShowing = true;
 document.addEventListener("keydown", toggleSettings);
 
 function manualToggleSettings() {
-  console.log("hi")
+
   toolbarShowing = !toolbarShowing;
   let tb = document.getElementById("toolbar");
   if (toolbarShowing) {

rfid/js/objects.js

@@ -4,14 +4,8 @@ class BaseShape {
     this.speedMultiplier = 100;
   }
 
-  initialise(config) {
-    for (let item of config) {
-      const { element, listener } = addControl(item, this);
-      this.controls.push({ element, listener });
-    }
+  initialise() {
 
-    const { element, listener } = addControl({ type: "range", min: 1, max: 500, defaultValue: 100, property: "speedMultiplier", }, this);
-    this.controls.push({ element, listener });
   }
 
   remove() {
@@ -34,14 +28,13 @@ class BaseShape {
 }
 
 class PolyTwistColourWidth extends BaseShape {
-  constructor(sides, width, line_width, depth, rotation, speedMultiplier, colour1, colour2) {
+  constructor(sides, width, line_width, depth, rotation, colour1, colour2) {
     super();
     this.sides = sides;
     this.width = width;
     this.line_width = line_width;
-    this.depth = depth;
+    this.depth = sides * 5;
     this.rotation = rotation;
-    this.speedMultiplier = speedMultiplier;
     this.colour1 = colour1;
     this.colour2 = colour2;
   }
@@ -98,11 +91,11 @@ class FloralPhyllo extends BaseShape {
   }
 }
 class Spiral1 extends BaseShape {
-  constructor(sides, width, colour) {
+  constructor(sides, width, colour1) {
     super();
     this.sides = sides;
     this.width = width;
-    this.colour = colour;
+    this.colour = colour1;
   }
 
   draw(rotation) {
@@ -135,11 +128,11 @@ class Spiral1 extends BaseShape {
 }
 
 class FloralAccident extends BaseShape {
-  constructor(sides, width, colour) {
+  constructor(sides, width, colour1) {
     super();
     this.sides = sides;
     this.width = width;
-    this.colour = colour;
+    this.colour = colour1;
   }
 
   draw(rotation) {
@@ -150,18 +143,19 @@ class FloralAccident extends BaseShape {
     var end = 0;
     var n = this.width / ((this.width / 10) * (this.width / 10)) //pixel correction for mid leaf
 
+    ctx.lineWidth =4;
+    ctx.strokeStyle = this.colour;
     for (let i = 1; i < this.sides + 1; i++) {
       end = stt + rad(rot);
 
       ctx.beginPath();
       ctx.arc(centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width, this.width, stt - (stt - end + rad(rotation)) / 2, end + rad(n), 0);
-      ctx.strokeStyle = this.colour;
       ctx.stroke();
 
 
       ctx.beginPath();
       ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i - rotation)) * this.width, this.width, stt, end - (end - stt - rad(rotation)) / 2 + rad(n), 0);
-      ctx.strokeStyle = this.colour;
+      // ctx.strokeStyle = this.colour;
       ctx.stroke();
 
 
@@ -209,7 +203,7 @@ class Nodal_expanding extends BaseShape {
 
   draw(rotation) {
     rotation *= (this.speedMultiplier / 1000)
-    var angle = (360 / 3000 * rotation) + this.start //2000 controls speed
+    var angle = (360 / 2000 * rotation) + this.start //2000 controls speed
 
     var length = this.expand;
 
@@ -441,7 +435,7 @@ class CircleExpand extends BaseShape {
 
 
 class EyePrototype extends BaseShape {
-  constructor(x, y, rotate, flip, width, blink_speed, draw_spiral, spiral_full, draw_pupil, draw_expand, draw_hypno, line_width, colourPupil, colourSpiral, colourExpand) {
+  constructor(x, y, rotate, flip, width, blink_speed, mode, line_width, colour1,colour2) {
     super();
     this.x = x;
     this.y = y;
@@ -449,20 +443,38 @@ class EyePrototype extends BaseShape {
     this.flip = flip
     this.width = width;
     this.blink_speed = blink_speed;
+    this.mode = mode;
     this.line_width = line_width;
     this.step = 0;
     this.opening = true;
     this.counter = 0;
     this.cooldown = 0;
-    this.draw_spiral = draw_spiral;
-    this.spiral_full = spiral_full;
-    this.draw_pupil = draw_pupil;
-    this.draw_expand = draw_expand;
-    this.draw_hypno = draw_hypno;
-    this.colourPupil = colourPupil;
-    this.colourSpiral = colourSpiral;
-    this.colourExpand = colourExpand;
-    this.centerPulse = new CircleExpand(10, 30, 1, 0, "#2D81FC", "#FC0362")
+    this.draw_spiral = 0;
+    this.spiral_full = 0;
+    this.draw_pupil = 0;
+    this.draw_expand = 0;
+    this.draw_hypno = 0;
+    this.colourPupil = colour1;
+    this.colourSpiral = colour2;
+    this.colourExpand = colour2;
+    this.centerPulse = new CircleExpand(13, 30, 1, 0, "#2D81FC", "#FC0362")
+  }
+  initialise() {
+    if(this.mode===0){
+      this.draw_spiral = 1
+      this.draw_pupil = 1
+    }
+    if(this.mode===1){
+      this.draw_spiral = 1
+      this.spiral_full = 1
+    }
+    if(this.mode===2){
+      this.draw_expand = 1
+      this.draw_pupil = 1
+    }
+    if(this.mode===3){
+      this.draw_hypno= 1
+    }
   }
   drawEyelid(rotation) {
     ctx.strokeStyle = "orange";
@@ -605,6 +617,34 @@ class EyePrototype extends BaseShape {
     this.counter++;
   }
 }
+class RickRoll extends BaseShape {
+  constructor() {
+    super();
+    this.counter = 0
+  }
+
+  draw(rotation) {
+    let img = new Image();
+    let newString = ""
+    if (this.counter < 10) {
+      newString = "00" + this.counter
+    }
+    else if (this.counter < 100) {
+      newString = "0" + this.counter
+    }
+    else {
+      newString = this.counter;
+    }
+
+    img.src = "rickRoll/frame_" + newString + ".png";
+
+    ctx.drawImage(img, centerX - img.width / 2, centerY - img.height / 2);
+    this.counter += 1;
+    if (this.counter > 146) {
+      this.counter = 0
+    }
+  }
+}
 class MaryFace extends BaseShape {
   constructor(x1, y1, rotate1, width1, x2, y2, rotate2, width2) {
     super();
@@ -616,10 +656,15 @@ class MaryFace extends BaseShape {
     this.y2 = y2;
     this.rotate2 = rotate2;
     this.width2 = width2;
-    this.eye1 = new EyePrototype(x1, y1, rotate1, 0, width1, 10, 1, 1, 0, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
-    this.eye2 = new EyePrototype(x2, y2, rotate2, 0, width2, 10, 1, 1, 0, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
-    // this.eye3 = new EyePrototype(112, -280, rotate2+2,1, width2, 10, 1, 1, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
-    this.eye3 = new EyePrototype(110, -280, rotate2 + 2, 1, width2, 10, 1, 1, 0, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")//maybe
+    this.eye1 = new EyePrototype(x1, y1, rotate1, 0, width1, 10, 1, 1, "#00fffb", "#00fffb")
+    this.eye2 = new EyePrototype(x2, y2, rotate2, 0, width2, 10, 1, 1, "#00fffb", "#00fffb")
+    // this.eye3 = new EyePrototype(112, -280, rotate2+2,1, width2, 10, 1, 1, 0, 0, 1, "#00fffb", "#00fffb")
+    this.eye3 = new EyePrototype(110, -280, rotate2 + 2, 1, width2, 10, 1, 1, "#00fffb", "#00fffb")//maybe
+  }
+  initialise(){
+    this.eye1.initialise()
+    this.eye2.initialise()
+    this.eye3.initialise()
   }
 
   draw(rotation) {