We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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?
Answers
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. :-@
so is there a way of creating a shape with an array of pre-made vertices?
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 *-:)
thanks for the help!, but i decided to return an array of points instead of vertices.
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
Or just use an Int16Array:
const point = Int16Array(2);
:Phttps://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array