top of page

Kinetic Generative Art Tutorial

Writer: Pierre PaslierPierre Paslier

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.


 
 
 

74 Comments


Jean Marie Santos
Jean Marie Santos
4 days ago

Employers are always on the lookout for candidates with specialized skills and industry-recognized qualifications. The College of Contract Management offers courses tailored to various industries, helping professionals gain a competitive edge. Their online learning platform ensures accessibility without compromising quality. Whether you want to enhance your current skills or enter a new field, their certifications can help boost your employability. Taking the time to upgrade your knowledge can lead to better career opportunities and financial rewards. Professional development is an investment in yourself and your future.

Like

amtrakcom086
4 days ago

Amtrak stations near you provide convenient access to train services, ensuring a smooth travel experience. These stations offer amenities like ticketing, waiting areas, and assistance for passengers with special needs. To locate an Amtrak station near you, visit the Amtrak Station Near Me. Whether you're commuting or embarking on a long journey, Amtrak's extensive network of routes and stations ensures comfort and accessibility for all travelers.

Like

Lily Johnson
Lily Johnson
Mar 17

Topics like ratio analysis and consolidated financial statements used to overwhelm me, but this accounting assignment help service made them manageable. Their clear, organized solutions helped me grasp difficult concepts and improve my grades. If you’re tackling advanced accounting topics, their expertise is invaluable!

Like


Radhika Joshi
Radhika Joshi
Mar 15

Kuwait offers incredible opportunities for nursing professionals seeking to make a meaningful impact while advancing their careers. The nation is home to a growing healthcare system that prioritizes quality patient care, supported by modern facilities and innovative medical technologies. Nurses in Kuwait play a critical role in shaping the future of healthcare, as their expertise and compassion directly contribute to improving the well-being of individuals and communities. With access to competitive salaries, professional development opportunities, and a multicultural work environment, Kuwait has become a sought-after destination for skilled nursing professionals. Whether working in hospitals, clinics, or specialized care centers, nurses here find not only career growth but also the chance to positively transform lives every day.

Know More

Like

©2023 by Generative Hut.

bottom of page