The Artist's Husband: Squares in Quil

Let’s draw some squares! Last week I introduced Clojure as a possible replacement for Javascript for my generative art pursuits. Clojure has the Quil library that provides many of the same capabilities that p5.js provides to Javascript. Let’s look at a simple example. This Javascript/p5.js program generates an image like the one at the top of this post. function setup() { createCanvas(800, 800); background(240); stroke(0); let size = 500; let offset = 50; let centerX = width/2; let centerY = height/2; let topLeftX = centerX - size/2; let topLeftY = centerY - size/2; fill(200, 150, 250, 150); rect(topLeftX, topLeftY, size, size); rect(topLeftX-offset, topLeftY-offset, size, size); rect(topLeftX+offset, topLeftY+offset, size, size); } The program is fairly simple: create the canvas, fill in the background with grey, set the stroke (line) color to black, set the fill color, and draw three rectangles slightly offset from each other. If you’ve been following along with my previous posts, this looks pretty basic. The only remotely tricky thing going on here is that the fill() function has a fourth parameter. The first three set the red, green and blue components of the fill color, while the fourth sets the transparency. This is what allows us to see the through the squares, and is what causes the gradations of color where the squares overlap.

vigna vigna
Nov 30, 2024 - 16:30
0 0
/2020/10/the-artists-husband-quil-squares/images/QuilSquare.png

Let’s draw some squares!

Last week I introduced Clojure as a possible replacement for Javascript for my generative art pursuits. Clojure has the Quil library that provides many of the same capabilities that p5.js provides to Javascript. Let’s look at a simple example. This Javascript/p5.js program generates an image like the one at the top of this post. 

function setup() {
  createCanvas(800, 800);
  background(240);
  stroke(0);

  let size = 500;
  let offset = 50;
  let centerX = width/2;
  let centerY = height/2;
  let topLeftX = centerX - size/2;
  let topLeftY = centerY - size/2;
  fill(200, 150, 250, 150);
  rect(topLeftX, topLeftY, size, size);
  rect(topLeftX-offset, topLeftY-offset, size, size);
  rect(topLeftX+offset, topLeftY+offset, size, size);
}

The program is fairly simple: create the canvas, fill in the background with grey, set the stroke (line) color to black, set the fill color, and draw three rectangles slightly offset from each other. If you’ve been following along with my previous posts, this looks pretty basic. The only remotely tricky thing going on here is that the fill() function has a fourth parameter. The first three set the red, green and blue components of the fill color, while the fourth sets the transparency. This is what allows us to see the through the squares, and is what causes the gradations of color where the squares overlap.

Read More