p5-Mandelbrot-button

元ネタ

↓実行ボタン

p5-Mandelbrot-button.icon

描画には少し時間がかかる

パソコンでしか動かないかも

↓アイコン用画像

https://gyazo.com/374de20e6cae168b155e87cf7a6d0737

code:button.js

(function () {

let P5js = document.getElementById('__P5js__')

if (P5js){

console.log("nop")

} else {

P5js = document.createElement("script");

P5js.setAttribute('id', '__P5js__')

P5js.type = 'text/javascript';

document.head.appendChild(P5js);

console.log("load p5js")

}

let script = document.getElementById('__P5sc__')

if (script){

console.log("nop")

} else {

script = document.createElement("script");

script.setAttribute('id', '__P5sc__')

script.type = 'text/javascript';

document.head.appendChild(script);

console.log(script.src)

console.log("load script")

}

})()

code:Mandelbrot.js

const sketch = p => {

const N = 255;

const L = 255;

const SCALE = 3.8;

const width = 600;

const height = 600;

p.setup = () => {

p.createCanvas(600, 600);

p.noLoop();

}

p.draw = () => {

p.translate(width / 2, height / 2);

p.background(0);

for (let a = -width / 2; a <= width / 2; a++) {

for (let b = -height / 2; b <= height / 2; b++) {

let x = SCALE * a / width;

let y = SCALE * b / height;

let r = calc(x, y);

p.stroke(r * 12 % 256, r * 4 % 256, r * 16 % 256);

p.rect(a, b, 1, 1);

}

}

}

calc = (x, y) => {

let tx, ty;

let zx = 0.0;

let zy = 0.0;

for (let i = 1; i <= N; i++) {

tx = zx;

ty = zy;

zx = tx * tx - ty * ty + x;

zy = 2 * tx * ty + y;

if (zx * zx + zy * zy > L)

return i;

}

return 0;

}

}

new p5(sketch, 'editor');

https://gyazo.com/8a86b8d1e60057ab812d621c09e80fb9