<!DOCTYPE html> <html> <head> <style> svg,canvas {width:900px;height:900px;} </style> <!-- Load the Paper.js library --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script> <!-- Define inlined PaperScript associate it with myCanvas --> <script type="text/paperscript" canvas="myCanvas"> // Create a Paper.js Path to draw a line into it: var path = new Path(); // Give the stroke a color path.strokeColor = 'gray'; var start = new Point(100, 100); // Move to start and draw a line from there path.moveTo(start); // Note the plus operator on Point objects. // PaperScript does that for us, and much more! path.lineTo(start + [ 100, -50 ]); var g= new Group(); var path= new Path.Circle({center:view.center,radius:50,strokeColor:"gray"}); var path2= new Path.Circle({center:view.center,radius:5,strokeColor:"red"}); var time=.0; path2.position=path.getPointAt(time*path.length); path.reorient(true,false);//counter-clockwise; var path_radius= new Path(); path_radius.add(view.center); path_radius.add(view.center+[50,0]); path_radius.strokeColor="blue"; g.addChild(path); g.addChild(path2); g.rotate(-90); var xAxis= new Path.Line({from:view.center-[400,0],to:view.center+[400,0],strokeColor:"black"}); // function onMouseDown(event){ console.log("event.count",event.count); var time=event.count%30/30; var point=path.getPointAt(time*path.length); var normal=path.getNormalAt(time*path.length); path2.position=point; var path_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"gray"}); path_sine.fillColor="blue"; path_sine.position.x=700-(event.count==0?-normal.angleInRadians:normal.angleInRadians)*50; path_sine.position.y=path2.position.y; // var path_cos= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"gray"}); path_cos.fillColor="gold"; path_cos.position.x=700-(event.count==0?-normal.angleInRadians:normal.angleInRadians)*50; path_cos.position.y=900-path2.position.x; console.log("path2.position.x",path2.position.x); // path_radius.segments[1].point=path2.position; var svg1=document.getElementById('svg1'); svg1.appendChild(project.exportSVG()); } </script> </head> <body> <canvas id="myCanvas" resize></canvas> <svg id="svg1"></svg> </body> </html>
반응형
'svg' 카테고리의 다른 글
svg paper.js sine function: period (0) | 2024.03.14 |
---|---|
svg paper.js trigonometry : (0) | 2024.03.13 |
svg paper.js sine curve : event onMouseDown (0) | 2024.03.09 |
svg paper.js getPart : divide and conquer (0) | 2024.03.08 |
svg paper.js getOffsetsWithTangent(): (0) | 2024.03.06 |