Estoy aprendiendo JS en p5.js y necesito ayuda con esto: tengo una serie de objetos (solo algunas líneas que siguen moviéndose en patrones aleatorios) y quiero mantenerlos dentro de los bordes de otro objeto, en este caso, un círculo. Estaba tratando de resolverlo con la función createGraphics, pero no funcionó.
La matriz de líneas se llama "linhas" (la clase de objeto está en otro archivo llamado "linhas.js", el segundo fondo "fundo2", el círculo es "circulo". El código es este:
let linhas = []; let fundo2; function setup() { createCanvas(400, 400); pixelDensity(1); fundo2 = createGraphics (400,400); for (let i = 0; i < 100; i++){ let x = random(0, 400); let y = random(0, 400); let z = random(0, 400); let w = random(0, 400); linhas[i] = new Linha(x, y, z, w); } } function draw() { sol(); tracos(); } function tracos() { for (let linha of linhas) { linha.display(); linha.tremer(); } } function sol() { image(fundo2,0,0); fundo2.noStroke(); fundo2.circle(200,200,250); }En caso de que quieran ver mejor mi intento, el enlace al editor web de p5.js es este: https://editor.p5js.org/dolivetro/sketches/NZ2FlsPwx
¡Gracias por adelantado! mi proyecto p5.js
Básicamente, tiene tres opciones: 1) hacer los cálculos para calcular los puntos inicial y final de cada línea en función de las intersecciones entre cada línea y el círculo en el que se dibujarán; 2) dibuje sus líneas en un contexto separado, copie el contenido en una imagen y luego use la función p5.Image.mask ; o 3) dibuje sus líneas en un contexto separado y luego use la función erase() o blendMode(REMOVE) para borrar la parte de ese contexto que no está dentro del círculo (esto también requeriría una forma de máscara adicional).
Como ya está dibujando en un contexto separado, aquí hay un ejemplo que usa una máscara de imagen (es decir, #2):
let linhas = []; let fundo2; let img; let maskCtx; function setup() { createCanvas(400, 400); pixelDensity(1); fundo2 = createGraphics(400, 400); maskCtx = createGraphics(400, 400); maskCtx.noStroke(); maskCtx.circle(200, 200, 250); img = createImage(width, height); for (let i = 0; i < 100; i++) { let x = random(0, 400); let y = random(0, 400); let z = random(0, 400); let w = random(0, 400); linhas[i] = new Linha(x, y, z, w); } } function draw() { circulo(); tracos(); } function tracos() { for (let linha of linhas) { linha.display(); linha.tremer(); } } function circulo() { img.copy(fundo2, 0, 0, width, height, 0, 0, width, height); img.mask(maskCtx); image(img, 0, 0, width, height); fundo2.noStroke(); fundo2.circle(200, 200, 250); } class Linha { constructor(x, y, z, w) { this.x = x; this.y = y; this.z = z; this.w = w; } display() { fundo2.stroke(255, 0, 0, 70); fundo2.strokeWeight(2); fundo2.line(this.x, this.y, this.z, this.w); } tremer() { this.x = this.x + random(-1, 1); this.y = this.y + random(-1, 1); this.z = this.z + random(-1, 1); this.w = this.w + random(-1, 1); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>