Week 3 – Generated Artwork

Concept:

For this week’s production assignment, we had to use arrays and object oriented programming to create a generated artwork. So, I decided to take inspiration from Van Gogh’s painting “Starry Night” (picture taken from Wikipedia) and create a similar piece using OOP. So it would basically be a night scene, with yellow and blue dotted swirls in the sky, a moon and the iconic cypress tree.

To use arrays and OOP in my artwork, I decided to make the sky “swirls” using classes, with the colours from an array. It was a bit tricky to make the classes, and I had to debug the code several times, especially when creating the instances of the class. However, the comments in the console bar and Perplexity helped me figure out what went wrong.

A part of the code I’m particularly proud of :

This is definitely the code for the class. It was a bit hard, especially because it was the first time I was trying Object Oriented Programming, so I am super proud of how the sky turned out!!

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class drawSwirl {
constructor(a, angle, scalar, speed, colours) {
this.a = a;
this.angle = angle;
this.scalar = scalar;
this.speed = speed;
this.colours = colours;
}
draw() {
var x = this.a + cos(this.angle) * this.scalar;
var y = this.a + sin(this.angle) * this.scalar;
fill(random(this.colours));
stroke('#ffffc5');
strokeWeight(0.5);
ellipse(x, y, 5, 5);
this.angle += this.speed;
this.scalar += this.speed;
}
}
class drawSwirl { constructor(a, angle, scalar, speed, colours) { this.a = a; this.angle = angle; this.scalar = scalar; this.speed = speed; this.colours = colours; } draw() { var x = this.a + cos(this.angle) * this.scalar; var y = this.a + sin(this.angle) * this.scalar; fill(random(this.colours)); stroke('#ffffc5'); strokeWeight(0.5); ellipse(x, y, 5, 5); this.angle += this.speed; this.scalar += this.speed; } }
class drawSwirl {
  
 constructor(a, angle, scalar, speed, colours) {
   this.a = a;
   this.angle = angle;
   this.scalar = scalar;
   this.speed = speed;
   this.colours = colours;
 }

  draw() {
  
  var x = this.a + cos(this.angle) * this.scalar;
  var y = this.a + sin(this.angle) * this.scalar;
  fill(random(this.colours));
  stroke('#ffffc5');
  strokeWeight(0.5);
  ellipse(x, y, 5, 5);
  this.angle += this.speed;
  this.scalar += this.speed;
  
  }

}

Embedded sketch :

Challenges I faced and the room for improvement :

I could’ve definitely added some interactivity to it. The cypress tree had to be made using beginShape(), which was extremely hard, especially with so many plot points. For this, I used Geogebra to plot points, calculated them and added it in.

Overall, I’m pretty happy with result of this artwork. There are definitely some things which I could add, maybe the village in the original painting, or some form of interactivity. But I also loved the challenge of using classes, and I’m proud of the swirly sky!

Leave a Reply