はじめに

初学者のメモです。
現在の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();
  }
}