Assignment 3 – KaleidoTiles

Concept
My work was inspired by my exploration of recreating the kaleidoscopic visuals using the concept of optical art that I learnt from the artist Victor Vasarely. His works plays with perception and geometric patterns and color. His work inspired me to create infinitely evolving visuals that portray the kaleidoscope. I was also looking into exploring the concept of randomness in creating art as learnt from Casey Reas In the previous weeks reading.

Visual code
Click mouse to change color and press keys to change rotating speed.

Code Highlight

 
class Tile {
  constructor(x, y, w, h, size, col) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.size = size;
    this.angle = 0;  // Rotation angle
    this.growthSpeed = random(0.01, 0.03);  // Controls how fast size oscillates
    this.rotationSpeed = random(0.02, 0.05);  // Controls the rotation speed
    this.col = col;
  }

  // Update the size and angle of the tile
  update() {
    this.size += sin(frameCount * this.growthSpeed) * 2;  // Size oscillates over time
    this.angle += this.rotationSpeed;  // Rotate over time
  }

  // Display the tiles
  display() {
    push();
    translate(this.x, this.y);  //Move origin to center
    rotate(this.angle);  //rotate on angle
    fill(this.col);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, this.size, this.size);  
    pop();
  }

  // color of tile
  changeColor() {
    this.col = color(random(255), random(255), random(255));
  }

  // increase/decrease rotation speed
  changeSpeed() {
    this.rotationSpeed += random(-0.03, 0.03);  // Change speed randomly 
  }
}

// Change colors of all tiles when the mouse is pressed
function mousePressed() {
  for (let i = 0; i < tiles.length; i++) {
    tiles[i].changeColor();  // Change color 
  }
}

// Modify the rotation speed of tiles when a key is pressed
function keyPressed() {
  for (let i = 0; i < tiles.length; i++) {
    tiles[i].changeSpeed();  // Change rotation speed 
  }
}

My code implementation was quite smooth since I took a simple approach. I am proud of how I implemented my class function in a very simple way.

Reflection/Future improvements
I am really proud of my progress so far. I have been able to be more creative in coming up with the art work and my implementation. I am also proud of how I have implemented the object oriented programming for the assignment. I have also incorporated user interactivity to my work which is really impressive. However, there is still room for improvement. In future works I would like to improve my user interactivity more and also work on having a 3D version. Overall I am proud with what I have been able to come up with