p5.js でマンデルブロ集合

こんにちは｜こんばんは。カエルのアイコンで活動しております @kyamaz です。

はじめに

Qiitaで検索したところ、マンデルブロ集合をp5.jsで表示する例が少なさそうでしたので、今さらですが、プログラムをここに掲載してみます。

mandelbrot.js

function setup() {
  createCanvas(640, 360);
  
  noStroke();
  colorMode(HSB);

  mandelbrot();
}

let cX = 0;
let cY = 0;
let scale = 1;
let loopmax = 50;
function draw() {
  let redraw = false;
  if(keyIsDown(LEFT_ARROW)){
    cX -= 0.5 * 1/scale;
    redraw = true;
  }
  if(keyIsDown(RIGHT_ARROW)){
    cX += 0.5 * 1/scale;
    redraw = true;
  }
  if(keyIsDown(UP_ARROW)){
    cY -= 0.5 * 1/scale;
    redraw = true;
  }
  if(keyIsDown(DOWN_ARROW)){
    cY += 0.5 * 1/scale;
    redraw = true;
  }
  if(keyIsDown(107) || keyIsDown(187)){
    scale += scale*0.5;
    redraw = true;
  }
  if(keyIsDown(109) || keyIsDown(189)){
    scale -= scale*0.5;
    redraw = true;
  }
  if(redraw){
    mandelbrot();
  }
}

function mandelbrot() {
  for(let x = 0; x < width; x++) {
    for(let y = 0; y < height; y++) {
      let result = calcPoint(pixelToPoint(x, y));
      if(result.isIn) {
        set(x, y, color(0));
      } else if(result.i > 1) {
        set(x, y, color(
          150 + 200 * (1 - pow(result.i/loopmax, 0.5)) % 255, 80, 100
        ));
      } else {
        set(x, y , color(50));
      }
    }
  }
  updatePixels();
}

function pixelToPoint(x, y) {
  let p = createVector(
    (x - width/2) * (4/width) * (16/(9*scale)) + cX,
    (y - height/2) * (4/height) * (1/scale) + cY
  );
  return p;
}

function calcPoint(c) {
  let z0 = createVector(0, 0);
  let i = 0;
  let bounds = 2;
  let isIn = true;

  while(i < loopmax && isIn) {
    z0 = createVector(
      z0.x * z0.x - z0.y * z0.y + c.x,
      2 * z0.x * z0.y + c.y
    );
    i++;
    if(z0.mag() > bounds) {
      isIn = false;
    }   
  }
  return {
    'i': i,
    'isIn': isIn,
  };
}

下図ように無事表示されます。カーソルで左右上下の移動、[+]マークでズームイン、[-]マークでズームアウトできます。

おわりに

今どきは、ChatGPTに聴けばプログラムを書いてくれますが、このあとのエントリで複素関数を取り扱っていく予定ですので、事始めではありますが、ありきたり の記事としました。ご了承ください。

本稿の環境

本稿のために使用した環境は以下となります。
macOS: Sonoma 14.5 (chip: Apple M1)
nodenv: 1.4.1
node: v18.19.0
p5.js v1.10.0

ご一読いただきまして有り難うございます。
（●）（●） Happy Hacking!
/""　＿＿""＼