<!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 R=4,r=1,rad=0;
//R=Math.floor(2+Math.random()*8);
var largeCircle= new Path.Circle({center:[400,400],radius:R*50,strokeColor:"blue"});
var smallCircle= new Path.Circle({center:[400+(R+r)*50,400],radius:r*50,strokeColor:"red"});
var smallCircle2= new Path.Circle({center:[400+(R-r)*50,400],radius:r*50,strokeColor:"red"});
function onFrame(event){
var cnt=event.count;
if(cnt==628){view.onFrame=null;}
rad +=.01;
var x=400+((R+r)*Math.cos(rad)-r*Math.cos((R+r)/r*rad))*50;
var y=400-(((R+r)*Math.sin(rad)-r*Math.sin((R+r)/r*rad))*50);
var x2=400+((R-r)*Math.cos(rad)+r*Math.cos((R-r)/r*rad))*50;
var y2=400-(((R-r)*Math.sin(rad)-r*Math.sin((R-r)/r*rad))*50);
var path= new Path.Circle({center:[x,y],radius:3,strokeColor:"red"});
path.fillColor="red";
var path2= new Path.Circle({center:[x2,y2],radius:3,strokeColor:"blue"});
path2.fillColor="red";
smallCircle.position =[400+(R+r)*Math.cos(rad)*50,400-(R+r)*Math.sin(rad)*50];
smallCircle2.position =[400+(R-r)*Math.cos(rad)*50,400-(R-r)*Math.sin(rad)*50];
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js astroid : area from Green's Theorem (1) | 2024.03.30 |
|---|---|
| svg paper.js cycloid: (0) | 2024.03.22 |
| svg paper.js epicycloid : circles (0) | 2024.03.21 |
| svg paper.js epicycloid: nephroid (0) | 2024.03.19 |
| svg paper.js hypocycloid: astroid ... (0) | 2024.03.19 |
