<!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 path= new Path.Circle({center:view.center,radius:50,strokeColor:"gray"});
//
var point=path.curves[2].segment1.point;
var handleIn=path.curves[2].segment1.handleIn;
var handleOut=path.curves[2].segment1.handleOut;
var path_line=new Path();
path_line.add(point+handleIn*2,point+handleOut*2);
path_line.strokeColor="green";
var path2= new Path.Circle({center:view.center+[50,0],radius:5,strokeColor:"gray"});
var path_radius= new Path();
path_radius.add(view.center);
path_radius.add(view.center+[50,0]);
path_radius.strokeColor="blue";
console.log(path_radius);
//
//
var point=path.curves[1].segment1.point;
var handleIn=path.curves[1].segment1.handleIn;
var handleOut=path.curves[1].segment1.handleOut;
var path_line=new Path();
path_line.add(point+handleIn*2,point+handleOut*2);
path_line.strokeColor="red";
var path3= new Path.Circle({center:view.center+[50,0],radius:5,strokeColor:"gray"});
var path_radius3= new Path();
path_radius3.add(view.center);
path_radius3.add(view.center-[50,0]);
path_radius3.strokeColor="green";
console.log(path_radius3);
//
//
var point=path.curves[0].segment1.point;
var handleIn=path.curves[0].segment1.handleIn;
var handleOut=path.curves[0].segment1.handleOut;
var path_line=new Path();
path_line.add(point+handleIn*2,point+handleOut*2);
path_line.strokeColor="red";
var path4= new Path.Circle({center:view.center+[50,0],radius:5,strokeColor:"gray"});
var path_radius4= new Path();
path_radius4.add(view.center);
path_radius4.add(view.center-[0,50]);
path_radius4.strokeColor="yellow";
console.log(path_radius4);
//
var point=path.curves[3].segment1.point;
var handleIn=path.curves[3].segment1.handleIn;
var handleOut=path.curves[3].segment1.handleOut;
var path_line=new Path();
path_line.add(point+handleIn*2,point+handleOut*2);
path_line.strokeColor="red";
var path5= new Path.Circle({center:view.center+[50,0],radius:5,strokeColor:"gray"});
var path_radius5= new Path();
path_radius5.add(view.center);
path_radius5.add(view.center+[0,50]);
path_radius5.strokeColor="red";
console.log(path_radius5);
// event handler
function onMouseDown(event){
var time=event.count%30/30;
path2.position=path.curves[1].getPointAt(1-path.curves[1].length*time);
path_radius.segments[1].point=path2.position;
console.log(path_radius.tangent);
console.log(path2.position);
var path_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"gray"});
path_sine.fillColor="blue";
var normal=path.curves[1].getNormalAt(1-path.curves[1].length*time);
console.log("normal",normal);
var radian=-normal.angleInRadians;
path_sine.position.x =500+radian*50;
path_sine.position.y =path2.position.y;
//
path3.position=path.curves[0].getPointAt(1-path.curves[0].length*time);
path_radius3.segments[1].point=path3.position;
console.log(path_radius3.tangent);
console.log(path3.position);
var path_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"gray"});
path_sine.fillColor="green";
var normal=path.curves[0].getNormalAt(1-path.curves[1].length*time);
console.log("normal",normal);
var radian=-normal.angleInRadians;
path_sine.position.x =500+radian*50;
path_sine.position.y =path3.position.y;
//
path4.position=path.curves[3].getPointAt(1-path.curves[0].length*time);
path_radius4.segments[1].point=path4.position;
console.log(path_radius4.tangent);
console.log(path4.position);
var path_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"gray"});
path_sine.fillColor="yellow";
var normal=path.curves[3].getNormalAt(1-path.curves[1].length*time);
console.log("normal",normal);
var radian=-normal.angleInRadians;
path_sine.position.x =815+radian*50;
path_sine.position.y =path4.position.y;
//
path5.position=path.curves[2].getPointAt(1-path.curves[0].length*time);
path_radius5.segments[1].point=path5.position;
console.log(path_radius5.tangent);
console.log(path5.position);
var path_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"gray"});
path_sine.fillColor="red";
var normal=path.curves[2].getNormalAt(1-path.curves[1].length*time);
console.log("normal",normal);
var radian=-normal.angleInRadians;
path_sine.position.x =815+radian*50;
path_sine.position.y =path5.position.y;
var svg1=document.getElementById('svg1');
svg1.appendChild(project.exportSVG());
console.log(path_sine);
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js trigonometry : (0) | 2024.03.13 |
|---|---|
| svg paper.js sine,cosine function: mouse Event (0) | 2024.03.12 |
| svg paper.js getPart : divide and conquer (0) | 2024.03.08 |
| svg paper.js getOffsetsWithTangent(): (0) | 2024.03.06 |
| svg paper.js path1.divide(path2): (0) | 2024.03.03 |
