<!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 pointText= new PointText(view.center-[100,100]);
pointText.content="sin2θ=2sinθcosθ";
pointText.fontFamily="Arial";
pointText.fontSize="14";
pointText.fontWeight="bold";
var pointText= new PointText(view.center-[-100,100]);
pointText.content="cos2θ=cos²θ-sin²θ=2cos²θ-1=1-2sin²θ";
pointText.fontFamily="Arial";
pointText.fontSize="14";
pointText.fontWeight="bold";
var pointText= new PointText(view.center+[10,0]);
pointText.content="2θ";
pointText.fontFamily="Arial";
pointText.fontSize="14";
pointText.fontWeight="bold";
var pointText= new PointText(view.center-[30,0]);
pointText.content="θ";
pointText.fontFamily="Arial";
pointText.fontSize="14";
pointText.fontWeight="bold";
var time=.05;
var xAxis= new Path.Line({from:view.center-[400,0],to:view.center+[400,0],strokeColor:"black"});
var path= new Path.Circle({center:view.center,radius:50,strokeColor:"red"});
path.reorient(true,false);
path.rotate(-90);
var path_tri1= new Path();
path_tri1.strokeColor="blue";
path_tri1.strokeWidth=1;
path_tri1.add(view.center);
var point=path.getPointAt(time*path.length);
path_tri1.add(point);
console.log(point);
path_tri1.add([point.x,view.center.y]);
path_tri1.closed=true;
path_tri1.fullySelected=true;
console.log(path_tri1);
var path_tri2= new Path();
path_tri2.strokeColor="green";
path_tri2.strokeWidth=1;
path_tri2.add(view.center);
path_tri2.add(point);
path_tri2.add(view.center-[50,0]);
//
var perpendicular;
function onMouseDown(event){
console.log("event.count",event.count);
var time=event.count%6/30;
var point=path.getPointAt(time*path.length);
path_tri1.segments[1].point=point;
path_tri1.segments[2].point.x=point.x;
path_tri2.segments[1].point=point;
var midpoint=(view.center-[50,0])/2+point/2;
if(perpendicular){
perpendicular.removeSegments();
}
perpendicular= new Path.Line({from:midpoint,to:view.center});
perpendicular.strokeColor="red";
console.log("perpendicular:",perpendicular);
var svg1=document.getElementById('svg1');
svg1.innerHTML ="";
svg1.appendChild(project.exportSVG());
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js sine function: generalized (1) | 2024.03.15 |
|---|---|
| svg paper.js sine function: period (0) | 2024.03.14 |
| svg paper.js sine,cosine function: mouse Event (0) | 2024.03.12 |
| svg paper.js sine curve : event onMouseDown (0) | 2024.03.09 |
| svg paper.js getPart : divide and conquer (0) | 2024.03.08 |
