Как бы я добавил ползунки, чтобы увеличить стороны моих полигонов, и рисовал их больше, не обновляя страницу? - PullRequest
Новая
       6

Как бы я добавил ползунки, чтобы увеличить стороны моих полигонов, и рисовал их больше, не обновляя страницу?

1 голос
/ 09 января 2020

В настоящее время я рисую вершины для создания полигонов, я хотел бы добавить ползунки, чтобы позволить пользователю увеличивать или уменьшать количество сторон, которые имеют полигоны, и количество нарисованных. Также обновление холста с обновлением. Я попытался добавить слайдер для управления 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();
    }
}

1 Ответ

2 голосов
/ 10 января 2020

Перво-наперво, вам нужно перерисовывать фигуры всякий раз, когда ползунок меняется, так как вы используете noLoop(). Для этого вы можете легко определить событие при изменении, например: 

sidesSlider.input(sliderChange);

И я предлагаю вам присвоить noOfSides значение переменной в этой функции. После этого снова вызовите функцию draw. 

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

Поскольку вы удалили бы присвоение значения функции noOfSides в draw, вам нужно установить значение по умолчанию для этой переменной либо при инициализации, либо в `setup function. 

...
noOfSides = 3;
...

Тогда вы почти хороши для go, единственное, что я не совсем понимаю, это ваша последняя часть кода. Я удалил эту часть, и она работает как ожидалось в данный момент. Помните, что вы устанавливаете цвет фона со значением alpha. Это приводит к тому, что при каждом рендеринге фигур последние силуэты фигур все еще едва различимы.

Вот последняя версия кода: https://editor.p5js.org/darcane/sketches/5wpp6UgXI

...