はじめに
初学者のメモです。
現在のsvgの最新バージョンは1.5.1。
p5.jsの最新バージョンは1.9.4だが、動かない。1.6.0まで下げる必要がある。
円の中に２つの円が、入れ子になるフラクタル図形
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<script src="https://unpkg.com/p5.js-svg@1.5.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="c_in_c.js"></script>
</body>
</html>
sketch.js
function setup() {
createCanvas(800, 800, SVG);
noStroke();
func(400, 400, 800, 9);
save("c_in_c.svg");
}
function func(x, y, r, n) {
if (0<n) {
fill(n%2*255);
circle(x, y, r);
func(x-r/4, y, r/2, n-1);
func(x+r/4, y, r/2, n-1);
}
}
style.css
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
コッホ曲線
koch.js
function setup() {
createCanvas(900, 900, SVG);
stroke(0);
noFill();
translate(0,400);
func(5);
save("koch.svg");
}
function gene(){
line(0,0,300,0);
line(300,0,450,-260);
line(450,-260,600,0);
line(600,0,900,0);
}
function func(n) {
if (0<n) {
push();
translate(0,0);
scale(1/3);
func(n-1);
pop();
push();
translate(300,0);
rotate(-PI/3);
scale(1/3);
func(n-1);
pop();
push();
translate(450,-260);
rotate(PI/3);
scale(1/3);
func(n-1);
pop();
push();
translate(600,0);
scale(1/3);
func(n-1);
pop();
}else{
gene();
}
}