<!doctype html>
<html>
<head>
<style>
html,
body {
height: 100%;
}
canvas,svg {
width:800px;
height:800px;
}
</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 path1= new Path.Circle({center:view.center,radius:150,strokeColor:"red",fillColor:"blue"});
path1.opacity=.2;
var path2= new Path.Circle({center:view.center+[100,0],radius:150,strokeColor:"green",fillColor:"skyblue"});
path2.opacity=.2;
var g= new Group();
var circle=null;
function onMouseDrag(event){
console.log(event.item);
event.item.position +=event.delta;
var intersections=event.item.getIntersections(event.item.previousSibling||event.item.nextSibling);
console.log(intersections);
g.removeChildren();
var aux1=null;
var aux12=null;
for (var i=0;i<intersections.length;i++){
circle= new Path.Circle({center:intersections[i].point, radius:5,strokeColor:"red"});
var line= new Path.Line({from:path1.position,to:path2.position});
line.strokeColor="black";
aux1= new Path();
aux1.strokeColor="green";
aux1.add(intersections[i].point);
aux1.add(path1.position);
aux2= new Path();
aux2.strokeColor="green";
aux2.add(intersections[i].point);
aux2.add(path2.position);
g.addChild(circle);
g.addChild(line);
g.addChild(aux1);
g.addChild(aux2);
}
}
function onResize(event){
path1.position=view.center;
}
var R=4,r=1,rad=0;
R=Math.floor(2+Math.random()*8);
function onFrame(event){
var cnt=event.count;
if(cnt==600){view.onFrame=null;}
rad +=.1;
var x=400+((R-r)*Math.cos(rad)+r*Math.cos((R-r)/r*rad))*100;
var y=400-(((R-r)*Math.sin(rad)-r*Math.sin((R-r)/r*rad))*100);
var path= new Path.Circle({center:[x,y],radius:3,strokeColor:"black"});
var svg1=document.querySelector("#svg1");
svg1.appendChild(project.activeLayer.exportSVG());
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js epicycloid : circles (0) | 2024.03.21 |
|---|---|
| svg paper.js epicycloid: nephroid (0) | 2024.03.19 |
| svg paper.js circles : event drag (0) | 2024.03.16 |
| svg paper.js sine function: generalized (1) | 2024.03.15 |
| svg paper.js sine function: period (0) | 2024.03.14 |
