Как сдержать случайность - PullRequest
Новая
       4

Как сдержать случайность

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

Я рисую произвольную форму с вершинами на холсте. Иногда форма очень узкая и маленькая. Есть ли способ ограничить случайность, чтобы этого не случилось? Поскольку я очень новичок в p5, любые советы будут оценены.

Спасибо за ваше время и помощь 

let noOfShapes = 3;

function setup(){
    createCanvas(1240, 1754);
    noLoop();
    background(0,230)
    colorMode(RGB)
    rectMode(CENTER);
    strokeWeight(3);

}

function draw(){
    //fill(56, 37, 34);

    for(let x = 0; x < noOfShapes; x++) {
      beginShape();
      stroke(255);
      fill(25, 255, 255,100);
      //noFill();
        for(let y = 2; y < 6; y++) {
          vertex(random(10,width), random(10,width))
          // vertex(random(10,width), random(10,width))
          // vertex(random(10,width), random(10,width))
          // vertex(random(10,width), random(10,width))
        }
      endShape(CLOSE);
    }
    stroke(255);

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

}

1 Ответ

0 голосов
/ 08 января 2020

Создать список случайных чисел для координат x и y: 

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

Вычислить разницу между минимальным (min) и максимальным (* 1008) *) для каждого списка: 

drx = max(rx) - min(rx);
dry = max(ry) - min(ry);

Определить порог и повторить процесс до тех пор, пока любое из различий будет ниже порога: 

let threshold = 200;
do {

  // [...]
}
while (drx < threshold || dry < threshold)

Алгоритм может быть далее улучшается, принимая во внимание расстояние между точками по диагонали 45 °. Используйте Dot product для вычисления расстояний: 

rd1.push(rx[y]*0.707 + ry[y]*0.707);
rd2.push(rx[y]*0.707 - ry[y]*0.707);

Используйте случайные координаты для генерации формы: 

let threshold = 400;
let rx, ry, drx, dry, rd1, rd2, drd1, drd2; 
do {
    rx = []; ry = []; rd1 = []; rd2 = [];
    for (let y = 0; y < 4; y++) {
        rx.push(random(10, width-20));
        ry.push(random(10, height-20));
        rd1.push(rx[y]*0.707 + ry[y]*0.707);
        rd2.push(rx[y]*0.707 - ry[y]*0.707);
    }
    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(25, 255, 255,100);
//noFill();
for (let y = 0; y < rx.length; y++) {
    vertex(rx[y], ry[y]);
}
endShape(CLOSE);


let noOfShapes = 1;

function setup(){
    createCanvas(1240, 1754);
    noLoop();
    background(0,230)
    colorMode(RGB)
    rectMode(CENTER);
    strokeWeight(3);
}

function draw(){
    for(let x = 0; x < noOfShapes; x++) {
       
        let threshold = 400;
        let rx, ry, drx, dry, rd1, rd2, drd1, drd2; 
        do {
            rx = []; ry = []; rd1 = []; rd2 = [];
            for (let y = 0; y < 4; y++) {
                rx.push(random(10, width-20));
                ry.push(random(10, height-20));
                rd1.push(rx[y]*0.707 + ry[y]*0.707);
                rd2.push(rx[y]*0.707 - ry[y]*0.707);
            }
            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(25, 255, 255,100);
        //noFill();
        for (let y = 0; y < rx.length; y++) {
            vertex(rx[y], ry[y]);
        }
        endShape(CLOSE);
    }
    stroke(255);

    for(let x=20; x<= width; x = x+20){
        blendMode(DODGE);
        //fill(200,200,200)
        stroke(255);
        beginShape();
          vertex(x, 0)
          vertex(x, height+20)
        endShape();
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
...