Question

我正在尝试向画布添加许多飞行点，当它们之间的距离在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;
    };
}

接下来，是初始图。我给了点随机的尺寸和位置，您可以添加任何单独的属性（速度/方向/颜色/等）。

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);
}

动画。遍历点，位置/速度/等数组。是内部属性。需要秒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);
    }
}

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

1 个答案: