3d "icing" drawing

modifications.js

//------------------in Graphics.js

// Calculates angle between two 2d vec
function calculateAngle(u,v){
  return Math.acos((u[0]*v[0]+u[1]*v[1])/(magnitude(u)*magnitude(v)));
}

//Calculates magnitude
function magnitude(vec){
    var magnitude = 0;
    for (var i=0; i< vec.length; i++){
      magnitude += vec[i]**2;
    }
    magnitude = Math.sqrt(magnitude);
    return magnitude;
}


//------------------in week9.js


//Global vars 
var icingObjects = [];
var drawingPoints = [];
var currentGroupStart = 0;
const drawingSampleInterval = 6;





function onStartFrame(t,state){
  /// ...
  /// put this at the end of the function
}

   if (RC){

     if (RC.isDown()){ 
      //draw position is = [x,y,z] of tip
      var drawPosition = RC.tip().slice();
      drawingPoints.push(drawPosition);
     }

     //Sample groups of 5 points in currentDrawingPoints, 

      if (drawingPoints.length == currentGroupStart + drawingSampleInterval){
        var p_1 = drawingPoints[currentGroupStart];
        var p_2 = drawingPoints[(currentGroupStart+drawingSampleInterval)-1];
        var direction = [p_2[0]-p_1[0], p_2[1]-p_1[1], p_2[2]-p_1[2]];
        var startPoint = p_1;
        var magnitude = Math.sqrt(direction[0]**2+direction[1]**2+direction[2]**2)
        icingObjects.push(
            {"pos":startPoint,
            "dir":direction,
            "mag": magnitude
          }
        );
        currentGroupStart += (drawingSampleInterval-1);
     }

     // We are releasing, aka STOPPING drawing the segment
     if (RC.release()){
      currentGroupStart = 0;
      drawingPoints = [];
     }

   }


function onDraw(){
  
  //This draws a cylinder between groups of points. The angle is probably off
  let drawIcingObject = (icingObj) => {
    m.save();
      var pos = icingObj.pos;
      var dir = icingObj.dir;
      var h = icingObj.mag;

     
      m.translate(pos[0],pos[1],pos[2])
      //RotateX to make Z axis turn in response to Y and Z plane
      m.rotateX(calculateAngle([0,1],[  dir[1],dir[2]] ));
      // //RotateY to make Z axis turn in reponse to X and Z plane.
      m.rotateY(calculateAngle([0,1],[   dir[0],dir[2] ]));
      m.scale(.02,.02,h);
      drawShape(cylinder,[1,1,1]);
    m.restore();
  }
  
  
  //This helps us visualize every point we draw in in the line
  let drawDrawingPoint = (pos) => {
       m.save();
        m.translate(pos[0],pos[1],pos[2]);
        m.scale(.01,.01,.01)
        drawShape(sphere, [0,1,0]);
      m.restore();
  }
  
  for (let i = 0; i < icingObjects.length; i++){
    drawIcingObject(icingObjects[i]);
  }
  
  for (let i = 0; i < drawingPoints.length; i++){
    drawDrawingPoint(drawingPoints[i]);
  }
}