<!DOCTYPE html> <html> <head> <title>Aurora Rack</title> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-title" content="Aurora"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-startup-image" href="launch.png"> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <!-- Page specific styles --> <style> </style> <!-- Web audio buttons defaults --> <script type="application/javascript" src="webcomponents-lite.js"></script> <script type="application/javascript" src="config.js"></script> <script> WebAudioControlsOptions={ useMidi:1, knobSrc:"knobs/simplegray.png", knobSprites:100, switchSrc:"knobs/switch_toggle.png", sliderSrc:"knobs/vsliderbody.png", sliderKnobsrc:"knobs/vsliderknob.png", } </script> <script src="webaudio-controls.js"></script> <!-- link rel="stylesheet" href="LJgrid.css" / --> <link rel="stylesheet" type="text/css" href="selector.min.css"> <script type="application/javascript" src="selector.min.js"></script> <link rel="stylesheet" href="css/common.css" /> </head> <body style="background-image: linear-gradient(174deg, #292929,#111);"> <div class="Rackcontent"> <!-- Navigation Rack --> <div class="content"> <div class="buttons-7container"> <a href="index.html"> <div class="webaudiobut"> <div align="center" class="navled"> Index </div> </div> </a> <a href="settings.html"> <div class="webaudiobut"> <div align="center" class="navled"> Settings </div> </div> </a> <a href="auralls.html"> <div class="webaudiobut"> <div align="center" class="navled"> Aurora </div> </div> </a> <a href="trckr/trckrcam1.html"> <div class="webaudiobut"> <div align="center" class="navled"> Lasercam </div> </div> </a> <a href="simu.html"> <div class="webaudiobut"> <div align="center" class="navled"> Simu </div> </div> </a> <div class="webaudiobut"> <button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/reset" > Reset </button> </div> <div class="webaudiobut"> <button type="button" class="navled" style="border : #222222 1px;" onclick="onSubmit(this.id)" id="settings/restart aurora" > rstrt AU </button> </div> </div> </div> <!-- Display Rack --> <div class="content"> <div class="TopRackGrid"> <div> <h2> /TL Aurora <span class="shade"> </span> </h2> <webaudio-switch id="on" value="1" tooltip="Switch-B" height="35" width="85" src="knobs/switch1.png"> </webaudio-switch> </div> <div class="webaudiobut"> <div align="center" id="line1" class="busled"> Aurora control rack </div> <div align="center" id="status" class="busled"> /team/laser </div> </div> <div class="etherled" style="margin-left: 30px;margin-top: 1px;"> Stt <webaudio-knob id="lstt/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> <webaudio-knob id="lstt/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> <webaudio-knob id="lstt/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> <webaudio-knob id="lstt/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> </div> <div class="etherled" style="margin-left: 30px;margin-top: 1px;"> Ack <webaudio-knob id="lack/0" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> <webaudio-knob id="lack/1" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> <webaudio-knob id="lack/2" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> <webaudio-knob id="lack/3" src="knobs/leds.png" height="17" width="17" diameter="17" min="0" max="6" value="0" sprites="6"></webaudio-knob> </div> </div> </div> <!-- Scene choice Rack --> <div class="content"> <div class="Settingrid"> <div> <h2>Scene</h2> </div> <div class="webaudiobut" align="center" style="width: 83px;"> <button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/0/start 1" > 0 </button> </div> <div> </div> <div class="webaudiobut" align="center" style="width: 83px;"> <button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/1/start 1" > 1 </button> </div> <div> </div> <div class="webaudiobut" align="center" style="width: 83px;"> <button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/2/start 1" > 2 </button> </div> <div> </div> <div class="webaudiobut" align="center" style="width: 83px;"> <button type="button" class="navled" style="border: 1px solid #002020; text-align: middle;" onclick="onSubmit(this.id)" id="scene/3/start 1" > 3 </button> </div> <div></div> <div></div> <div></div> <div> </div> <div></div> </div> </div> <!-- Laser Rack --> <div class="content"> <div class="Rackgrid"> <div> <h2>Lasers</h2> </div> <div></div> <div class="webaudiobut"><webaudio-switch id="noteon 24" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/big0.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="noteon 25" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/big1.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="noteon 26" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/big2.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="noteon 27" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/big3.png"></webaudio-switch></div> <div></div> <div></div> <div></div> <div> </div> <div></div> </div> </div> <!-- FX Rack --> <div class="content"> <div class="Rackgrid"> <div> <h2>FXs</h2> </div> <div class="webaudiobut"><webaudio-switch id="aurora/fx/ ScanH" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/scanH.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/fx/ ScanV" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/scanV.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/fx/ Wave" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/saw.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/fx/ Circle" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/circle.png"></webaudio-switch></div> <div class="webaudiobut" style ="margin-left: 5px"><webaudio-switch id="aurora/fx/ Starfield" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/stars.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/fx/ Word" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/text.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/fx/ Trckr" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/trckr.png"></webaudio-switch></div> <div> </div> <div></div> <div></div> </div> </div> <!-- RGB Colors Rack --> <div class="content"> <div class="Rackgrid"> <div> <h2>Colors</h2> </div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ red" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/red.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ yellow" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/yellow.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ green" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/green.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ blue" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/blue.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ cyan" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/pink.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ white" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/white.png"></webaudio-switch></div> <div></div> <div></div> <div> </div> <div></div> </div> </div> <!-- RGY Colors Rack <div class="content"> <div class="Rackgrid"> <div> <h2>Colors</h2> </div> <div></div> <div></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ red" value="1" tooltip="Switch-B" height="64" width="64" src="knobs/red.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ yellow" value="0" tooltip="Switch-B" height="64" width="64" src=" knobs/yellow.png"></webaudio-switch></div> <div class="webaudiobut"><webaudio-switch id="aurora/color/ green" value="0" tooltip="Switch-B" height="64" width="64" src="knobs/green.png"></webaudio-switch></div> <div></div> <div></div> <div></div> <div> </div> <div></div> </div> </div> --> <!-- Text Rack --> <div class="content"> <div class="TextGrid"><h2>1 word</h2> <form onsubmit="onSubmit(); return false;"> <input class = "submitext" onchange = "onSubmit(this.id)" type="text" id="aurora/word/" value=""> </form> </div> </div> <!-- Modifiers Rack --> <div class="content" style="display: grid;"> <div class="buttons-7container" id="text"> <div> <div style = "font-size: 1.5ex;"> <h2>Pos X</h2> </div> <div><webaudio-knob id="aurora/Xcoord" diameter="60" min="1" max="127" value="45"></webaudio-knob></div> <div><webaudio-param link="aurora/Xcoord" value="45"></webaudio-param></div> </div> <div> <div style = "font-size: 1.5ex;"> <h2>Pos Y</h2> </div> <div><webaudio-knob id="aurora/Ycoord" diameter="60" min="1" max="127" value="45"></webaudio-knob></div> <div><webaudio-param link="aurora/Ycoord" value="45"></webaudio-param></div> </div> <div> <div style = "font-size: 1.5ex;"> <h2>Resize <span class="shade"> </span> </h2> </div> <div><webaudio-knob id="aurora/scale" diameter="60" min="1" max="127" value="45"></webaudio-knob></div> <div><webaudio-param link="aurora/scale" value="45"></webaudio-param></div> </div> <div> <div style = "font-size: 1.5ex;"> <h2>Points</h2> </div> <div> <webaudio-knob id="aurora/scandots" diameter="60" min="2" max="127" value="64"></webaudio-knob> </div> <div> <webaudio-param link="aurora/scandots" value="0"></webaudio-param> </div> </div> <div> <div> <h2 style = "font-size: 1.5ex;">Rot X</h2> </div> <div><webaudio-knob id="aurora/rotdirec X" diameter="60" min="0" max="360" value="0"></webaudio-knob></div> <div><webaudio-param link="aurora/rotdirec X" value="0"></webaudio-param></div> </div> <div> <div > <h2 style = "font-size: 1.5ex;">Rot Y</h2> </div> <div><webaudio-knob id="aurora/rotdirec Y" diameter="60" min="0" max="360" value="0"></webaudio-knob></div> <div><webaudio-param link="aurora/rotdirec Y" value="0"></webaudio-param></div> </div> <div> <div> <h2 style = "font-size: 1.5ex;">Rot Z</h2> </div> <div><webaudio-knob id="aurora/rotdirec Z" diameter="60" min="0" max="360" value="0"></webaudio-knob></div> <div><webaudio-param link="aurora/rotdirec Z" value="0"></webaudio-param></div> </div> <div></div> </div> <div class="buttons-7container" id="text"> <div> <div style = "font-size: 1.5ex;"> <h2>Steps</h2> </div> <div> <webaudio-knob id="aurora/steps" diameter="60" min="2" max="127" value="64"></webaudio-knob> </div> <div> <webaudio-param link="aurora/steps" value="0"></webaudio-param> </div> </div> <div> <div style = "font-size: 1.5ex;"> <h2>Max</h2> </div> <div> <webaudio-knob id="aurora/stepmax" diameter="60" min="2" max="127" value="64"></webaudio-knob> </div> <div> <webaudio-param link="aurora/stepmax" value="0"></webaudio-param> </div> </div> <div> <div style = "font-size: 1.5ex;"> <h2>Line</h2> </div> <div> <webaudio-knob id="aurora/linesize" diameter="60" min="2" max="127" value="64"></webaudio-knob> </div> <div> <webaudio-param link="aurora/linesize" value="64"></webaudio-param> </div> </div> <div> <div style = "font-size: 1.5ex;"> <h2>Radius</h2> </div> <div> <webaudio-knob id="aurora/radius" diameter="60" min="0" max="127" value="45"></webaudio-knob> </div> <div> <webaudio-param link="aurora/radius" value="45"></webaudio-param> </div> </div> <div> </div> <div> </div> <div> </div> </div> </div> <!-- Simu Rack --> <div class="content" style="background-image: linear-gradient(174deg, #111,#030303);"> <canvas id="canvas" width="400" height="400" style="margin-left: 200px;margin-top : 20px;background-image:">canvas> </div> </div> </div> <!-- Encoders Line # /aurora/radius layernumber radius [0-1] # /aurora/rotdirec layer axe direc # /aurora/linesize layer value # /aurora/rotdirec layer axe direc # /aurora/rotspeed layernumber axe speed # /aurora/transpeed layernumber axe transpeed # /aurora/transamt layernumber axe maxposition --> <!-- JS --> <!-- LJ style WS : A nettoyer ! --> <script type="text/javascript"> var LJ = websocket_uri var pl = ""; var pl2 = new Array(); var _WS = { uri: LJ, ws: null, init : function (e) { _WS.s = new WebSocket(_WS.uri); _WS.s.onopen = function (e) { _WS.onOpen(e); }; _WS.s.onclose = function (e) { _WS.onClose(e); }; _WS.s.onmessage = function (e) { _WS.onMessage(e); }; _WS.s.onerror = function (e) { _WS.onError(e); }; }, onOpen: function () { _WS.showstatus("Connected to "+LJ); }, onClose: function () { _WS.showline1('<span style="color: red;">LJ DISCONNECTED</span> '); //var divtext1 = document.getElementById('line1'); ///divtext1.innerHTML='DISCONNECTED'; document.getElementById("on").value = 0; document.getElementById("lstt/0").value = 0; document.getElementById("lack/0").value = 0; }, onMessage: function (e) { var res = e.data.split(" "); var divtext = document.getElementById('status'); var divtext1 = document.getElementById('line1'); switch (res[0].substring(0,6)) { case "/statu": //divtext.innerHTML="connected to "+LJ; //_WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data); //divtext.innerHTML=res[1]+" "+res[2]; //divtext1.innerHTML="connected to "+LJ; //console.log("/status "+res[1]+" "+res[2]) _WS.showline1("connected to "+LJ); if (res[2]==="Disconnected"){ _WS.showstatus(res[1]+" "+'<span style="color: red;">'+ res[2]+'</span> '); } else{ _WS.showstatus(res[1]+" "+res[2]); } break; case "/redst": //console.log("red"+res[1]+" "+res[2]); _WS.showstatus('<span style="color: red;">'+res[1]+" "+ res[2]+'</span> '); break; case "/line1": //divtext.innerHTML="connected to "+LJ; divtext1.innerHTML=res[1]+" "+res[2]; break; case "/redline1": //divtext.innerHTML="connected to "+LJ; divtext1.innerHTML='<span style="color: red;">'+ res[1]+" "+res[2]+'</span>'; break; case "/laser": console.log("/laser "+res[1]) newlaser(res[1]) break; case "/simul": pl = e.data.slice(7); //console.log(pl) pl2 = eval(pl.replace(/[()]/g, '')); break; case "/lack/": console.log("/lack "+res[1]) document.getElementById(res[0].slice(1)).value = res[1]; break; case "/lstt/": console.log("/lstt "+res[1]) document.getElementById(res[0].slice(1)).value = res[1]; break; default: //console.log("default "+res[0].slice(1)+" "+res[1]); //document.getElementById(res[0].slice(1)).value = res[1]; //_WS.showstatus(e.data); } }, onError: function (e) { _WS.showstatus('<span style="color: red;">ERROR:</span> ' + e.data); }, showstatus: function (message) { var divtext = document.getElementById('status'); divtext.innerHTML=""; divtext.innerHTML= message.toString(); }, showline1: function (message) { var divtext = document.getElementById('line1'); divtext.innerHTML=""; divtext.innerHTML= message.toString(); }, showredline1: function (message) { var divtext = document.getElementById('line1'); divtext.innerHTML=""; divtext.innerHTML= message.toString(); }, send: function (message) { if (!message.length) { alert('Empty message not allowed !'); } else { _WS.showstatus(message); _WS.s.send(message); } }, close: function () { _WS.showstatus('GOODBYE !'); _WS.s.close(); } }; window.addEventListener('load', _WS.init, false); // // Forms submits // function onSubmit(clicked_id) { var input = document.getElementById(clicked_id); console.log("/" + clicked_id + " " + input.value); _WS.send("/" + clicked_id + " " + input.value); //_WS.send("/" + clicked_id + laser + " " + input.value); } function clickcolor(a,b,c,d) { console.log(a,b,c,d); } </script> <!-- web audio encoders scripts --> <script type="text/javascript"> var message=""; var log=[]; var knobs = document.getElementsByTagName('webaudio-knob'); var laser = 0; for(var i = 0; i < knobs.length; i++){ knobs[i].addEventListener("input",Dump,false); knobs[i].addEventListener("change",Dump,false); } var sliders = document.getElementsByTagName('webaudio-slider'); for(var i = 0; i < sliders.length; i++){ sliders[i].addEventListener("input",Dump,false); sliders[i].addEventListener("change",Dump,false); } var switches = document.getElementsByTagName('webaudio-switch'); for(var i = 0; i < switches.length; i++) { switches[i].addEventListener("change",Dump,false); } function newlaser(id) { console.log("newlaser " +id) var laserid = 24+ parseInt(id,10); lasernote = "noteon "+laserid; console.log("laser "+lasernote); nolaser(); nofx(); var x = document.getElementById(lasernote); x.value = 1 ; laser = id } function nolaser() { //console.log("nolaser") var x = document.getElementById("noteon 24"); x.value = 0 ; var x = document.getElementById("noteon 25"); x.value = 0 ; var x = document.getElementById("noteon 26"); x.value = 0 ; var x = document.getElementById("noteon 27"); x.value = 0 ; } function nofx() { //console.log("nofx0") var x = document.getElementById("aurora/fx/ ScanH"); x.value = 0 ; var x = document.getElementById("aurora/fx/ ScanV"); x.value = 0 ; var x = document.getElementById("aurora/fx/ Wave"); x.value = 0 ; var x = document.getElementById("aurora/fx/ Circle"); x.value = 0 ; var x = document.getElementById("aurora/fx/ Starfield"); x.value = 0 ; var x = document.getElementById("aurora/fx/ Word"); x.value = 0 ; var x = document.getElementById("aurora/fx/ Trckr"); x.value = 0 ; } // RGB Colors function nocolor() { //console.log("nocolor0") var x = document.getElementById("aurora/color/ red"); x.value = 0 ; var x = document.getElementById("aurora/color/ yellow"); x.value = 0 ; var x = document.getElementById("aurora/color/ green"); x.value = 0 ; var x = document.getElementById("aurora/color/ blue"); x.value = 0 ; var x = document.getElementById("aurora/color/ cyan"); x.value = 0 ; var x = document.getElementById("aurora/color/ white"); x.value = 0 ; } // RGY Colors //function nocolor() { //var x = document.getElementById("aurora/color/ red"); // x.value = 0 ; //var x = document.getElementById("aurora/color/ yellow"); // x.value = 0 ; //var x = document.getElementById("aurora/color/ green"); // x.value = 0 ; //} function Dump(e) { var str=""; str=e.type + " : " + e.target.id + " : " + e.target.value + " "; console.log(str); log.unshift(str); log.length=1; str=""; for(var i=19;i>=0;--i) { if(log[i]) str+=log[i]+"<br/>"; } //console.log("have sent "+"/" + e.target.id + " " + e.target.value) //_WS.send("/" + e.target.id + " " + e.target.value); var res = e.target.id.split(" "); //console.log(res) // on off if (e.target.id === "on" && e.type === "change") { window.location.reload(); } // Go to index if (e.target.id === "index" && e.type === "change") { window.location.assign("index.html"); } // Fx if (res[0].substring(7,9) === "fx" && e.type === "change") { nofx(); _WS.send("/"+res[0]+laser+ " "+ res[1]+ " " + e.target.value); var x = document.getElementById(e.target.id); x.value = 1 ; //_WS.showstatus("Laser "+laser+ " "+ res[1]); console.log("FX sending " + res[0]+laser+ " "+ res[1]+ " " + e.target.value); } // Colors if (res[0].substring(7,9) === "co" && e.type === "change") { nocolor(); _WS.send("/"+res[0]+laser+ " "+ res[1]+ " " + e.target.value); var x = document.getElementById(e.target.id); x.value = 1 ; //_WS.showstatus("Laser "+laser+ " "+ res[1]); console.log("colors sending "+res[0]+laser+ " "+ res[1]+ " " + e.target.value); } // Lasers if (res[0] === "noteon" && e.type === "change") { //console.log(e.target.id); //console.log(res); //console.log(res[1] - 24) newlaser(res[1] - 24); _WS.send("/" + e.target.id + " " + e.target.value); //nolaser(); //nofx(); //_WS.send("/" + e.target.id + " " + e.target.value); //var x = document.getElementById(e.target.id); //x.value = 1 ; //laser = res[1] - 24; //console.log("laser "+laser); } // Knobs if (res[0].slice(-1) !== "/" && res[0] !== "noteon") { if (res.length == 1) { console.log("knobs sending "+res[0]+" "+laser+ " " + e.target.value); _WS.send("/" + res[0]+" "+laser+ " " + e.target.value); } else { console.log("knobs sending "+res[0]+" "+laser+ " "+ res[1]+ " " + e.target.value); _WS.send("/" + res[0]+" "+laser+ " " + res[1]+" "+ e.target.value); } } } </script> <!-- Simulator Point lists drawing scripts --> <script type="text/javascript"> // // Simulator canvas : store Reference To The Canvas & Set Context // var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var lastpoint = { x: 0, y: 0, color: 0}; ctx.clearRect(0,0,400,400); var zoom = 0.5; //ctx.save // Todo : laser point will have black points to go from a polyline to another. Need to discard those black points. function draw() { // Clear Canvas At The Start Of Every Frame //ctx.restore if (pl2.length > 0) { // Begin a new path // 0.7 reduces max coordinates in a more browser compatible resolution. ctx.clearRect(0,0,400,400); ctx.beginPath(); ctx.moveTo(pl2[0]*zoom, pl2[1]*zoom); lastpoint.color = pl2[2]; // Draw n Lines for (var i = 0; i < pl2.length/3; i++) { // New point has the same color -> add a new line to the new point if (pl2[2+(i*3)] === lastpoint.color) { ctx.lineTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom); } // New point has different color -> stroke with previous color if (pl2[2+(i*3)] != lastpoint.color) { ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6); ctx.stroke(); ctx.closePath() //ctx.restore ctx.beginPath(); //ctx.clearRect(0,0,400,400); ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom); } // Last point -> stroke with current color if (i === (pl2.length/3)-1 ) { ctx.moveTo(pl2[i*3]*zoom, pl2[1+(i*3)]*zoom); ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6); ctx.stroke(); ctx.closePath() //ctx.restore //ctx.clearRect(0,0,400,400); } // store point for comparison lastpoint.x = pl2[i*3]; lastpoint.y = pl2[1+(i*3)]; lastpoint.color = pl2[2+(i*3)]; } } // Call Draw Function Again To Create Animation window.requestAnimationFrame(draw); } // Initialize The Draw Function draw(); </script> </body> </html>