title: Creating random shape objects in a for loop in Javascript / WebGL
body: <p>I am currently trying to figure out how to create multiple, randomized triangle objects (of varying size) and translate all of them simultaneously to the right across the screen. As they leave screen, I intend to create new objects to replace them.</p>
  
  <p>I am not sure how to render these properly, and am unsure of what I am missing to fix this. At the moment it seems I'm drawing a random polygon of some sort, and it is translating across the screen. it is most certainly not generating multiple, despite the fact the objects WERE created.</p>
  
  <p><strong>HTML RELEVANT CODE:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" &gt;
          &lt;title&gt;Rotating Square&lt;/title&gt;
  
          &lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
  
          attribute vec4 myPosition;
          uniform float theta;
          uniform vec2 mouseCoordinates;
  
          void main() {
  
              gl_PointSize=10.0;
              gl_Position.x=myPosition.x *cos(theta)+myPosition.y *sin(theta)+ mouseCoordinates.x;
              gl_Position.y=-myPosition.x *sin(theta)+myPosition.y *cos(theta)+mouseCoordinates.y;
              gl_Position.z=0.0;
              gl_Position.w=1.0;
              }
  
          &lt;/script&gt;
  
          &lt;script type ="x-shader/x-fragment" id="fragment-shader"&gt;
  
              void main(){
                  gl_FragColor =vec4(0.0,1.0,0.0,1.0);
                  }
  
              &lt;/script&gt;
              &lt;script type="text/javascript" src="Common/webgl-utils.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="Common/initShaders.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="Common/MV.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="project1.js"&gt;&lt;/script&gt;          
  &lt;/head&gt;
  </code></pre>
  
  <p>**RELEVANT JS / WEBGL CODE: **</p>
  
  <pre><code>var canvas;
  var gl;
  var myShaderProgram;
  var theta;
  var stopStartFlag;
  var mouseCoordinatesUniform;
  var clipX;
  var clipY;
  var stepX;
  var stepY;
  var speed;
  
  var triangleAmount = 25;
  var triangles = [];
  
  function init() {
      theta =.0;
      speed=0.0025;
      stopStartFlag=0;
      clipX =.0;
      clipY =.0;
      stepX=1.0;
      stepY=0.0;
      randomX_X = 0.0;
      randomX_Y = 0.0;
      randomY_X = 0.0;
      randomY_Y = 0.0;
      randomZ_X = 0.0;
      randomZ_Y = 0.0;
      randomTheta = 0.0;
      randomSpeed = 0.0;
  
  
      for ( var i = 0; i &lt; triangleAmount; i++ ){
          randomX_X = (Math.random() * 1) - 1;
          randomX_Y = (Math.random() * 1);
          randomY_X = (Math.random() * 1) - 1; // get it off the screen x-wise
          randomY_Y = (Math.random() * 1);
          randomZ_X = (Math.random() * 1) - 1;
          randomZ_Y = (Math.random() * 1);
          var triangle = new Triangle(vec2(randomX_X,randomX_Y),
                                    vec2(randomY_X,randomY_Y),
                                    vec2(randomZ_X,randomZ_Y),
                                    randomTheta,
                                    randomSpeed)
      triangles.push(triangle);
      }
  
      canvas = document.getElementById("gl-canvas");
      gl= WebGLUtils.setupWebGL(canvas);
      if(!gl){ alert("WebGL is not working");}
  
      gl.viewport(0,0,512,512);
      gl.clearColor(0.0,0.0,1.0,1.0);
  
      myShaderProgram=initShaders(gl,"vertex-shader","fragment-shader");
      gl.useProgram(myShaderProgram); 
      mouseCoordinatesUniform = gl.getUniformLocation( myShaderProgram,"mouseCoordinates");
      gl.uniform2f( mouseCoordinatesUniform,.0,.0);
  
      setupSquare();
      render();
  }
  
  // vec2 points for args
  function Triangle(x, y, z, thetaInc, spd) {
      this.onScreen = true;
      this.x = x;
      this.y = y;
      this.z = z;
  
      this.spawnY = y[1]; // y value of the y vertex
                          // decides where on the y axis the triangle appears offscreen
  
  
      this.theta = 0;
      this.rotationSpeed = thetaInc;
      this.speed = spd;
  
      this.counter = 0;
  
  
  }
  
  
  
  function setupSquare() {
  
      var point0 = vec2(-.2,-.2);
      var point1 = vec2(-.2,.2);
      var point2 = vec2(.2,.2);
      var point3 = vec2(.2,-.2);
      var point4 = vec2(0,.75)
  
  
      var pointa = vec2(-0.5, .4);
      var pointb = vec2( -0.25, .4);
      var pointc = vec2(-0.35, .8);
  
      var arrayOfpointsForSquare=[point0,point1,point2,point3,point4];
      var arrayOfPointsForTriangle=[pointa,pointb,pointc];
  
      var bufferId =gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER,bufferId);
  
      gl.bufferData(gl.ARRAY_BUFFER,flatten(arrayOfpointsForSquare),gl.STATIC_DRAW );
  
  
      var myPosition = gl.getAttribLocation(myShaderProgram,"myPosition");
      gl.vertexAttribPointer(myPosition,2,gl.FLOAT,false,0,0);
      gl.enableVertexAttribArray(myPosition);
  }
  
  
  function drawTriangles(){
      arrayOfPointsForTriangle = [];
      var arrayOfPointsForTriangle=[];
  
      for (var i = 0; i &lt; triangleAmount; i++){
          arrayOfPointsForTriangle.push(triangles[i].x, triangles[i].y, triangles[i].z);
          console.log(triangles[i].x);
      }
      var bufferId =gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER,bufferId);
  
      gl.bufferData(gl.ARRAY_BUFFER,flatten(arrayOfPointsForTriangle),gl.STATIC_DRAW );
  
  
      var myPosition = gl.getAttribLocation(myShaderProgram,"myPosition");
      gl.vertexAttribPointer(myPosition,2,gl.FLOAT,false,0,0);
      gl.enableVertexAttribArray(myPosition);
  
  }
  
  
  function render() {
      var thetaUniform = gl.getUniformLocation(myShaderProgram,"theta" );
      gl.uniform1f(thetaUniform,theta);
      gl.clear(gl.COLOR_BUFFER_BIT );
      gl.drawArrays(gl.TRIANGLE_FAN,0,5);
  
      drawTriangles();
      gl.drawArrays(gl.TRIANGLE_FAN,0,3);
  
      theta+=.01*stopStartFlag;
      clipX=clipX+stepX*speed;
      clipY=clipY+stepY*speed;
      gl.uniform2f(mouseCoordinatesUniform,clipX,clipY);
      requestAnimFrame(render);
  }
  </code></pre>
  
  <p>An example of the current state can be viewed at <a href="http://www.aceverything.com/cskelly/project1/project1.html" rel="nofollow noreferrer">http://www.aceverything.com/cskelly/project1/project1.html</a></p>