Creating a shape using vertices of different color

p5.js Coding Questions
1

Hi, so a little while ago I attempted Dan Shiffman’s code to make my own maze. It was a really nice maze, where lines where drawn top right bottom left to make a square grid of squares, and you could call one of the lines from an array set it to false or true and in another part of the code remove said line based on the Boolean value, the square was coloured using the rect function fill command. Now I’m trying to make a hexagonal grid, to attempt a civ style recreation, however using the line function is very resource heavy and there is no hex function with a fill function to colour the shape, therefore the only other alternative is to use vertices. Only thing is vertex behaves bizarrely (probably intentional). I can fill any vertex shape, however I cannot set the colours of the vertices individually, and removing a vertex obviously breaks the shape. So I have to use vertex with nostroke to colour the hexagon and apply lines on top. I mean this is a solution but my cpu is at 60% using a 11x11 grid.

Is there another alternative outside of creating my own hex function to copy the functionality of the rect function.

maze coding example

https://www.khanacademy.org/computer-programming/maze-generator/6526425294274560

hex coding example

https://www.khanacademy.org/computer-programming/hexagon-maze-second-attempt/4653330530140160

1 Like
2

Hi! Do one of these help?

Slower approach when drawing lots of hexagons

because each hexagon is created new on every frame and sent to the graphics card

void setup() {
  size(800, 800, P2D);
}
void drawHexagon(float x, float y, float radius) {
  createShape();
  beginShape();
  noStroke();
  for (float a=0; a<TAU; a+=TAU/6) {
    fill(random(255), random(255), random(255));
    vertex(x + radius * cos(a), y + radius*sin(a));
  }
  endShape(CLOSE);
}
void draw() {
  background(255);
  drawHexagon(width * .33, height * .5, 150);
  drawHexagon(width * .66, height * .5, 150);
}

Faster approach when drawing lots of hexagons

because the hexagon object (PShape) is created only once and kept in the graphics card

PShape hexagon;
float radius = 150;

void setup() {
  size(800, 800, P2D);
  hexagon = createShape();
  hexagon.beginShape();
  hexagon.noStroke();
  for (float a=0; a<TAU; a+=TAU/6) {
    hexagon.fill(random(255), random(255), random(255));
    hexagon.vertex(radius * cos(a), radius*sin(a));
  }
  hexagon.endShape(CLOSE);
}
void draw() {
  background(255);
  shape(hexagon, width * .33, height * .5);
  shape(hexagon, width * .66, height * .5);
}

2019-05-02-172731_634x329_scrot

4 Likes
3

Thanks, in the end I did as you suggested and simply made a new standalone hexagon function which is called in my cell function with the appropriate parameters. This brought my cpu down to 30% so that’s acceptable. Considering this is currently a sketch in p5, once ported to processing this should bump up the speed. Also funnily enough the vertices don’t really slow down the cpu its just the line drawing process.

Thanks for the help anyways, much appreciated.