<!doctype html>
<html>
<head>
<style>
canvas {
width: 800px;
height: 800px;
border: 1px solid red;
}
</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 g= new Group();
var path= new Path.Circle({center:view.center,radius:50,strokeColor:"black"});
var pathData="M";
var x=0,y=0;
var dx=0,dy=0;
var t=0;
var arr=[];
for (var t=0;t<6.28;t +=.1){
var x=4*Math.pow(Math.cos(t),3)*50;
var y=4*Math.pow(Math.sin(t),3)*50;
arr.push([x,y]);
}
for (var i=0;i<arr.length;i++){
for (var j=0;j<arr[j].length;j++){
pathData +=arr[i][j]+" ";
}
}
console.log(pathData);
var path2= new Path(pathData);
path2.strokeColor="red";
path2.position=view.center;
path2.smooth();
console.log(path2.pathData);
path2.scale(1,-1,view.center.x,view.center.y);//
var point1=path2.getPointAt(path2.length*.125);
var point2=path2.getPointAt(path2.length*.135);
dx=point2.x-point1.x;
dy=point2.y-point1.y;
var circle1= new Path.Circle({center:point1,radius:3,strokeColor:"black"})
var rect1= new Path.Rectangle({point:point1,size:[-point1.x+view.center.x,dy]});
rect1.strokeColor="black";
rect1.fillColor="gray";
var rect2= new Path.Rectangle({point:point1,size:[dx,-point1.y+view.center.y]});
rect2.strokeColor="green";
rect2.fillColor="green";
g.addChild(path2);
var text1= new PointText(view.center-[300,200]);
text1.content="half integrate x dy - y dx from 0 to 2*pi ";
text1.fontSize=34;
function onMouseDown(event){
var time=event.count%60/60;
console.log(t);
var point1=path2.getPointAt(path2.length*time);
var point2=path2.getPointAt(path2.length*time);
dx=point2.x-point1.x;
dy=point2.y-point1.y;
var circle1= new Path.Circle({center:point1,radius:3,strokeColor:"black"})
var rect1= new Path.Rectangle({point:point1,size:[-point1.x+view.center.x,dy]});
rect1.strokeColor="black";
rect1.fillColor="gray";
var rect2= new Path.Rectangle({point:point1,size:[dx,-point1.y+view.center.y]});
rect2.strokeColor="green";
rect2.fillColor="green";
g.addChild(path2);
}
</script>
</head>
<body>
<h1>What do you think of the figure below?</h1>
<p>just Click continuously!</p>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
What do you think of the figure below?
just Click continuously!
반응형
'svg' 카테고리의 다른 글
| paper.js eigenvalue,eigenvector: (1) | 2024.04.28 |
|---|---|
| svg paper.js quadrant : (0) | 2024.04.21 |
| svg paper.js cycloid: (0) | 2024.03.22 |
| svg paper.js epicycloid & hypocycloid : astroid and quatrefoiloid (0) | 2024.03.22 |
| svg paper.js epicycloid : circles (0) | 2024.03.21 |
