window.onload = function(){ //alert("You can touch screen to add new stops"); //make it comment if it annoys delay = 10; move_time = .5; // unit: s circleRadius = 5; // unit: vw startPoint = [10, 20]; // unit: vw secondPoint = [10, 30]; zeroPoint = [50,10]; vertexMoving = false; forWorking = false; crtPcs("ball","red"); circle("ball", startPoint, circleRadius); crtPcs("ball2","yellow"); circle("ball2", zeroPoint, circleRadius); crtPcs("next_stop","transparent"); circle("next_stop", startPoint, circleRadius, .25); pt = [["ball",[startPoint, secondPoint]],["ball2",[zeroPoint, startPoint]]]; ptslen = pt[0][1].length; Data.getEl("text_field").innerText = "stops: " + ptslen; mvt = []; for(var p=0; ppt1[1]?180:0)) + "deg)"; } // -----create div shape until here----- function moveC(balls, steps){ // balls = [ [id, [pt1, pt2]] , ...] //alert ("moveC balls:" + balls[0][1][0]); vertexMoving=true; circle("next_stop", balls[0][1][1], circleRadius, .25); Data.getEl("text_field2").innerText = "next stop: [" + parseInt(balls[0][1][1][0]*100)/100 + ", " + parseInt(balls[0][1][1][1]*100)/100 + "]"; pts = []; // [ [id, [pt1, pt1+d, ..., pt2]] ,...] var cr = circleRadius; for(var bi=0; bi=movements.length){ executing = false; //return 0; // work finish }else{ eval(movements[step]); var check = setInterval(function(){ if(vertexMoving != true){ clearInterval(check); step++; //executing = false; execute(movements, step); } }, delay); } } function executeNode(node){ // codes is the string array of codes executing = true; if(node===null){ executing = false; //return 0; // work finish }else{ eval(node.val); var check = setInterval(function(){ if(vertexMoving != true){ clearInterval(check); //executing = false; node = node.next; executeNode(node); } }, delay); } } class ListNode{ constructor(val){ this.val = val; this.next = null; } static linkAll(nodes, cycle=false){ for(var x=0; x0 && cycle) nodes[nodes.length-1].next = nodes[0]; } } function addNewPoint(e){ var x = e.targetTouches[0].clientX, y = e.targetTouches[0].clientY; x *= 100/innerWidth; y *= 100/innerWidth; pt[0][1][ptslen] = [x,y]; pt[1][1][ptslen] = pt[0][1][ptslen-1]; //alert(mvt) mvt[ptslen-1] = moveCircle([["ball", [pt[0][1][ptslen-1], pt[0][1][ptslen]]], ["ball2", [pt[1][1][ptslen-1], pt[0][1][ptslen-1]]]], move_time); mvt[ptslen] = moveCircle([["ball", [pt[0][1][ptslen], pt[0][1][0]]], ["ball2", [pt[0][1][ptslen-1], pt[1][1][0]]]], move_time); //alert(mvt) mn[ptslen-1] = new ListNode (mvt[ptslen-1]); mn[ptslen] = new ListNode(mvt[ptslen]); if(ptslen==1){ mn[0].next = mn[1]; mn[1].next = mn[0]; } else ListNode.linkAll([mn[ptslen-2], mn[ptslen-1], mn[ptslen], mn[0]]); ptslen++; Data.getEl("text_field").innerText = "stops: " + ptslen; } function randomColor(){ var color = "#"; var hex = "0123456789abcdef"; for(var p=0; p<6; p++) color += hex[Math.floor(Math. random()*16)]; return color; }

moving multiple balls