top of page
  • Writer's picturePierre Paslier

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.


4,641 views1 comment

Recent Posts

See All

1 Comment


Tom Taylor
Tom Taylor
Mar 26

The area in which gowombat site truly shines is in its ability to comprehend the complexities of corporate operations and to translate those complexities into efficient software solutions. They ensure that their software not only satisfies but also beyond the expectations of their customers by committing to individualized development and keeping a close eye on the requirements of their customers.

Like
bottom of page