top of page

Kinetic Generative Art Tutorial

  • Writer: Pierre Paslier
    Pierre Paslier
  • Jun 3, 2023
  • 2 min read

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.


214 Comments


Evans Fisher
Evans Fisher
9 hours ago

Turkish Airlines, the flag carrier of Turkey and one of the most prominent airlines globally, has established a notable presence in many major cities across the United States. Among these, Houston stands out as a key strategic hub. The Turkish Airlines Houston Office plays a pivotal role in supporting passengers from the southern United States, offering a seamless experience from inquiry to takeoff.


Like

Evans Fisher
Evans Fisher
17 hours ago

Travelers in Sweden looking for exceptional service, seamless flight management, and professional assistance need look no further than the Turkish Airlines Stockholm Office. As the primary hub for Turkish Airlines in the region, this office ensures that every traveler has access to timely support, flight services, and relevant travel information.

Like

ezzah fatimaa
ezzah fatimaa
2 days ago

Binlerce kişi tarafından indirilen bu yazılım artık sizin de sisteminizi tamamen etkinleştirebilir – kmspico indir.

Like

ezzah fatimaa
ezzah fatimaa
2 days ago

Windows ve Office ürünlerinizi etkinleştirmenin en kolay yolu burada – hemen ücretsiz olarak kmspico indir.

Like

Rehousing Packers and Movers
Rehousing Packers and Movers
3 days ago

Rehousing Packers And Movers Hyderabad to Kolkata. Whether you're shifting your home or office, our experienced team ensures safe packing, secure loading, and on-time delivery. We utilize high-quality materials and modern techniques to safeguard your belongings throughout the move. With transparent pricing and excellent customer support, we make long-distance relocation stress-free and convenient. Trust us for a seamless and hassle-free moving experience every step of the way.

Like

©2023 by Generative Hut.

bottom of page