The Beauty of Time Tables: Visualizing Patterns on a Circle

How simple multiplication reveals stunning geometric designs

In mathematics, timetables are a fundamental concept that we learn early on. But when you apply these simple multiplications to points on a circle, something magical happens. This software we developed creates a visual representation of timetables by connecting points around a circle in a way that reveals beautiful, intricate patterns. As the multiplication factor increases, these lines twist and turn, forming mesmerizing geometric designs that highlight the inherent beauty of mathematics.

Why It’s Relevant

Understanding and visualizing mathematical patterns this way goes beyond just numbers on a page. It’s about seeing how simple operations can generate complex, elegant structures. This reminds those in the business world that even the most essential process elements can lead to unexpected and valuable outcomes when viewed differently.

Use Cases for Business

In business, the principles behind these timetable visualizations can be applied to data visualization and pattern recognition. By representing data in novel ways, companies can uncover insights that might be missed with traditional analysis methods. For instance, supply chain management could benefit from visual tools that map out and optimize routes or processes, highlighting inefficiencies that are not immediately apparent. Similarly, market trend analysis could use pattern visualization to track and predict customer behaviour, leading to more informed strategic decisions.

Through generative designs like these, businesses can transform primary data into actionable insights, unexpectedly driving innovation and efficiency.

Try It for Yourself

Are you curious about how it works? Here’s the code behind it. If you like it, you can find dozens of other visualisations here.

let factor = 0;

function setup() {
  createCanvas(800, 800);
  angleMode(DEGREES); // Change the angle mode to DEGREES
  colorMode(HSB);
}

function draw() {
  background(0);
  translate(width / 2, height / 2);
  stroke(255);
  
  let totalPoints = 200;
  let radius = width / 2 - 50;
  
  // Draw the points on the circle
  for (let i = 0; i < totalPoints; i++) {
    let angle = map(i, 0, totalPoints, 0, 360);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    point(x, y);
  }
  
  // Draw the lines between the points
  for (let i = 0; i < totalPoints; i++) {
    let startAngle = map(i, 0, totalPoints, 0, 360);
    let endAngle = map((i * factor) % totalPoints, 0, totalPoints, 0, 360);
    
    let startX = radius * cos(startAngle);
    let startY = radius * sin(startAngle);
    
    let endX = radius * cos(endAngle);
    let endY = radius * sin(endAngle);
    
    stroke(i, 255, 255);
    line(startX, startY, endX, endY);
  }
  
  factor += 0.005;
}