<!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 |
