Need Help with Triangle Strip p5.js

Siehstdumich

Hi Guys,

I'm new at p5.js and I'm trying to change the code in the below link from the p5.js examples to do the same effect with a line or rect. It would be really really great if someone could help. :)

https://p5js.org/examples/form-triangle-strip.html

jeremydouglass

@Siehstdumich --

Try using beginShape(QUAD_STRIP)

• https://p5js.org/reference/#/p5/beginShape

Note that you may need to change how many points are in the loop -- a TRIANGLE_STRIP begins with three points for the first triangle, then one point per additional triangle. On the other hand, a QUAD_STRIP begins with four points for the first quad, then two points per additional quad.

For more details see:

• https://forum.processing.org/two/discussion/comment/97121/#Comment_97121

Siehstdumich

@jeremydouglass

thank you for the quick answer :)

but maybe I wasn't clear enough, sorry it's really hard for me to explane it in english, ^^" I have now done the below code. But I want a fixed area where the number of points increases and decreases by moving the mouse like in the image below: http://img5.fotos-hochladen.net/uploads/unbenannt0xajoi8gfz.png

function setup() {
  createCanvas(1000, 1000);
}

function draw() {
  background(255);

  drawObject(10, 10);

  function drawObject() {
    {
      var a = 20;
      var b = 40;
      var c = 0;
    }
    var numPoints = int(map(mouseX, 0, width, 4, 80));
    var angle = 0;
    var angleStep = 180 / numPoints;
    beginShape(TRIANGLE_STRIP);
    for (var i = 0; i <= numPoints; i++) {
      var px = a;
      var py = c + numPoints * i;
      angle += angleStep;
      vertex(px, py);
      px = b;
      py = c + numPoints * i;
      vertex(px, py);
      angle += angleStep;
    }
    endShape();
  }


}

jeremydouglass

Please format your code:

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

jeremydouglass

Your example fits different numbers of points into the same circle angle by creating a variable angleStep:

var angleStep = 180.0/numPoints;

You could use this approach for your rectangular triangleStrip -- compute var heightStep based on numPoints, then increment it for each pair of points.

Alternately, use map() or lerp() to dynamically find the current point height based on the step, number of points, and total height:

• https://p5js.org/reference/#/p5/map
• https://p5js.org/reference/#/p5/lerp

Siehstdumich

okay thank you I will try it :) (and thanks for the advise. I have formatted the code above)