create a shape with an array of vertices

guyshalev

hello, i am trying to create a shape with an array of pre-made vertices. here is the code:

function setup() {
  createCanvas(600, 600);
  background(150);    
}

function createVertices() {
  let vertices = [];
  let angle = TWO_PI / 6;
  for (let a = 0; a < TWO_PI; a += angle) {
    var sx = 50 + cos(a) * 20;
    var sy = 50 + sin(a) * 20;
    vertices.push(vertex(sx, sy));
  }
  return vertices;
}

function draw() {
  var verticesArray = createVertices();
  polygon(50, 50, 20, verticesArray);
}

function polygon(x, y, radius, ver) {
  beginShape();
  let vertices = [];
  for (var i = 0; i < ver.length - 1; i++) {
    vertices.push(vertex(ver[i], ver[i + 1]));
  }
  endShape(CLOSE);
}

function polygon() doesn't draw a hexagon in this way, but only if i copy the code in createVertices() function. what is the problem?

GoToLoop

Function vertex() returns the canvas' p5.Renderer object reference:
https://p5js.org/reference/#/p5.Renderer

It doesn't make any sense having an array of it. :-@

guyshalev

so is there a way of creating a shape with an array of pre-made vertices?

GoToLoop

If your actual intention is to save your shapes for displaying them later, w/o having to recreate them over & over via vertex(), p5.js doesn't seem to offer such feature like Processing's createShape(): :-<

https://Processing.org/reference/createShape_.html

As a workaround, you can draw them on array of createGraphics(), and display them all via image():
https://p5js.org/reference/#/p5/createGraphics *-:)

guyshalev

thanks for the help!, but i decided to return an array of points instead of vertices.

GoToLoop

... but i decided to return an array of points...

To represent those points' coordinates, you can use https://p5js.org/reference/#/p5/createVector *-:)

Or even make your own customized class for it: :)>-
https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class

class Point {
  constructor(x=0, y=0) {
    this.x = x, this.y = y;
  }
}

Or just use an Int16Array: const point = Int16Array(2); :P
https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array