Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<div style="widht:20%">
<button href="#" id="add_pts" style="z-index:100;">add new point</button><br />
<button href="#" id="rotiranje" style="z-index:100;">ROTIRAJ X</button><br />
  <button href="#" id="roty" style="z-index:100;">ROTIRAJ Z</button><br />
</div>
<div style="widht:80%">
<canvas id="canvas" width=800 height=800></canvas>
</div>
 
body{ background-color: ivory; padding:10px; }
​
#canvas{border:1px solid green;
 
  
  
  //line-height: 95px;
  text-align: center;
 -webkit-transform: translate3d(1,0,0);
 
-webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;  //width: 95px;
  margin-left:100px;
  -webkit-transform: perspective(500px) rotateX(10deg);
  position: fixed; z-index: -10; 
   
}
canvas:hover {
  
​
   -webkit-transform: perspective(400px)  rotateX(70deg);
​
  
    
}
 
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var ctx1=canvas.getContext("2d");
​
//center object
ctx1.beginPath();
      ctx1.moveTo(370, 400);
      ctx1.lineTo(430, 400);
ctx1.lineWidth = 5;
ctx1.strokeStyle = 'red';
ctx1.stroke();
​
ctx1.fillStyle="blue";
ctx1.beginPath();
ctx1.moveTo(400,360);
ctx1.lineTo(430,380);
ctx1.lineTo(370,380);
ctx1.closePath();
ctx1.fill();
//stop center object
​
var w = window.innerWidth;
var h = window.innerWidth;
​
​
var cw=window.innerWidth;
var ch=window.innerWidth;
var fov = 250;
var rotation =0;
​
​
​
var pts=[];
​
var pts1 = [{"X":"52.67721472156448","Y":"8.211078643798828"},{"X":"52.68054512576284","Y":"8.21176528930664"},{"X":"52.683875276043096","Y":"8.21176528930664"},{"X":"52.687205172413364","Y":"8.210735321044922"},{"X":"52.68991052625873","Y":"8.211421966552734"},{"X":"52.692823796800084","Y":"8.212451934814453"},{"X":"52.695320731122195","Y":"8.211421966552734"},{"X":"52.69864975473879","Y":"8.210735321044922"},{"X":"52.701146355845985","Y":"8.211078643798828"},{"X":"52.70468296296834","Y":"8.21004867553711"},{"X":"52.70655516836385","Y":"8.209705352783203"},{"X":"52.71092333526231","Y":"8.210391998291016"},{"X":"52.71425116891493","Y":"8.21004867553711"},{"X":"52.7175787487317","Y":"8.21004867553711"},{"X":"52.720490172853076","Y":"8.211421966552734"},{"X":"52.72402521231565","Y":"8.210735321044922"},{"X":"52.72922327925065","Y":"8.213138580322266"},{"X":"52.73275761083366","Y":"8.216915130615234"},{"X":"52.73338128666577","Y":"8.220348358154297"},{"X":"52.734628611563245","Y":"8.224468231201172"},{"X":"52.73358917662706","Y":"8.229961395263672"},{"X":"52.73213392607922","Y":"8.23202133178711"},{"X":"52.730678626953974","Y":"8.23373794555664"},{"X":"52.729015368470314","Y":"8.234081268310547"},{"X":"52.72714412683363","Y":"8.235111236572266"},{"X":"52.724649013065175","Y":"8.235797882080078"},{"X":"52.72215375652838","Y":"8.236141204833984"},{"X":"52.72007426701941","Y":"8.236141204833984"},{"X":"52.71778671404229","Y":"8.236141204833984"},{"X":"52.71549904109217","Y":"8.236827850341797"},{"X":"52.71300326104201","Y":"8.235797882080078"},{"X":"52.710091337186334","Y":"8.23648452758789"},{"X":"52.707803260671206","Y":"8.23648452758789"},{"X":"52.705723086993245","Y":"8.236141204833984"},{"X":"52.70197852448139","Y":"8.238544464111328"},{"X":"52.699065864840165","Y":"8.238544464111328"},{"X":"52.69261571249357","Y":"8.239574432373047"},{"X":"52.68637272212442","Y":"8.24026107788086"},{"X":"52.68325089220661","Y":"8.241634368896484"},{"X":"52.679712548518395","Y":"8.243694305419922"},{"X":"52.67867180464562","Y":"8.247127532958984"},{"X":"52.67721472156448","Y":"8.25399398803711"},{"X":"52.677839191693494","Y":"8.260173797607422"},{"X":"52.67825550015334","Y":"8.263607025146484"},{"X":"52.6795044017276","Y":"8.26772689819336"},{"X":"52.682002097753795","Y":"8.26944351196289"},{"X":"52.68533213694743","Y":"8.271160125732422"},{"X":"52.687621391607","Y":"8.271160125732422"},{"X":"52.68991052625873","Y":"8.271846771240234"},{"X":"52.69261571249357","Y":"8.271846771240234"},{"X":"52.696777210193375","Y":"8.271503448486328"},{"X":"52.699065864840165","Y":"8.271503448486328"},{"X":"52.70322674768465","Y":"8.271160125732422"},{"X":"52.70697120309942","Y":"8.271846771240234"},{"X":"52.70988333518838","Y":"8.27219009399414"},{"X":"52.712171302628924","Y":"8.271160125732422"},{"X":"52.71633093604627","Y":"8.270816802978516"},{"X":"52.71965835721977","Y":"8.271846771240234"},{"X":"52.72319346410258","Y":"8.27219009399414"},{"X":"52.729431189039616","Y":"8.27493667602539"},{"X":"52.731510232402414","Y":"8.275623321533203"},{"X":"52.73442072655871","Y":"8.27596664428711"},{"X":"52.736707407084445","Y":"8.276653289794922"},{"X":"52.740656845464564","Y":"8.279743194580078"},{"X":"52.74211181150143","Y":"8.282146453857422"},{"X":"52.74273535350512","Y":"8.294849395751953"},{"X":"52.7396175542709","Y":"8.30343246459961"},{"X":"52.737123154292654","Y":"8.305835723876953"},{"X":"52.73421284056283","Y":"8.308582305908203"},{"X":"52.727975799697404","Y":"8.312015533447266"},{"X":"52.72360934019203","Y":"8.31338882446289"},{"X":"52.72132197262256","Y":"8.314075469970703"},{"X":"52.717994678361386","Y":"8.314075469970703"},{"X":"52.71508308766591","Y":"8.313732147216797"},{"X":"52.71341923429921","Y":"8.313732147216797"},{"X":"52.71050733820746","Y":"8.313045501708984"},{"X":"52.70530704035818","Y":"8.311328887939453"},{"X":"52.70093831120796","Y":"8.31167221069336"},{"X":"52.698857810285325","Y":"8.31167221069336"},{"X":"52.69615301082746","Y":"8.313045501708984"},{"X":"52.693448043769116","Y":"8.31338882446289"},{"X":"52.68991052625873","Y":"8.314075469970703"},{"X":"52.688245712958974","Y":"8.313732147216797"},{"X":"52.68345902114394","Y":"8.314762115478516"},{"X":"52.67992069431732","Y":"8.318538665771484"},{"X":"52.67887995540394","Y":"8.322315216064453"},{"X":"52.67804734641934","Y":"8.325748443603516"},{"X":"52.676173918178186","Y":"8.336048126220703"},{"X":"52.67554942424349","Y":"8.34737777709961"},{"X":"52.67534125761478","Y":"8.35836410522461"},{"X":"52.676173918178186","Y":"8.363170623779297"},{"X":"52.67804734641934","Y":"8.365230560302734"},{"X":"52.6824183665388","Y":"8.36557388305664"},{"X":"52.68408340200493","Y":"8.364887237548828"},{"X":"52.68533213694743","Y":"8.361454010009766"},{"X":"52.68637272212442","Y":"8.352184295654297"},{"X":"52.687621391607","Y":"8.345661163330078"},{"X":"52.68887002538479","Y":"8.34085464477539"},{"X":"52.69157527608469","Y":"8.336048126220703"},{"X":"52.69428035917674","Y":"8.333988189697266"},{"X":"52.70322674768465","Y":"8.335704803466797"},{"X":"52.70426690641694","Y":"8.348751068115234"},{"X":"52.70634714950862","Y":"8.37106704711914"},{"X":"52.7113393283508","Y":"8.371410369873047"},{"X":"52.71300326104201","Y":"8.370723724365234"},{"X":"52.7267282844532","Y":"8.367290496826172"},{"X":"52.72859954393537","Y":"8.366947174072266"},{"X":"52.74606076018595","Y":"8.37656021118164"},{"X":"52.741072555002965","Y":"8.39132308959961"},{"X":"52.7396175542709","Y":"8.39303970336914"},{"X":"52.75084058771973","Y":"8.381710052490234"},{"X":"52.74813901049949","Y":"8.366260528564453"}]; 
//point transform
function endProp( mathFunc, array, property ) {
    return Math[ mathFunc ].apply(array, array.map(function ( item ) {
        return item[ property ];
    }));
}
​
var maxY = endProp( "max", pts1, "Y" ), // 8.389
    minY = endProp( "min", pts1, "Y" );
  
var maxX = endProp( "max", pts1, "X" ), // 8.389
    minX = endProp( "min", pts1, "X" );
   
  for(var i=1;i<pts1.length;i++){
    var a = (((pts1[i].X - minX) * (800 - 0)) / (maxX - minX)) + 0- 319.87471995121075;
    var b = (((pts1[i].Y - minY) * (800 - 0)) / (maxY - minY)) + 0- (-398.7915407854985);
    pts.push({"X":a,"Y":b});
    console.log(pts);
​
  }
console.log(pts);
//stop tranfrom
//grid
for (var x = 0.5; x < w; x += 60) {
  ctx.moveTo(x, 0);
  ctx.lineTo(x, w);
}
​
for (var y = 0.5; y < h; y += 60) {
  ctx.moveTo(0, y);
  ctx.lineTo(h, y);
​
}
ctx.lineWidth = 0.3;
​
ctx.strokeStyle = "#000";
ctx.stroke();
var test = [{"X":300,"Y":200}];
var set_time;
var m = 0;
var add_array = function(){
  ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
    if(m < pts.length){
       var q = pts[m].X;
       var e = pts[m].Y;
       console.log(test);
       test.push({"X":q,"Y":e});
       mimicSvg(test,1);
       
       m++;
       set_time = setTimeout(add_array,300);//it call itself again and again until m is more than the length of the array'
    }else{
       clearTimeout(set_time);
    }
};
​
set_time = setTimeout(add_array,300);
//mimicSvg(pts,1);
​
function mimicSvg(pts,n){
​
  // make caps & joins round
  //ctx.lineCap='square';
  ctx.lineJoin='round';
​
​
  // draw the outside line with red shadow
  ctx.shadowColor='green';
  ctx.shadowBlur='1';
  ctx.lineWidth='60';
  
  ctx.scale(n,n);
  //ctx.translate(200,200);
//ctx.rotate(Math.PI / 40);
  //ctx.translate(52.67528921580262,8.373513221740723);
  // draw multiple times to darken shadow
  
  
​
  // stop shadowing
  //ctx.shadowColor='transparent';
​
  // refill the outside line with pink
  ctx.strokeStyle = 'rgba(251, 255, 0, 0.5)' ;
//ctx.strokeRect(235,35,60,60) ;
  drawPolyline(pts);
  // draw the inside line
  ctx.lineWidth=2;
  ctx.strokeStyle='tomato';
  drawPolyline(pts);
  ctx.save();
  //context.clearRect ( 0 , 0 , canvas.width, canvas.height );
  //
}
function getRotation() {
  var lastPt=pts[pts.length-1];
  var nextToLastPt=pts[pts.length-2];
  var dx=lastPt.X-nextToLastPt.X;
  var dy=lastPt.Y-nextToLastPt.Y;
  var angle=Math.atan2(dy,dx);
  return -angle-Math.PI/2;
}
function drawPolyline(pts){
​
  var lastPt=pts[pts.length-1];
  var nextToLastPt=pts[pts.length-2];
  var dx=lastPt.X-nextToLastPt.X;
  var dy=lastPt.Y-nextToLastPt.Y;
  var angle=Math.atan2(dy,dx);
  var rotation=-angle-Math.PI/2;
​
  ctx.beginPath();
  ctx.arc(400,400,5,0,Math.PI*2);
  ctx.closePath();
  ctx.fillStyle='red';
  ctx.fill();
​
  var newPts=[];
  var lp=pts[pts.length-1];
  for(var j=0;j<pts.length;j++){
    newPts.push({"X":pts[j].X-lp.X,"Y":pts[j].Y-lp.Y});
  }
​
  ctx.save();
​
  ctx.translate(400,400);
  ctx.rotate(rotation);
​
  ctx.beginPath();
  ctx.moveTo(newPts[0].X,newPts[0].Y);
  for(var i=1;i<newPts.length;i++){
    ctx.lineTo(newPts[i].X,newPts[i].Y);
  }
  ctx.stroke();
​
  ctx.beginPath();
  ctx.arc(newPts[newPts.length-1].X,newPts[newPts.length-1].Y,2,0,Math.PI*2);
  ctx.closePath();
  ctx.fillStyle='blue';
  ctx.fill();
  ctx.restore();
}
​
function randomPoint(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}
var zoom1 =1;
document.getElementById('add_pts').addEventListener('click', function(e) {
  zoom1 = zoom1+0.01;
  $('#canvas').css({
  '-webkit-transform' : 'scale(' + zoom1 + ')',
  '-moz-transform'    : 'scale(' + zoom1 + ')',
  '-ms-transform'     : 'scale(' + zoom1 + ')',
  '-o-transform'      : 'scale(' + zoom1 + ')',
  'transform'         : 'scale(' + zoom1 + ')'
});
  e.preventDefault();
  return false;
});
var rot =1;
document.getElementById('rotiranje').addEventListener('click', function(e) {
  rot = rot+10;
  $('#canvas').css({
  '-webkit-transform' : 'perspective(500px) rotateX(' + rot + 'deg)',
  '-moz-transform'    : 'perspective(500px) rotateX(' + rot + 'deg)',
  '-ms-transform'     : 'perspective(500px) rotateX(' + rot + 'deg)',
  '-o-transform'      : 'perspective(500px) rotateX(' + rot + 'deg)',
  'transform'         : 'perspective(500px) rotateX(' + rot + 'deg)'
});
  e.preventDefault();
  return false;
});
​
var roty =1;
document.getElementById('roty').addEventListener('click', function(e) {
  roty = roty+10;
  $('#canvas').css({
  '-webkit-transform' : 'perspective(500px) rotateZ(' + roty + 'deg)',
  '-moz-transform'    : 'perspective(500px) rotateZ(' + roty + 'deg)',
  '-ms-transform'     : 'perspective(500px) rotateZ(' + roty + 'deg)',
  '-o-transform'      : 'perspective(500px) rotateZ(' + roty + 'deg)',
  'transform'         : 'perspective(500px) rotateZ(' + roty + 'deg)'
});
  e.preventDefault();
  return false;
});
​
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
APdevelopmentspro
0viewers