如何避免重复使椭圆移动的代码？目前我必须为每个椭圆重复它

Question

我正在尝试向 canvas 添加许多飞点，当它们之间的距离在 0 到 300 之间时，它们通过一条线相互连接，并根据它们之间的距离改变线的不透明度他们。如您所见，我已经完全用 2 个点完成了所有这些工作。但是，我现在面临两个问题。

第一个问题 - 如果我想添加 15 个椭圆，我或多或少必须为每个新椭圆复制代码。我很确定这不是解决问题的方法。

第二个问题是我很难编码哪些点应该相互连接。我希望每个点都连接到每个附近的点，但是，我不确定如何准确地做到这一点。任何提示和指示将不胜感激。

var el1 = {
    x: 100,
    y: 100,
    width: 5,
    height: 5
};

var el2 = {
    x: 300,
    y: 300,
    width: 5,
    height: 5
};

var speed = 2;
var opacity = 0;
var xdirection = 1;
var ydirection = 1;

function setup() {
    createCanvas(windowWidth, windowHeight - 4);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight - 4);
}

function draw() {
    background(51, 51, 51);
    fill(55, 90, 80);
    noStroke();
    ellipse(el1.x, el1.y, el1.width, el1.height);
    ellipse(el2.x, el2.y, el2.width, el2.height);
    el1.x = el1.x + speed * xdirection;
    el1.y = el1.y + speed * ydirection; 

    if (el1.x > windowWidth || el1.x < 5) {
        xdirection *= -1;
    }
    if (el1.y > windowHeight || el1.y < 5) {
        ydirection *= -1;
    }
    if (dist(el1.x,el1.y,el2.x,el2.y) < 300) {
        var opacity = map(dist(el1.x,el1.y,el2.x,el2.y),0, 300, 255, 0);
        stroke(55, 90, 80, opacity);
        line(el1.x,el1.y,el2.x,el2.y);
    }
}

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

Answer 1

将你的椭圆定义为一个对象，创建任意多个（15），放入数组并开始绘制，不断检测它们之间的距离。

对象本人：

var noOfEllipses = 15;

var opacity = 0;
var arrOfEllipses = [];

class Ellips {
    constructor(x, y, w, h, s=2, dx=1, dy=1){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.s = s;
        this.dx = dx;
        this.dy = dy;
    };
}

接下来，初始绘图。我给点随机尺寸和位置，你可以添加任何个人属性 (speed/direction/color/etc).

function randInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

function setup() {
    createCanvas(windowWidth, windowHeight - 4);
    for(i=0; i<noOfEllipses;i++){
        var el = new Ellips(
            randInt(3, windowWidth),    //x
            randInt(3, windowHeight),   //y
            randInt(3, 8),              //width
            randInt(3, 8),              //height
            randInt(10, 50)/10          //speed
            );
        arrOfEllipses.push(el);         //put them into array
    }
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight - 4);
}

动画。遍历点数组 location/speed/etc。是内部属性。第二个 for{} 需要计算距离和画线。

function draw() {
    background(51, 51, 51);
    fill(200, 200, 80);
    noStroke();

    for(var i=0; i<arrOfEllipses.length; i++){
        el = arrOfEllipses[i];
        el.x = el.x + el.s * el.dx;
        el.y = el.y + el.s * el.dy;

        if (el.x > windowWidth || el.x < 5) {
            el.dx *= -1;
        }
        if (el.y > windowHeight || el.y < 5) {
            el.dy *= -1;
        }
        for(var j=i+1; j<arrOfEllipses.length; j++){
            el2 = arrOfEllipses[j];
            if (dist(el.x,el.y,el2.x,el2.y) < 300) {
                var opacity = map(dist(el.x,el.y,el2.x,el2.y),0, 300, 255, 0);
                stroke(200, 200, 80, opacity);
                line(el.x,el.y,el2.x,el2.y);
            }
        }
        ellipse(el.x, el.y, el.w, el.h);
    }
}

如何避免重复使椭圆移动的代码？目前我必须为每个椭圆重复它

How to avoid repeating code which makes an ellipse move? Currently I have to repeat it for each ellipse

javascript

p5.js