0

my task is to draw multiple circle at different points on the canvas. I have the circles vertices, but i can't seem to figure out how to draw all of them at the same time. I can draw each one separately, but not all five that I need.

My code looks like this

var vertices = [];
var blueCircle = drawCircle(-50,-50,200);
var yellowCircle= drawCircle(50,50,200);
var blackCircle= drawCircle(50,50,200);
var greenCircle= drawCircle(50,50,200);
var redCircle= drawCircle(50,50,200);

vertices.push(blueCircle);
vertices.push((yellowCircle);
vertices.push(blackCircle);
vertices.push(greenCircle);
vertices.push(redCircle);

This gives me a Vertices array that is made up of each circle array, as in 

vertices:(5) [Array(2272), Array(2272), Array(2272), Array(2272), Array(2272)]

Is there a way for me to add each array in its components? As in have a vertices array that is made up of all 11360 elements?

If not, how could I possibly loop through the multidimensional array and draw each point using 

gl.DrawArrays(GL_POINTS, number, number);
gman
  • 100,619
  • 31
  • 269
  • 393
Wes
  • 1
  • 1
  • Have a look at [loops](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code) and [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) ... ? – LJᛃ Mar 08 '18 at 16:15
  • https://stackoverflow.com/questions/13009328/drawing-many-shapes-in-webgl also https://stackoverflow.com/questions/39758504/webgl-drawing-multiple-shapes-of-different-colour – gman Mar 09 '18 at 05:01

0 Answers0