Line Typo

const chrArr = ["SNAKE", "蛇", "蛇", "蛇", "SN"];

let bubble = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(250);

​

  const pg = createGraphics(width, height);

  pg.background(0);

  pg.fill(255);

  pg.textAlign(CENTER);

​

  const chr = random(chrArr);

  const ts = min(width, height) * 0.8;

  pg.textSize(ts);

  pg.text(chr, width / 2, height / 2 + ts / 3);

​

  const cp = random(colorPalletes).colors;

  const grid = 15;

  for (let x = grid / 2; x < width; x += grid) {

    for (let y = grid / 2; y < height; y += grid) {

      const c = pg.get(x, y);

      const g = (red(c) + green(c) + blue(c)) / 3;

      if (g > 50) {

        bubble.push(new Bubble(x, y, random(cp), 0));

      }

    }

  }

​

  for (let i = 0; i < 1000; i++) {

    bubble.push(new Bubble(random(width), random(height), color(230, 230, 230), 1));

  }

​

  for (let i in bubble) {

    for (let j in bubble) {

      let d = dist(bubble[i].p.x, bubble[i].p.y, bubble[j].p.x, bubble[j].p.y);

      if (d < 80 && bubble[i].t == bubble[j].t) {

        stroke(bubble[i].c);

        line(bubble[i].p.x, bubble[i].p.y, bubble[j].p.x, bubble[j].p.y);

      }

    }

  }

}

​

function draw() {

  // background(0, 1);

}

​

class Bubble {

  constructor(x, y, c, t) {

    this.p = createVector(x, y);

    this.v = createVector(random(-3, 3) * t, random(-3, 3) * t);

    this.c = c;

    this.t = t;

  }

​

  move() {

    this.p.add(this.v);

    if (this.p.x < 0 || width < this.p.x) {

      this.v.x *= -1;

    }

    if (this.p.y < 0 || height < this.p.y) {

      this.v.y *= -1;

    }

  }

}

​

class Easing {

  static easeInSine(x) {

    return 1 - Math.cos((x * Math.PI) / 2);

  }

​

  static easeOutSine(x) {

    return Math.sin((x * Math.PI) / 2);

  }

​

  static easeInOutSine(x) {

    return -(Math.cos(Math.PI * x) - 1) / 2;

  }

​

  static easeInQuad(x) {

    return x * x;

  }

​

  static easeOutQuad(x) {

    return 1 - (1 - x) * (1 - x);

  }

​

  static easeInOutQuad(x) {

    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;

  }

​

  static easeInCubic(x) {

    return x * x * x;

  }

​

  static easeOutCubic(x) {

    return 1 - Math.pow(1 - x, 3);

  }

​

  static easeInOutCubic(x) {

    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;

  }

​

  static easeInQuart(x) {

    return x * x * x * x;

  }

​

  static easeOutQuart(x) {

    return 1 - Math.pow(1 - x, 4);

  }

​

  static easeInOutQuart(x) {

    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;

  }

​

  static easeInQuint(x) {

    return x * x * x * x * x;

  }

​

  static easeOutQuint(x) {

    return 1 - Math.pow(1 - x, 5);

  }

​

  static easeInOutQuint(x) {

    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;

  }

​

  static easeInExpo(x) {

    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);

  }

​

  static easeOutExpo(x) {

    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);

  }

​

  static easeInOutExpo(x) {

    return x === 0 ?

      0 :

      x === 1 ?

      1 :

      x < 0.5 ?

      Math.pow(2, 20 * x - 10) / 2 :

      (2 - Math.pow(2, -20 * x + 10)) / 2;

  }

​

  static easeInCirc(x) {

    return 1 - Math.sqrt(1 - Math.pow(x, 2));

  }

​

  static easeOutCirc(x) {

    return Math.sqrt(1 - Math.pow(x - 1, 2));

  }

​

  static easeInOutCirc(x) {

    return x < 0.5 ?

      (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 :

      (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;

  }

​

  static easeOutBack(x) {

    const c1 = 1.70158;

    const c3 = c1 + 1;

    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);

  }

​

  static easeInOutBack(x) {

    const c1 = 1.70158;

    const c2 = c1 * 1.525;

    return x < 0.5 ?

      (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2 :

      (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;

  }

}

​

const colorPalletes = [{

    name: "DeepEmeraldGold",

    colors: ["#005e55", "#fff9bf", "#edb50c", "#b8003d", "#5e001f"],

  },

  {

    name: "WarmRainbow",

    colors: ["#01204E", "#028391", "#F6DCAC", "#FAA968", "#F85525"],

  },

  {

    name: "ChocolateAndCream",

    colors: ["#D54751", "#EF9A48", "#FFFCC7", "#4DA394", "#59322B"],

  },

  {

    name: "PopArt",

    colors: ["#241965", "#653993", "#9F4094", "#B73D6E", "#F19406"],

  },

  {

    name: "DeepEmeraldGold",

    colors: ["#F87523", "#FFC31B", "#E7DCC9", "#1DB7B9", "#126D68"],

  },

  {

    name: "GreenPink",

    colors: ["#01B999", "#FAB3B3", "#DC958F", "#A1D8CE", "#F1FAF7"],

  },

  {

    name: "NatureTranquility",

    colors: ["#106A6B", "#07374B", "#CAB381", "#E9E0CE"],

  },

  {

    name: "VibrantHarmony",

    colors: ["#F15946", "#5681CB", "#FAAA2D", "#296647", "#453945"],

  },

  {

    name: "Serenity Bliss",

    colors: ["#FFB4B8", "#EF4B28", "#0A563A", "#FFBC54", "#ECE9E0"],

  }

];