Блог

Главная - Вопросы по программированию - Рисуйте фигуры только в пределах границы в P5.js

Рисуйте фигуры только в пределах границы в P5.js

#javascript #p5.js

Вопрос:

У меня есть такой пример здесь: https://editor.p5js.org/agjones91/sketches/v6N5UlCAz

Код прост, создайте 100 кругов в случайных местах с квадратом сверху. Что мне нужно сделать, так это обрезать круги, чтобы они отображались только внутри квадрата. Части кругов за пределами квадрата показывать нельзя.

 function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  noFill();
  translate(100, 100);
  for (var i = 0; i < 100; i  ) {
    var circleX = random(2, 50);
    var circleY = random(2, 50);

    circle(circleX, circleY, 100);
  }
  stroke("red");
  square(-25, -25, 100); //cop using this square
}

Как только это будет сделано, мне нужно будет повторить это несколько раз по холсту, чтобы нельзя было использовать наложение фигур для покрытия внешней стороны. Мне нужно, чтобы круги не выходили за определенную границу.

Комментарии:

1. может быть, с помощью графики? p5js.org/examples/structure-create-graphics.html

2. @AlbertoSinigaglia это сработало, я добавлю ответ

Ответ №1:

Удалось решить эту проблему благодаря @Alberto Sinigaglia в комментариях выше и пользователю графики: https://editor.p5js.org/agjones91/sketches/v6N5UlCAz

Идея состоит в том, чтобы применить круги к одному слою (графику), а затем обрезать (замаскировать) его, используя другой слой. Смотрите код ниже:

 function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);

  img = createGraphics(width, height);
  img.noFill(); //apply styles to new graphics layer
  img.translate(100, 100); //apply translations to new graphics layer
  
  for (var i = 0; i < 100; i  ) {
    var circleX = random(2, 50);
    var circleY = random(2, 50);
    img.ellipse(circleX, circleY, 100, 100); //apply shapes to new graphics layer
  }

  mk = createGraphics(width, height);
  mk.translate(75, 75);
  mk.rect(0, 0, 100, 100);

  imgClone = img.get();
  imgClone.mask(mk.get());

  image(imgClone, 0, 0);
}
Метки: