我将如何添加滑块来增加多边形的边，并在不刷新页面的情况下绘制更多多边形？

Question

目前我正在绘制顶点以创建多边形，我想添加滑块以允许用户增加或减少多边形的边数和绘制的数量。还有 canvas 刷新更新。我试过添加一个滑块来控制 noOfSides，但我没有成功。感谢您的时间和帮助。

let noOfShapes = 3;
let noOfSides;
let rx, ry, drx, dry, rd1, rd2, drd1, drd2;
let threshold = 1000;
let fillColour;
let strokeThick;
let sidesSlider;

function setup() {
    createCanvas(1240, 1754);
    noLoop();
    //  background(0, 230)
    colorMode(RGB)
    rectMode(CENTER);
    strokeWeight(3);
    //noOfSides = 3;
    fillColour = random(0, 255);
    sidesSlider = createSlider(4, 12, 3);
    sidesSlider.position(width + 20, 0);
    sidesSlider.style('width', '150px');
}

function draw() {
    background(0, 230)
    noOfSides = sidesSlider.value();

    for (let x = 0; x < noOfShapes; x++) {

        do {
            rx = [];
            ry = [];
            rd1 = [];
            rd2 = [];

            for (let y = 0; y < noOfSides; y++) {
                rx.push(random(10, width - 20));
                ry.push(random(10, height - 20));
                rd1.push(rx[y] * 1 + ry[y] * 1);
                rd2.push(rx[y] * 1 - ry[y] * 1);
            }

            drx = max(rx) - min(rx);
            dry = max(ry) - min(ry);
            drd1 = max(rd1) - min(rd1);
            drd2 = max(rd2) - min(rd2);
        }
        while (drx < threshold || dry < threshold || drd1 < threshold || drd2 < threshold)

        beginShape();
        stroke(255);
        fill(random(1, 255), random(1, 255), random(1, 255), 150);
        for (let y = 0; y < rx.length; y++) {
            vertex(rx[y], ry[y]);
        }
        endShape(CLOSE);
    }

    for (let x = 20; x <= width; x = x + 20) {
        blendMode(DODGE);
        stroke(255);
        beginShape();
        vertex(x, 0)
        vertex(x, height + 20)
        endShape();
    }
}

Answer 1

首先，由于您正在使用 noLoop()，因此每当滑块发生变化时，您都需要重新绘制形状。为此，您可以轻松地定义一个 on change 事件，如下所示：

sidesSlider.input(sliderChange);

我建议您在该函数中分配 noOfSides 变量的值。之后再次调用 draw 函数。

function sliderChange() {
  noOfSides = sidesSlider.value();
  draw();
}

由于您要在 draw 函数中删除对 noOfSides 的赋值，因此您需要在初始化时或在 `setup 函数中为该变量设置默认值。

...
noOfSides = 3;
...

那么你几乎可以开始了，我唯一不太明白的是你的代码的最后一部分。我删除了那部分，现在它按预期工作。请注意，您正在使用 alpha 值设置背景颜色。这导致：在每次渲染形状时，最新的形状轮廓仍然几乎看不到。

这是您的代码的最新版本： https://editor.p5js.org/darcane/sketches/5wpp6UgXI

我将如何添加滑块来增加多边形的边，并在不刷新页面的情况下绘制更多多边形？

How would I add sliders to increase the sides of my Polygons, and draw more of them without refreshing the page?

javascript

processing

p5.js