4 Adding more interactivity to the Java Script codes. (20pts)

4a. Take the JavaScript code that simulates the mass spring pendulum (see mass_spring_mouse_interaction.html) and make it possible for the mass to be moved to a different possition by using the mouse.

4b. Add a drag force proportional to the velocity so that the pendulum will eventually stop it's motion.

var width = cnvs.width, height = cnvs.height ; var minX = -3, maxX = 3 , minY = -5 , maxY = 1 ;

function Px(x){ return width*(x-minX)/(maxX-minX) ; } function Py(y){ return height*(maxY-y)/(maxY-minY) ; }

function iPx(x){ return ((x*(maxX-minX)/width ) + minX) ; } function iPy(y){ return (maxY - (y*(maxY-minY)/height)) ; }

var c2 = document.getElementById('c2') ;

var bcnvs = document.createElement('canvas') ; /* background canvas */ bcnvs.width = width ; bcnvs.height = height ;

bctx = bcnvs.getContext('2d') ;

/* getting a handle on the images */ var hinge = document.getElementById('hinge') ; hinge.scale = 0.4 ;

var spring = document.getElementById('spring') ; spring.scale = .25 ;

var mass = document.getElementById('mass') ; mass.scale=0.25 ; /*------------------------------------------------------------------------- * Convert x, and y into canvas pixel coordinate system *------------------------------------------------------------------------- */

var plt = new Plot(c2) ; plt.ylimits=[-5,5] ; plt.xlimits=[0,100] ; plt.grid = 'on' ; plt.xticks.noDivs = 5 ; plt.yticks.noDivs = 5 ; plt.margins.right = 20 ; plt.xticks.precision = 0 ; plt.yticks.precision = 0 ; plt.xlabel = 'time' ; plt.ylabel = 'Position' ; plt.legend.location = [430,20] ;

var xcurve = plt.addCurveFromPoints() ; var ycurve = plt.addCurveFromPoints() ; xcurve.name= 'x' ; ycurve.name = 'y' ;

plt.legend.visible = true ; plt.init() ;

/*------------------------------------------------------------------------- * defining global variables for the physical problem *------------------------------------------------------------------------- */ var xc, yc, xco, cyo ; // x and y coordinates ; var lo , vxo, vyo, vx,vy, dt,g ; var time = 0 , pltTime =0 ; var running = false ;

function getNum(id){ /* gets the number from the GUI using the id */ return eval(document.getElementById(id).value) ; }

/*------------------------------------------------------------------------- * initalizes the solution *------------------------------------------------------------------------- */ function init(){ plt.reset() ; time = 0. ; pltTime = 0. ; plt.xlimits = [0,100] ; /*------------------------------------------------------------------------- * read numbers from graphical interface *------------------------------------------------------------------------- */ xo = getNum('xo') ; yo = getNum('yo') ; vxo = getNum('vxo') ; vyo = getNum('vyo') ;

lo = getNum('lo') ; m = getNum('m') ; k = getNum('k') ; g = getNum('g') ;

dt = getNum('dt') ;

xc = xo ; yc = yo ;

vx = vxo ; vy = vyo ;

/* Clear the canvas and draw the hinge on it */ bctx.setTransform(1.,0,0,1,0,0) ; bctx.clearRect(0,0,width,height) ; bctx.translate(Px(0),Py(0)) ; bctx.scale(hinge.scale,hinge.scale) ; bctx.drawImage(hinge,-hinge.width*0.5,-hinge.height*0.5) ; bctx.setTransform(1.,0,0,1,0,0) ;

draw() ; }

function xAccel(){ l = Math.sqrt(xc*xc+yc*yc) ; dl = l-lo ;

return -(k*xc*dl/(m*l)) ; }

function yAccel(){ l = Math.sqrt(xc*xc+yc*yc) ; dl = l-lo ;

return -(k*yc*dl/(m*l)+g) ; } /*------------------------------------------------------------------------- * March the solution for one time-step *------------------------------------------------------------------------- */ function marchTime(){ time += dt ; pltTime+=dt ; var ax = xAccel() ; var ay = yAccel() ;

xc += vx*dt + 0.5*dt*dt*ax ; yc += vy*dt + 0.5*dt*dt*ay ; ax = (ax+xAccel())*0.5 ; ay = (ay+yAccel())*0.5 ;

vx += ax*dt ; vy += ay*dt ; }

/*------------------------------------------------------------------------- * draw the solution on the screen *------------------------------------------------------------------------- */ function draw(){ if(pltTime>100){ pltTime-=100 ; plt.xlimits = [plt.xlimits[0]+100,plt.xlimits[1]+100] ; plt.reset() ; } xcurve.draw(time,xc) ; ycurve.draw(time,yc) ;

/* Draw the background canvas */ fctx.setTransform(1.,0,0,1,0,0) ; fctx.clearRect(0,0,width,height) ; fctx.drawImage(bcnvs,0,0) ;

/* Write the info on canvas */ fctx.font = '16px Times' ; if (running) fctx.fillText('Running...',20,30) ; else fctx.fillText('Stopped!',20,30) ; fctx.fillText('Time = '+time.toFixed(2),20,60) ;

/* draw the mass picture on canvas */ fctx.setTransform(1.,0,0,1,0,0) ; fctx.translate(Px(xc),Py(yc)) ; fctx.scale(mass.scale,mass.scale) ; fctx.drawImage(mass,-mass.width*0.5,-mass.height*0.5) ; /* draw the spring */ var theta = Math.PI*(1.5)-Math.atan2(yc,xc) ;/* zero angle is at 270deg w.r.t x-axis */ // length of spring in pixels var x = Px(xc)-Px(0) ; var y = Py(yc)-Py(0) ; var length = Math.sqrt(x*x+y*y) ;

fctx.setTransform(1.,0,0,1,0,0) ; fctx.translate(Px(0),Py(0)) ; fctx.rotate(theta) ; fctx.scale(spring.scale,(length/spring.height)) ; fctx.drawImage(spring, -spring.width/2.,0) ; }

/*------------------------------------------------------------------------- * run the solution *------------------------------------------------------------------------- */ function run(){ if (running){ for(var i=0; i

run() ;

4 Adding more interactivity to the Java Script codes. (20pts) 4a. Take the JavaScript code that simulates the mass spring pendulum (see mass_spring mouse interaction.html) and make it possible for the mass to be moved to a different possition by using the mouse 4b. Add a drag force proportional to the velocity so that the pendulum will eventually stop it's motion 4 Adding more interactivity to the Java Script codes. (20pts) 4a. Take the JavaScript code that simulates the mass spring pendulum (see mass_spring mouse interaction.html) and make it possible for the mass to be moved to a different possition by using the mouse 4b. Add a drag force proportional to the velocity so that the pendulum will eventually stop it's motion