Use a triangle as a mask for growing ring

Galoris

Hi folks,

I have the following problem: I want to use a triangle on my canvas as some kind of a mask for an animation of a growing ellipse or better ring (ellipse with stroke but no fill), such that it looks like a wavefront (ring segment within triangle) coming from one vertex of the triangle. Currently it looks like shown in the image. However I'd like to have only the part of the ring within the whiteish triangle to be visible, the rest of the ring not to be shown. Apparently p5.js does not allow masking a shape with another shape and I'm out of ideas how to implement this.

Any suggestion and help is highly appreciated! Cheers

koogs

I'd like to have only the part of the ring within the whiteish triangle to be visible

that section of a circle is called an arc. there is a method for just that...

https://processing.org/reference/arc_.html

you'll need to use a bit of maths to find the angles.

Galoris

thanks, koogs! I'm aware of that, however the thing is, this triangle which is attached to that satellite on one vertex is dragable, so i can swipe the whole ground with the "beam". And while I drag that triangle across the canvas I still want to see the "wavefront" (aka the ring) to be extending, but only within the triangular mask...

TfGuy44

void setup() {
  size(400, 800);
}

void draw() {
  background(100, 100, 255);
  noStroke();
  fill(100, 255, 100);
  rect(0, height-20, width, 20);
  translate(mouseX, mouseY);
  rotate(HALF_PI);
  fill(255, 100);
  arc(0, 0, 2000, 2000, -.2, .2);
  fill(0);
  rect(-10, -10, 20, 20);
  stroke(255, 128, 64);
  strokeWeight(6);
  noFill();
  arc(0, 0, (millis()/10)%1000, (millis()/10)%1000, -.2, .2);
}

koogs

Galoris, that's ok, you can still use arc, just with a different start and end angle.

Galoris

Ok, I'm going to try this! Thank you for your help, koogs and TfGuy44!