fractal #0

by Bartosz Zieliński

HTML

<canvas id="c" width="1800" height="1800"></canvas>

JavaScript

const limit = 2;
const angle = -Math.PI/2;
const SEAHORSE = 1.5;
const WOOD = 2;
function sierp(x1,y1,x2,y2,coeff) {
	const dx = x2-x1;
  const dy = y2-y1;
	let r = Math.sqrt(dx*dx + dy*dy)/2;
  
  if (r < limit) {
  	ctx.moveTo(x1, y1);
    ctx.lineTo(x2,y2);
  } else {
  	const halfx = dx/2;
    const halfy = dy/coeff;
    // vec towards x1,y1 from mid = -halfx, -halfy
    // vec perp = halfy, -halfx
    const ptx = (x1 + halfx) - Math.cos(angle)*halfx + Math.sin(angle)*halfy;
    const pty = (y1 + halfy) - Math.sin(angle)*halfx + Math.cos(angle)*halfy;
    sierp(x1,y1,ptx,pty, coeff);
    sierp(ptx,pty,x2,y2, coeff);
  }
}

var c = document.getElementById("c");
var ctx = c.getContext("2d");

ctx.strokeStyle = "#000";
sierp(300,150,800,150, WOOD);
ctx.stroke();