<!doctype html>
<>
<html>
<head>
<style>
canvas,svg {
width:1500px;height:900px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var xAxis= new Path.Line({from:view.center-[100,0],to:view.center+[500,0],strokeColor:"black"});
//big circle
var path1= new Path.Circle({center:view.center,radius:50,strokeColor:"black"});
path1.fullySelected=true;
path1.reorient(true,false);//start point changes;
path1.rotate(-90);
//small circles
var path2= new Path.Circle({center:view.center,radius:5,strokeColor:"red"});
path2.position = path1.getPointAt(.05*path1.length);
var radius2= new Path.Line({from:view.center,to:path2.position});
radius2.strokeColor="red";
var path3= new Path.Circle({center:view.center,radius:5,strokeColor:"green"});
path3.position = path1.getPointAt(.10*path1.length);
var radius3= new Path.Line({from:view.center,to:path3.position});
radius3.strokeColor="green";
var path4= new Path.Circle({center:view.center,radius:5,strokeColor:"blue"});
path4.position = path1.getPointAt(.15*path1.length);
var radius4= new Path.Line({from:view.center,to:path4.position});
radius4.strokeColor="blue";
console.log("view.element",view.element);
function onMouseDown(event){
var time=event.count%60/60;
var n=Math.floor(event.count/60);
path2.position=path1.getPointAt(1*time*path1.length);
path3.position=path1.getPointAt(2*time*path1.length);
path4.position=path1.getPointAt(4*time*path1.length);
var normal2=path1.getNormalAt(1*time*path1.length);
var normal3=path1.getNormalAt(2*time*path1.length);
var normal4=path1.getNormalAt(4*time*path1.length);
var path2_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"red"});
path2_sine.position.x=750-(-n*Math.PI*2+normal2.angleInRadians)*50;
path2_sine.position.y=path2.position.y;
var path_vertical= new Path.Line({from:[path2_sine.position.x,800],to:path2_sine.position-[0,100],strokeColor:"black"});//
var path3_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"green"});
path3_sine.position.x=750-normal2.angleInRadians*50;
path3_sine.position.y=path3.position.y;
var path4_sine= new Path.Circle({center:view.center+[100,0],radius:3,strokeColor:"blue"});
path4_sine.position.x=750-normal2.angleInRadians*50;
path4_sine.position.y=path4.position.y;
radius2.segments[1].point=path2.position;
if(event.count<=30){
radius3.segments[1].point=path3.position;}else{
path3_sine.remove();
}
console.log("path4.position",path4.position);
if(event.count<=15){
radius4.segments[1].point=path4.position;
}else { path4_sine.remove();}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js hypocycloid: astroid ... (0) | 2024.03.19 |
|---|---|
| svg paper.js circles : event drag (0) | 2024.03.16 |
| svg paper.js sine function: period (0) | 2024.03.14 |
| svg paper.js trigonometry : (0) | 2024.03.13 |
| svg paper.js sine,cosine function: mouse Event (0) | 2024.03.12 |
