Tengo una secuencia de comandos súper simple que crea un círculo con colores alternos de "rebanada"
let slices = 12; function setup() { createCanvas(400, 400); noStroke(); } function draw() { background(220); translate(width/2, height/2); let inc = TWO_PI/slices; let c = 0 for (let i = 0; i < TWO_PI+inc; i+=inc) { if (c % 2 == 0) { fill('white') } else { fill('black') } arc(0, 0, width/2, width/2, i, i+inc); c++ } } ¿Cómo puedo hacer esto mismo pero con un cuadrado (o un triángulo, hexágono, etc.)? Es decir, quiero los colores de corte alternados pero encapsulados en un cuadrado en lugar de un círculo. No estoy seguro de cómo hacer esto, ya que usé arc() para crear los cortes. ¿Hay alguna manera de que pueda crear una máscara o algo así? ¿O hay una solución más fácil a mi problema?
Puede tomar su patrón y aplicarlo a una forma arbitraria usando la función mask() en p5.Image . Alternativamente, podría encontrar las intersecciones entre cada rayo que forma cada porción circular con el perímetro de su forma y usar los puntos de intersección y la definición de su forma para construir una porción circular que encajaría dentro de la forma especificada, pero esto sería mucho más complicado.
Aquí hay un ejemplo. Haga clic para cambiar de forma.
let slices = 12; let pattern; let masked; let density; const MaskTypes = ['circle', 'square', 'triangle', 'text']; let ix = 0; function setup() { createCanvas(400, 400); density = pixelDensity(); let g = createGraphics(width, height); g.noStroke(); g.translate(width / 2, height / 2); const inc = TWO_PI / slices; // fill the screen const d = sqrt(width * width + height * height); let c = 0; for (let i = 0; i < TWO_PI + inc; i += inc) { if (c % 2 == 0) { g.fill('white'); } else { g.fill('black'); } g.arc(0, 0, d, d, i, i + inc); c++; } pattern = createImage(width * density, height * density); pattern.copy(g, 0, 0, width, height, 0, 0, width * density, height * density); updateMask(); } function mouseClicked() { ix = (ix + 1) % MaskTypes.length; updateMask(); } function updateMask() { let m = makeMask(MaskTypes[ix]); masked = createImage(width * density, height * density); masked.copy(pattern, 0, 0, width * density, height * density, 0, 0, width * density, height * density); masked.mask(m); } function makeMask(type) { let g = createGraphics(width, height); g.noStroke(); g.fill(0); g.translate(width / 2, height / 2); switch (type) { case 'circle': g.circle(0, 0, width / 2); break; case 'square': g.rect(-width / 4, -height / 4, width / 2, height / 2); break; case 'triangle': g.triangle(-width / 4, height / 4, 0, -height / 4, width / 4, height / 4); break; case 'text': g.textAlign(CENTER, CENTER); g.textSize(96); g.text("Hello!", 0, 0); break; } let mask = createImage(width * density, height * density); mask.copy(g, 0, 0, width, height, 0, 0, width * density, height * density); return mask; } function draw() { background(220); image(masked, 0, 0, width, height) } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>