Smooth Blob

by Ben Gillbanks

HTML

<canvas id="blobCanvas" width="400" height="400"></canvas>

JavaScript

const canvas = document.getElementById('blobCanvas');
const ctx = canvas.getContext('2d');

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const baseRadius = 120; // Base radius of the circle
const numPoints = 10; // Number of control points

let points1 = generatePoints(baseRadius);

function generatePoints(baseRadius) {
  const radiusOffset = baseRadius * 0.1;
  console.log(baseRadius, radiusOffset);
  const points = [];
  for (let i = 0; i < numPoints; i++) {
    let angle = (Math.PI * 2 / numPoints) * i;
    let radius = baseRadius + Math.random() * radiusOffset * 2 - radiusOffset; // Random offset from base radius
    let x = centerX + Math.cos(angle) * radius;
    let y = centerY + Math.sin(angle) * radius;
    points.push({ x, y });
  }
  // Duplicate the first point at the end to close the shape
  points.push({ x: points[0].x, y: points[0].y });
  return points;
}


function drawBlob(points) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw the blob
  ctx.beginPath();
  ctx.moveTo(points[numPoints - 1].x, points[numPoints - 1].y);
  for (let i = 0; i < points.length - 1; i++) {
    let xc = (points[i].x + points[i + 1].x) / 2;
    let yc = (points[i].y + points[i + 1].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
  }
  
   ctx.fillStyle = 'blue';
  ctx.fill();
}

drawBlob(points1);