Week 3: Smooth Lights

Concept and Inspiration

For this week, as I was looking forward to make use of arrays and object oriented programming, I wanted to draw lights that smoothly turn on and off. My idea has inspiration  from disco lights that blink turning on and off. An image of such an arrangement of lights can be seen here below:

The alternation of black and white colour are intended to create an illusion of lights turning on and off.

Implementation

To implement my idea, I created two classes one for the boxes and one for the circles. I had functions to draw the boxes and circles in each class and created the objects in the setup function and saved the locations of each in an array. In the draw function I used the arrays to draw the boxes in the canvas.

My sketch

My final sketch can be seen here below:
<

My code

// Declare and initialize variables 
let zoomBox = 1;
let zoomCircle = 1;
let boxside = 25;
let radius = 20;
let xstart = 0.2 * boxside + boxside;
let ystart = 0.2 * boxside + boxside;
let xgap = xstart + xstart * 0.1;
let ygap = ystart + ystart * 0.1;
let ArrAllBox = [];
let ArrRowBox = [];
let ArrAllCircle = [];
let ArrRowCircle = [];

// Define the Box class with methods for drawing and checking mouse interaction
class Box {
  constructor(xcentre, ycentre, width_side, height_side) {
    this.xcentre = xcentre;
    this.ycentre = ycentre;
    this.width_side = width_side;
    this.height_side = height_side;
  }

  drawbox()
  {
    noStroke();
    fill(0);
    rectMode(CENTER);
    rect(this.xcentre, this.ycentre, this.width_side + zoomBox, this.height_side + zoomBox);
    noFill();
  }
  
 
}

// Define the Circle class with methods for drawing and checking mouse interaction
class Circle {
  constructor(xcentre, ycentre, radius) {
    this.xcentre = xcentre;
    this.ycentre = ycentre;
    this.radius = radius;
  }

  drawcircle() {
    noStroke();
    fill(255);
    circle(this.xcentre, this.ycentre, this.radius + zoomCircle);
    noFill();
  }
  
}

// In Setup function I initialize canvas and populate arrays with Box and Circle objects
function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = xstart; i <= width - xstart; i += xgap) {
    for (let j = ystart; j <= height - ystart; j += ygap) {
      let new_box = new Box(i, j, boxside, boxside);
      let new_circle = new Circle(i, j, radius);
      ArrRowBox.push(new_box);
      ArrRowCircle.push(new_circle);
    }
    ArrAllBox.push(ArrRowBox);
    ArrRowBox = [];
    ArrAllCircle.push(ArrRowCircle);
    ArrRowCircle = [];
  }
}

// Handling zoom effect, and draw Box and Circle objects
function draw() {
  background(170);

  zoomBox = 5 * sin(frameCount * 0.05); 
  zoomCircle = 5 * (1 - sin(frameCount * 0.05)); 
  
  for (let i = 0; i < ArrAllBox[0].length; i++) {
    for (let j = 0; j < ArrAllBox.length; j++) {
      ArrAllBox[j][i].drawbox();
      ArrAllCircle[j][i].drawcircle();
    }
  }
}

Problems I faced and reflections

During the design, wanted to make the lights take camera input and turn some lights on and others off to mark the objects. However, I found it challenging and decided to go with a simpler design. Going forward, I hope to learn more on camera input and manipulation to implement such an idea.