Kinetic Generative Art Tutorial

Tutorial Intro

Welcome to this tutorial where we're going to explore the mesmerizing world of generative art, inspired by the kinetic sculptures of artists like Reuben Margolin. We'll use p5.js, a powerful JavaScript library that makes coding visual and interactive elements on the web accessible to everyone.

Our goal is to create a digital artwork with a series of rotating pendulums, each varying in speed and size, to simulate the motion seen in kinetic sculptures. The final result is a beautiful, ever-changing pattern that reflects the dynamic essence of kinetic art.

This tutorial is beginner-friendly, so don't worry if you're new to p5.js or programming in general. We'll walk through each line of code step by step, explaining the concepts as we go along.

By the end of this tutorial, not only will you have created a piece of generative art, but you will also have gained a deeper understanding of loops, arrays, and object-oriented programming in p5.js. You'll be equipped with the knowledge to create your own unique generative artworks. So, let's dive in and start coding!

Generative Art Code

let pendulums = [];
let pendulumCount = 40;

function setup() {
  createCanvas(windowWidth, windowHeight);
  for(let i = 0; i < pendulumCount; i++){
    pendulums[i] = new Pendulum(i);
  }
}

function draw() {
	blendMode(NORMAL);
  background(255 );
  translate(width / 2, height / 2);
  for(let i = 0; i < pendulumCount; i++){
    pendulums[i].display();
    pendulums[i].update();
  }
}

class Pendulum {
  constructor(n){
    this.angle = 0;
    this.angleSpeed = 0.01 + n * 0.004; 
    this.radius = 30 + n * 6; 
  }
  
  update() {
    this.angle += this.angleSpeed;
  }
  
  display(){
    let x = this.radius * cos(this.angle);
    let y = this.radius * sin(this.angle);
    stroke(0,100);
    line(0, 0, x, y);
    fill(0);
    ellipse(x, y, 5, 5);
  }
}

That's it! Hope you've enjoyed learning about this particular piece and make sure to check out the other free tutorials on generativehut.com.