p5.js实现Armin Hofmann风格4x4网格绘图代码问题求助

项目目标 #

• 搭建可交互圆形网格：被选中的圆形可在白色、黑色填充状态间切换
• 用自然流畅的路径连接所有黑色圆形
• 连接路径需自动避开白色圆形，且不会形成封闭区域围困白色圆形

前期学习准备 #

• 通过Codecademy学习p5.js基础知识
• 临摹拆解p5.js官网示例代码
• 跟随Youtube频道The Coding Train教程学习，对应章节为7.4鼠标交互、7.6对象点击

参考资料 #

• Twitter用户@MauriceMeilleur在2021年2月至2021年8月发布的相关实现内容
• Processing论坛相关讨论：Armin Hofmann橡皮筋形状生成器实现求助

当前问题 #

每次尝试创建存储x、y坐标值的矩阵或数组，供draw/setup函数内的for循环调用时，代码都会运行失效，无法渲染预期图形，存在相关知识点遗漏。以下是最新的代码尝试：

class boundingBox {

  createBox() {
    stroke(0);
    strokeWeight(3);
    fill(255, 255, 255, 255);
    rect(100, 100, 700, 700);
  }
}

function Bubble(x, y, x1, y1, x2, y2, x3, y3) {
  // creating a distinction from x/y private and x/y public
  this.x = x;
  this.y = y;

  this.x1 = x1;
  this.y1 = y1;

  this.x2 = x2;
  this.y2 = y2;

  this.x3 = x3;
  this.y3 = y3;

  //this.x = x = [225,350,475,600];
  //this.y = y = [225,350,475,600];
  // creating color public for later use
  this.col = color(255);

  // this expression works to make a public function within a private function
  this.display = function() {
    stroke(0);
    fill(this.col);
    // creating the ability to display the circles within the parameters set
    //ellipse(this.x, this.y, 48,48);

    // in theory this should loop through the x array position values against all the y values in it's array creating multiple circles
    for (i = 0; i < 4; i++) {
      ellipse(this.x /*[i]*/ , this.y, 100, 100);

      ellipse(this.x1, this.y1, 100, 100);

      ellipse(this.x2, this.y2, 100, 100);

      ellipse(this.x3, this.y3, 100, 100);
    }
  }

  //this.move = function() {
  //  //making the circles change position and act like they are moving within air
  //  this.x = this.x + random(-0.5, 0.5);
  //  this.y = this.y + random(-0.5, 0.5);

  //  this.x1 = this.x1 + random(-0.5, 0.5);
  //  this.y1 = this.y1 + random(-0.5, 0.5);

  //  //this.x = this.x + random(1, 0.5);
  //  //this.y = this.y + random(1, 0.5);
  //}

  // again expression to make function but this time implementing a clicking function
  this.clicked = function() {
    // calculating the distance from the circle center to help fill it with color and nothing else
    var d = dist(mouseX, mouseY, this.x, this.y)
    // diameter of the circle
    if (d < 50) {
      this.col = color(0, 0, 0)
    }
  }

  //joinBubbles(bubbles); {
  //  bubbles.forEach(element => {
  //    let dis = dist(this.x, this.y, element.x, element.y);
  //      stroke(200, 200, 200, 127);
  //      line(this.x, this.y, element.x, element.y);
  //  });
  //}

  //}

  //class lines {
  //  constructor(){
  //  this.x4 = x4;
  //  this.y4 = y4;
  //  this.x5 = x5;
  //  this.y5 = y5;
  //  }

  //  this.displayLine = function(){
  //    stroke(0)
  //  }

}

let bubbles = [];
let boxii = [];

function setup() {

  createCanvas(1536, 1250);

  for (let i = 0; i < 1; i++) {
    boxii.push(new boundingBox());
  }

  for (let i = 200; i < 860; i += 165) {
    //var x = random (width);
    var x = 200;
    var y = i;
    bubbles.push(new Bubble(x, y /*x1,y1*/ ));
  }

  for (let i = 200; i < 860; i += 165) {
    //var x = random (width);
    var x1 = 375;
    var y1 = i;
    bubbles.push(new Bubble(x1, y1 /*x1,y1*/ ));
  }

  for (let i = 200; i < 860; i += 165) {
    //var x = random (width);
    var x2 = 550;
    var y2 = i;
    bubbles.push(new Bubble(x2, y2 /*x1,y1*/ ));
  }

  for (let i = 200; i < 860; i += 165) {
    //var x = random (width);
    var x3 = 700;
    var y3 = i;
    bubbles.push(new Bubble(x3, y3 /*x1,y1*/ ));
  }

  //for (let i = 0; i < 1; i++) {
  //var x1 = 400;
  //var y1 = 200;
  //bubbles.push(new Bubble(x1,y1));
  //}

  //for (let i = 200; i < 1000; i+=200){
  //var x2 = 200;
  //var y2 = i;
  //bubbles.push(new Bubble(x2,y2));
  //}

}

function mousePressed() {
  // checking where the mouse presses so that clicking outside the circle does nothing
  for (let i = 0; i < bubbles.length; i++) {

    //for (let i = 0; i < 4; i++) {
    // using this function on all the circles and again using .this to bring properties from /bubble
    bubbles[i].clicked();
  }
}

function draw() {
  background(140);

  for (let i = 0; i < 1; i++) {
    boxii[i].createBox();
  }

  for (let i = 0; i < bubbles.length; i++) {
    //bubbles[i].move();
    bubbles[i].display();
  }

  if (mousePressed) {
    for (let i = 0; i < bubbles.length; i++) {
      bubbles[i].display(fill(0))
    }
  }

}

对应的HTML依赖引入代码：

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

内容的提问来源于stack exchange，提问作者StudentInNeed