跨浏览器的不同输出 P5js 生成艺术项目

Question

我正在使用以下代码进行 p5js 生成艺术项目：

let tokenData = {"tokenId":"470000012","hash":"0xdb1d793d306229d3e116997e2e6f5f32ce8487fe85e8b2d711e7348769debdf2"}

// Grab the first 16 values of the hash to use as a noise seed.
const seed = parseInt(tokenData.hash.slice(0, 16), 16);

class Random {
    constructor(seed) {
        this.seed = seed;
    }
    random_dec() {
        this.seed ^= this.seed << 13;
        this.seed ^= this.seed >> 17;
        this.seed ^= this.seed << 5;
        return ((this.seed < 0 ? ~this.seed + 1 : this.seed) % 1000) / 1000;
    }
  random_num(a, b) {
    return a + (b - a) * this.random_dec();
  }
  random_int(a, b) {
    return Math.floor(this.random_num(a, b + 1));
  }
  random_bool(p) {
    return this.random_dec() < p;
  }
  random_choice(list) {
    return list[this.random_int(0, list.length - 1)];
  }
}

class Blob {
  constructor(pos) {
    this.pos = pos;
    this.direction = R.random_int(0, 360);
    this .c = R.random_choice(colors);
    this.size = M * R.random_int(40, 200);
    this.saturationLimit = R.random_choice([60,80,95]);
    this.speed =   M * 0.1;
  }
  update() {
    let movement = new Position(round(sin(this.direction) * this.speed, 5), round(cos(this.direction * this.speed), 5));
    console.log(sin(this.direction));
        let newPosition = new Position(round(this.pos.x + movement.x), round(this.pos.y + movement.y));
    //let otherBlobs = blobs.filter(blob => blob.pos.x != this.pos.x && blob.pos.y != this.pos.y);
    let colliding = blobs.some(blob => {
            
      let distX = newPosition.x - blob.pos.x;
      let distY = newPosition.y - blob.pos.y;
            if(distX > 0 || distY > 0){
                let distance = sqrt((distX*distX) + (distY*distY) );
        let totalSize = ((blob.size + this.size)/2) + M*18;
        if (distance <= totalSize) {
            return true;
        }
            }
      
      return false;
    }
    );
    if (!colliding && !newPosition.outsideCanvas(this.size + M*20)) {
      this.pos = newPosition;
      if(this.speed < 1){
        this.speed += round(this.speed/25, 10);
      }
      
    } else {
      if (saturation(this.c) > this.saturationLimit) {
      } else {
        this.direction = R.random_int(0, 360);
        this.c = color(hue(this.c), saturation(this.c) + 1, brightness(this.c));
        this.speed = M * 0.1;
      }
    }
  }
  draw() {
    stroke(0);
    strokeWeight(M*20);
    fill(this.c);
    circle(this.pos.x, this.pos.y, this.size);
  }
}

class Position {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  outsideCanvas(radius) {
    if (radius == undefined) {
      return this.x < 0 || this.x > DIM || this.y < 0 || this.y > (DIM);
    } else {
      return (this.x - (radius/2)) < 0 || (this.x + (radius/2)) > DIM || (this.y - (radius/2)) < 0 || (this.y + (radius/2)) > (DIM);
    }
  }
}

var R = new Random(seed);

var cols;
var rows;

var offset;

var baseHue, comHue;

var baseColor, comColor;

var colors = [];

var DEFAULT_SIZE = 2000;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var DIM = Math.min(WIDTH, HEIGHT);
var M = DIM / DEFAULT_SIZE;

var grid = [];

var opacity;

var cnv;

var schemeName;

let blobs = [];

function setup() {
  cols = R.random_int(15, 50)*2;
  rows = cols/2;
  offset = M*100;
  cnv = createCanvas(DIM, DIM);
  centerCanvas();
    frameRate(24);

  colorMode(HSB);
  rectMode(CENTER);

  colors = defineRandomScheme();
  //strokeWeight(map(cols, 30, 100, 8 * M, 2 * M));

  let amount = R.random_int(100,400);
  let counter = 0;

  while(blobs.length < amount && counter < 1000){
    counter++;
    let newBlob = new Blob(new Position(R.random_int(M*200, DIM - (M*200)), R.random_int(M*200, (DIM) - (M*200))));
    let colliding = blobs.some(blob => {
      let distX = newBlob.pos.x - blob.pos.x;
      let distY = newBlob.pos.y - blob.pos.y;
      let distance = sqrt( (distX*distX) + (distY*distY) );
      let totalSize = ((blob.size + newBlob.size)/2) + M*20;
      if (distance <= totalSize) {
        return true;
      }
      return false;
    }
    );
    if (!colliding) {
      counter = 0;
      blobs.push(newBlob);
    }
  }
}

function draw() {
  background("white");
    //console.log(frameCount);
  blobs.forEach(blob => {
    blob.update();
    blob.draw();
  }
  );
}


function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function windowResized() {
  centerCanvas();
}


function defineGrid() {
  for (var x = 0; x < cols; x++) {
    grid[x] = [];
    for (var y = 0; y < rows; y++) {
      var pos =  new Position(cordToPixels(x), cordToPixels(y));
      grid[x].push(pos);
    }
  }
}

function drawGrid() {
  for (var x = 0; x < cols; x++) {
    for (var y = 0; y < rows; y++) {
      rect(grid[x][y].x, grid[x][y].y, blockSize(), blockSize());
    }
  }
}

function cordToPixels(value) {
  return map(value, 0, cols-1, offset, DIM-offset);
}

function defineRandomScheme() {
  var b = 100;
  var s = 1;
  var names = ["Split Complementary", "Complementary", "Triad", "Tetradic", "Square", "Analogous"];
  var choice = R.random_choice(names);
  schemeName = choice;
  switch (choice) {
  case "Split Complementary":
    return splitComplementaryColors(s, b);
  case "Complementary":
    return complementaryColors(s, b);
  case "Triad":
    return triadColors(s, b);
  case "Tetradic":
    return tetradicColors(s, b);
  case "Square":
    return squareColors(s, b);
  case "Analogous":
    return analogousColors(s, b);
  }
}

function analogousColors(s, b) {
  var baseHue = R.random_int(0, 360);
  var com1Hue = (baseHue + 330) % 360;
  var com2Hue = (baseHue + 30) % 360;
  var colors = [color(baseHue, s, b), color(com1Hue, s, b), color(com2Hue, s, b)];
  return colors;
}

function tetradicColors(s, b) {
  var baseHue = R.random_int(0, 360);
  var com1Hue = (baseHue + 60) % 360;
  var com2Hue = (baseHue + 180) % 360;
  var com3Hue = (baseHue + 240) % 360;
  var colors = [color(baseHue, s, b), color(com1Hue, s, b), color(com2Hue, s, b), color(com3Hue, s, b)];
  return colors;
}

function squareColors(s, b) {
  var baseHue = R.random_int(0, 360);
  var com1Hue = (baseHue + 90) % 360;
  var com2Hue = (baseHue + 180) % 360;
  var com3Hue = (baseHue + 270) % 360;
  var colors = [color(baseHue, s, b), color(com1Hue, s, b), color(com2Hue, s, b), color(com3Hue, s, b)];
  return colors;
}

function triadColors(s, b) {
  var baseHue = R.random_int(0, 360);
  var com1Hue = (baseHue + 120) % 360;
  var com2Hue = (baseHue + 240) % 360;
  var colors = [color(baseHue, s, b), color(com1Hue, s, b), color(com2Hue, s, b)];
  return colors;
}

function splitComplementaryColors(s, b) {
  var baseHue = R.random_int(0, 360);
  var com1Hue = (baseHue + 150) % 360;
  var com2Hue = (baseHue + 210) % 360;
  var colors = [color(baseHue, s, b), color(com1Hue, s, b), color(com2Hue, s, b)];
  return colors;
}

function complementaryColors(s, b) {
  var baseHue = R.random_int(0, 360);
  var comHue = (baseHue + 180) % 360;
  var colors = [color(baseHue, s, b), color(comHue, s, b)];
  return colors;
}

function blockSize() {
  return (DIM-(offset*2))/cols;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

但是由于某种原因我从 sin() 和 cos() 函数得到了不同的输出，由于某种原因输出在浏览器之间不一致？我尝试四舍五入这些值，但由于某种原因这似乎不起作用。

出于某种原因，气泡在与另一个气泡碰撞后选择的方向似乎有点偏离。

Answer 1

这是一个技巧问题吗？输出没有不同

火狐

野生动物园

铬（勇敢）

根据粗略的目视检查，这些都是无法区分的。