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.


7,208 views34 comments

Recent Posts

See All

34 Comments


n61961874
31 minutes ago

Washington Amtrak stations serve as key hubs for train travel across the state and beyond. Major stations include Seattle’s King Street Station, Spokane Station, and Tacoma Dome Station. These stations connect passengers to routes like the Empire Builder, Cascades, and Coast Starlight, offering convenient, comfortable, and scenic travel options throughout the region.

Like

Dr. Ashish Gautam
Dr. Ashish Gautam
6 hours ago

best laparoscopic surgeon in Delhi


Laparoscopic surgeon near me


Dr. Ashish Gautam is a Senior Director - Robotic Surgery & Laparoscopic Surgery, Max Super Specialty Hospital, Patparganj provides comprehensive surgical care. Contact us for Robotic Surgery, Gallbladder Surgery, Endocrine Surgery and Endovenous Laser Surgery.


https://g.page/r/CfUVm8P0MpaqEBM

Like

nlm kumar
nlm kumar
3 days ago

Howrah EscortLucknow EscortNainital EscortGomati EscortChennai EscortHyderabad EscortGangtok EscortAmritsar EscortCuttack EscortNoklak EscortIndore EscortNoney EscortKolasib EscortPune EscortRi Bhoi EscortDharwad EscortThiruvananthapuram EscortJammu EscortRanchi EscortKarnal EscortShimla EscortAhmedabad EscortGurgaon EscortJhansi EscortAjmer EscortPatna EscortAnjaw EscortVisakhapatnam Escortagra Escortaligarh Escortalwar Escortambala Escortbareilly Escortbathinda Escortbhopal Escortbikaner Escortchandigarh Escortdehradun Escortgandhinagar Escortghaziabad Escortgorakhpur Escortgurugram Escortgwalior Escortharidwar Escorthisar Escortjabalpur Escortjaipur Escortjaisalmer Escortjalandhar Escortjodhpur Escortkanpur Escortludhiana Escortmathura Escortmeerut Escortmohali Escortmount-abu Escortpanchkula Escortpanipat Escortpatiala Escortpithoragarh Escortprayagraj Escortpushkar Escortrajkot Escortratlam Escortrohtak Escortrudraprayag Escortsonipat Escortsurat Escortudaipur Escortujjain Escortvadodara Escortvaranasi EscortKolhapur EscortNashik EscortSolapur EscortThane EscortNagpur EscortMumbai Escort


Agra EscortAligarh EscortAlwar EscortAmbala EscortBareilly EscortBathinda EscortBhopal EscortBikaner EscortChandigarh EscortDehradun EscortGandhinagar EscortGhaziabad EscortGorakhpur EscortGurugram EscortGwalior EscortHaridwar EscortHisar EscortJabalpur EscortJaipur EscortJaisalmer EscortJalandhar EscortJodhpur EscortKanpur EscortLudhiana EscortMathura EscortMeerut EscortMohali EscortMount-abu EscortPanchkula EscortPanipat EscortPatiala EscortPithoragarh EscortPrayagraj EscortPushkar EscortRajkot EscortRatlam EscortRohtak EscortRudraprayag EscortSonipat EscortSurat…

Like

Liza Martin
Liza Martin
4 days ago

Writing assignments in English can sometimes be overwhelming, especially when it involves analyzing literature or mastering grammar rules. With MakeAssignmentHelp, you can access the best English Assignment Help. Our team of experienced writers ensures your essays, research papers, and other English assignments are of the highest quality. Whether it's analyzing Shakespeare, writing a critical essay, or improving your writing skills, our experts offer clear, concise, and well-researched content tailored to your academic needs. Get reliable English Assignment Help and ace your assignments effortlessly!

Like

khelrajanlackjack
5 days ago

Experience the blend of aviation and casino excitement with the aviator casino game at Khel Raja. Bet on the aviator's flight path, enjoy stunning graphics, and aim for high rewards. Our secure platform guarantees fair play and a thrilling gaming adventure. Join Khel Raja and soar to new heights with the aviator casino game.

Like
bottom of page