Kinetic Interfaces: Assignment Week2 (Emma)

This is the link to my week2 assignment: Click here

In this assignment, we are asked to create a simple sketch (a static image or animation) using at least 3 User-Defined Functions and Transformation functions. In my work, I explored the functions and created an interesting aesthetic experience.

This is the video showing how it looks:

The work is consisted of 3 user-defined functions:

  1. void MyOwnSquare: used to create the blue square arrays in the background

To create this blue square arrays, I use two nested for loops  so that the squares can be  arranged in an ordered way. Also, the blue squares themselves are rotating, which is easy to achieve in rotate(radians(frameCount)) function.

2. void MyOwnRect: used to create the rotating squares following the mouse

This part is a little bit tricky, at first I want to create the effect that, once the user mouseclick, then appears a rotating square at (mousex, mousey), and if the user click elsewhere, more and more rotating squares come up. However, I didn’t achieve it cause I have no idea how to combine void draw() and void mouseClick() together. So I changed my way and create a line of squares. Also, I added a semitransparant rectangle as the background, so there are shadows as I move the mouse.

3. void MyOwnLine: used to create the black lines in the background

I add the third function to create more effects. I also make use of for loops here, so that the line can duplicate in the gap distance I set.

 

boolean rotate;

void setup() {
  size(500, 500);
  frameRate(10);
}

void draw() {
  fill(0, 0, 0, 30);
  rect(0, 0, width, height);

  for (int n=0; n<height; n=n+20) {
    MyOwnLine(n);
  }

  color c = color(129, 216, 207); // blue
  float speed = 10;
  for (int x =0; x<width; x=x+50) {
    for (int y =0; y<height; y=y+50) {
      MyOwnSquare (x, y, 10, c, speed);
    }
  }

  if (rotate == true) {
    MyOwnRect(random(5, 50), 255, 255, random(255), 6);
  }
}

void MyOwnRect(float w, float r, float g, float b, float n) {
  pushStyle(); 
  pushMatrix(); 
  translate(mouseX, mouseY); 
  rotate(radians(frameCount*n)); 
  noStroke(); 
  fill(r, g, b);
  rect(0, 0, w, w, 7); 
  popMatrix(); 
  popStyle();
}

void MyOwnSquare(float x, float y, int w, color c, float speed) {
  pushStyle();
  pushMatrix();
  translate(x, y);
  rotate( radians(frameCount) * speed );
  rectMode(CENTER);
  fill( c ); 
  noStroke();
  rect(0, 0, w, w);
  popMatrix();
  popStyle();
}

void MyOwnLine(float y) {
  pushStyle();
  pushMatrix();
  translate(0, y);
  strokeWeight(3);
  stroke(0);
  line(0, 0, width, 0);
  popMatrix();
  popStyle();
}

void mouseClicked() {
  rotate = true;
}

One thought on “Kinetic Interfaces: Assignment Week2 (Emma)

Leave a Reply