Welcome to "Building Creative Machines"!

Starting with The Magic of Pi

Welcome to the first post of “Building Creative Machines”, where we explore the wonders of technology and creativity. Whether you're a curious mind, a professional looking to innovate, or someone who just loves to see how things work, this space is for you. We’ll dive into fascinating projects that blend art, science, and tech—showing you that building with AI and other tools can be both fun and enlightening.

The Magic of Pi

Pi (π) is one of those numbers that has fascinated humans for centuries. It's a mystical and fantastic number, representing the ratio of a circle's circumference to its diameter. But did you know that you can visualize Pi straightforwardly and intuitively? Today, we want to show you how to use some code.

Visualizing Pi with Green and Red Dots

To make Pi more tangible, we wrote a simple piece of code (Javascript) that generates random dots inside a square containing a circle. The idea is straightforward: by counting how many dots fall inside the circle versus the total number of dots, we can approximate the value of Pi. It's a fun and visual way to see this mathematical wonder come to life.

Here’s how it works:

• Step 1: Imagine a square that perfectly encloses a circle.

• Step 2: Now, start throwing random dots into that square.

• Step 3: Count how many dots land inside the circle (the red ones).

• Step 4: Using a simple ratio, you can approximate the value of Pi.

As more dots are added, the approximation of Pi gets more accurate. It’s a simple yet powerful way to see this magical number in action.

Watch the Process in Action

Here’s a link from OpenProcessing¹ demonstrating how it works over time.

Try It Yourself!

You can find the full code below if you want to see it or try it out for yourself. Feel free to experiment, change it, and see how close you can get to Pi!

Here’s the code:

let points = [];
let circleRadius;
let totalPoints = 0;
let circlePoints = 0;

function setup() {
  createCanvas(400, 400);
  circleRadius = width / 2;
  background(0);
  stroke(255);
  noFill();
  ellipse(width / 2, height / 2, circleRadius * 2, circleRadius * 2);
  rectMode(CENTER);
  rect(width / 2, height / 2, circleRadius * 2, circleRadius * 2);
}

function draw() {
  let pointVector = createVector(random(width), random(height));
  points.push(pointVector);
  totalPoints++;

  stroke(0, 255, 0);
  if (dist(pointVector.x, pointVector.y, width / 2, height / 2) < circleRadius) {
    circlePoints++;
    stroke(255, 0, 0);
  }

  point(pointVector.x, pointVector.y);  // Corrected here

  let piApprox = 4 * (circlePoints / totalPoints);
  noStroke();
  fill(0);
  rect(50, 15, 100, 20);
  fill(255);
  text(Pi: ${piApprox.toFixed(6)}, 10, 20);
}

1. You can find dozens of other exciting creations at https://openprocessing.org/user/392648?o=6&view=sketches