p5.js ある範囲の外側を指定する方法が知りたいです。

Question

ある範囲の外側を指定したい。

p5.jsで以下の図のように、ある範囲の外側を指定し
そこに描画したい場合どのようにするのがベストなのでしょうか。

該当のソースコード

function setup() {
  colorMode(HSB, 360, 100, 100, 100);
  createCanvas(500, 500);
  background(0);
  for(let i=0; i<100; i++){
    noStroke();
    fill(random(100, 200), random(10, 100), 255, random(10, 50));
    rect(random(500/4, 500/4*3), random(500/4, 500/4*3), random(20, 50), random(20, 50))
    //以下のcircleを四角形が描かれている範囲の外に描きたい。
    circle(random(500/4, 500/4*3), random(500/4, 500/4*3), random(20, 50), random(20, 50))
    }
}

Answer 1

こんな感じで如何でしょうか？
四角形と円で表示するエリアの判定を逆にしているだけです。
違いが分かるよう、四角形と円で色を変えています。

https://jsfiddle.net/cx20/wtd0sopx/

function setup() {
  colorMode(HSB, 360, 100, 100, 100);
  createCanvas(500, 500);
  background(0);
  for (let i = 0; i < 1000; i++) {
    noStroke();
    fill(random(100, 200), random(10, 100), 255, random(10, 50));

    let rect_rand_x = random() * 500;
    let rect_rand_y = random() * 500;
    let rect_rand_width = random(20, 50);
    let rect_rand_height = random(20, 50);
    if (rect_rand_x > 125 && rect_rand_x < 375 &&
        rect_rand_y > 125 && rect_rand_y < 375) {
      rect(rect_rand_x, rect_rand_y, rect_rand_width, rect_rand_height);
    }
    //以下のcircleを四角形が描かれている範囲の外に描きたい。
    fill(i % 360, 80, 100);
    let circle_rand_x = random() * 500;
    let circle_rand_y = random() * 500;
    let circle_rand_diameter = random(20, 50);
    if (circle_rand_x < 125 || circle_rand_x > 375 ||
        circle_rand_y < 125 || circle_rand_y > 375) {
      circle(circle_rand_x, circle_rand_y, circle_rand_diameter);
    }
  }
}

■ 実行結果

■ 判定処理のイメージ

・xの範囲が125～375かつyの範囲が125～375の場合、四角形のエリア内になります。
・xの範囲が125未満もしくは375以上、もしくはyの範囲が125未満もしくは375以上の場合、四角形のエリア外になります。

Comments

[mia_flower]

図も描いて頂き、とてもわかりやすい解説ありがとうございます。
if文を使ってエリアを指定すればいいのですね！理解致しました。

[cx20]

そういえば、調べていて気が付いたのですが、
ellipse() は第4引数までありますが、
circcle() は第3引数（直径の指定）までとなっており、第4引数は存在しないようでした。

＜参考＞
■ reference | circle()
https://p5js.org/reference/#/p5/circle
■ reference | ellipse()
https://p5js.org/reference/#/p5/ellipse
■ p5.jsで描ける図形まとめ
https://qiita.com/reona396/items/95812b213910c007154f

[mia_flower]

ご指摘ありがとうございます..！ellipse()と混同しておりました。