Month: April 2019

Disability is surely not a new concept that I have encountered. In fact, the course that I take right before my Intro to IM class is called “Dis/abilities in Musical Context”. However, this approach was something I had not met before: how design is crucial to suit people with needs.

Before reading this article, when debating upon the creation of devices for disabled people, I assumed that technicality would be above all else. For instance, if the hearing aid is not loud enough, it is basically useless to someone. Or if colorblind glasses do not work properly, that too would be a reason for colorblind people to neglect that product. However, by thinking this way, I diminished the importance of ‘design’.

One valuable lesson I learned is that design matters as much as technicality. If a product works, but is not fit for the person’s body, what much use is there to it? That was one question I failed to acknowledge before. And especially for disabled people, because their degrees of disability may vary (which may lead to different body shapes and sizes) it is also arduous to come up with one single design that can fit every disabled person.

I have learned, ultimately, that not only is design significant for certain aids, but it is definitely a hard task to complete as numerous obstacles are in the way.

For the OOP project, I recreated the catching ball game. To make it simple, I made a rectangular bar which is essentially the basket that is suppose to catch the ellipses that are falling from the sky. Each of these balls are made from the Ball class, which has the attributes xPos, yPos, speed, and size. Every time the ball is not caught by the rectangular bar, the number of missed balls increased and the speed of the ball increases. This basically means the game gets harder at each level because the ball is moving at a random(0.1, 0.3) speed faster than before. I had trouble making the balls come down at different times and position, but I fixed it by starting each of the balls’ yPos to be between random(-width, 0), so that the balls don’t show up all at once. Once a ball reaches the bottom of the screen, I reset its x,y position to a new location on the screen, so that it looks like there’s always new balls coming from the sky.

There a 5 levels to this game. If they reach it, they win.

Every time the user catches 10 balls, it turns into a new level.

If the user misses out on 15 balls, they lose (does not reset at each level).

int level = 0;
int totBall = 10;
int caughtBalls = 0;
int missedBalls = 0;
Ball balls[] = new Ball[totBall];
Catcher catcher;

void setup() {
  size(640, 640);
  catcher = new Catcher();
  for (int i = 0; i < totBall; i++) {
    balls[i] = new Ball(random(width - 20), random(-width, 0), 1.2);
  }
}

void draw() {
  background(0);
  fill(255);
  
  if (level < 6 && missedBalls < 15) {
    text("Level: ", 20, 20);
    text(level, 60, 20);
    
    text("Caught:  ", 20, 40);
    text(caughtBalls, 75, 40);
    
    text("Missed: ", 20, 60);
    text(missedBalls, 70, 60);
    
    for (int i = 0; i < totBall; i++) {
      balls[i].run();
      if (balls[i].isTouchingBar(mouseX, height - 20)) {
        caughtBalls++;
      } else if (balls[i].yPos >= height - 10) {
        missedBalls++;
        balls[i].resetIfEnd(height - 10);
      }
    }
    
    if (caughtBalls % totBall == 0 && caughtBalls != 0) {
      level++;
      caughtBalls = 0;
    }
    
    catcher.display();
  } else if (level > 5) {
    text("YOU WIN", width/2 - 20, height/2);
  } else if (missedBalls >= 15) {
    text("GAME OVER", width/2 - 20, height/2);
    text("LEVEL: ", width/2 - 20, height/2 + 20);
    text(level, width/2 + 20, height/2 + 20);
  }
}

 

class Ball {
  float xPos, yPos, spd, size;
  color clr;
  
  Ball(float x, float y, float speed) {
    xPos = x;
    yPos = y;
    spd = speed;
    size = random(5, 20);
    clr = color(random(0, 255), random(0, 255), random(0, 255));
  }
  
  void display() {
    fill(clr);
    ellipse(xPos, yPos, size, size);
  }
  
  void move() {
    yPos += spd;
  }
  
  void resetIfEnd(int y) {
    if (yPos > y) {
      yPos = random(-width, 0);
      xPos = random(width);
      spd = spd + random(0.1, 0.3);
    } 
  }
  
  void run() {
    move();
    resetIfEnd(height);
    display();
  }
  
  boolean isTouchingBar(float barXPos, float barYPos) {
    if (xPos >= barXPos && xPos <= barXPos + 90 &&  
        yPos >= barYPos && yPos <= barYPos + 20) {
      resetIfEnd(height - 20);
      return true;
    }
    return false;
  }
}

 

For my project, I decided to copy Ben F. Laposky’s  sine wave Oscillons. Laposky created his original artwork starting in 1952, using oscillators, amplifiers, and modulators with a cathode ray tube to create what is generally regarded as the first computer art.

Since the image (presented here in both black and white and original) was created by taking pictures of analogue lines on a screen, I decided to simulate the motion of the original screen.

int t, x, y, x2, y2;
int a, b, b2, c, c2;
int d, e, e2, f, f2;
int w = 200;
float speed = .03;
float speed2 = .01;
float granulation = .0005;
float radius = 100;

void setup(){
  size (480,640);
   t = 0;
}
  
  void draw(){
 
    float frequency = (frameCount*speed) + (granulation);
   float fillColor = map(noise(frequency), .01, .75, 0, 255);
   float fillColor2 = map(sin(frequency), .01, .75, 0, 255);
   float fillColor3 = map(cos(sin(frequency)), .01, .75, 0, 255);
    fill(0,0,0,11);
  rectMode(CORNER);
  rect(-10,-10,width+20,height+20); // fade part
  rectMode(CENTER);
   
  //fill(100, 200, 3, fillColor);
  stroke(fillColor, fillColor2, 3,fillColor);
  strokeWeight(12);
   
   pushMatrix();
   
  float  t= frameCount*speed;
  
  float x = radius * sin(t);
  float y = radius * cos(t/8);
  
  float x2 = radius/2 * sin(t-3);
  float y2 = radius * cos(t);
  translate(width/2,height/2);
    
    line(x,y,x2,y2);

    //popMatrix();
    stroke(fillColor2, fillColor, fillColor,fillColor);
  strokeWeight(12);
    //pushMatrix();
   
  float  a= frameCount*1.1*speed;
  
  float c = radius * sin(a);
  float b = radius * cos(a/2);
  
  float c2 = radius * sin(a*1.3);
  float b2 = radius * cos(a/3);
  //translate(width/2,height/2);
    
    line(c,b,c2,b2);
    
    stroke(fillColor3, fillColor3, fillColor2,fillColor);
  strokeWeight(12);
    //pushMatrix();
   
  float  d= frameCount*1.1*speed2;
  
  float e = radius * sin(d);
  float f = 20+ radius * cos(d/1.8);
  
  float e2 = radius * sin(d/3);
  float f2 = radius * cos(d/3);
  //translate(width/2,height/2);
    
    line(e,f,e2,f2);
    
  //  float c = radius * sin(a(tan(a));
  //float b = radius * cos(a/2);
  
  //float c2 = radius * sin(a-3)*tan(a);
  //float b2 = radius * cos(a/3);
  ////translate(width/2,height/2);
    
  //  line(c,b,c2,b2);

    popMatrix();
    
    
    
  }

To simulate the machine used to create the images, I decided to use bars or lines, making them mobile by having their endpoints following certain sin and cosine functions. I used a Trick Aaron taught me to blur it. The other main function of my code makes each bar change color within a certain specified range, either using noise or a sin/cos wave to change the values.

Once I figured this out, Most of what I had to do was play with where each bar was, what color it was, the speed, and blur.

link

int t, x, y, x2, y2;
int a, b, b2, c, c2;
int d, e, e2, f, f2;
int w = 200;
float speed = .03;
float speed2 = .01;
float granulation = .0005;
float radius = 100;

void setup(){
  size (480,560);
   t = 0;
}
  
  void draw(){
 
    float frequency = (frameCount*speed) + (granulation);
   float fillColor = map(noise(frequency*2), .01, .75, 190, 255);
   float fillColor2 = map(sin(frequency), .01, .75, 190, 220);
   float fillColor3 = map(cos(sin(frequency)), .01, .75, 0, 255);
    fill(0,0,0,11);
  rectMode(CORNER);
  rect(-10,-10,width+20,height+20); // fade part
  rectMode(CENTER);
   
  //fill(100, 200, 3, fillColor);
  stroke(fillColor, fillColor2, random(20),fillColor);
   //stroke(200, 200, 3,fillColor);//test colors
  strokeWeight(12);
   
   pushMatrix();
   
  float  t= frameCount*speed;
  
  float x = (radius * -cos(t))+100;
  float y = (radius * sin(t))+100;
  
  float x2 = radius * cos(t);
  float y2 = radius * -sin(t);
  translate(width/2+20,height/2+-100);
    
    line(x,y,x2,y2);

          //popMatrix();
          stroke(fillColor, fillColor2, 3,fillColor);
        strokeWeight(12);
          //pushMatrix();
         
        float  a= frameCount*speed;
        
        float c = (radius * -sin(a))+100;
        float b = (radius * cos(a))+100;
        
        float c2 = radius * sin(a);
        float b2 = radius * -cos(a);
        //translate(width/2+20,height/2-100);
          
          line(c,b,c2,b2);
          
//          stroke(fillColor3, fillColor3, fillColor2,fillColor);
//        strokeWeight(12);
//          //pushMatrix();
         
//        float  d= frameCount*1.1*speed2;
        
//        float e = radius * sin(d);
//        float f = 20+ radius * cos(d/1.8);
        
//        float e2 = radius * sin(d/3);
//        float f2 = radius * cos(d/3);
//        //translate(width/2,height/2);
          
//          line(e,f,e2,f2);
          
  //  float c = radius * sin(a(tan(a));
  //float b = radius * cos(a/2);
  
  //float c2 = radius * sin(a-3)*tan(a);
  //float b2 = radius * cos(a/3);
  ////translate(width/2,height/2);
    
  //  line(c,b,c2,b2);

    popMatrix();
    
    
    
  }

Finally it was time for me to begin to copy the original image.

Here in this code, I have two systems working to create the first butterfly in the image. The color fluctuates within the spectrum from red/orange to yellow/green. What I need now is a second system, and possibly a way to translate it up and down as time goes in order to get the same quality as the original.

If
  

int size = 100;
int cols = 7;
int rows = 5;
boolean light = false;
int a;
int b;


void setup() { 
  size (700, 500);
  smooth();
  noFill();
  noLoop();
  background (255);
}

void draw() {
  
    int[][] box = new int[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      box[i][j] = i;
      int a = i*100;
      int b = j*100;
      rect(a, b, 100, 100);
      println(i, j);
      int tx1 = int (random(i*100,i*100+50));
      int ty1 = int (random(j*100,j * 100 + 50));
      rect (tx1,ty1,50,50);
      int tx2 = int (random(i*100,i*100+50));
      int ty2 = int (random(j*100,j * 100 + 50));
      rect (tx2,ty2,30,30);
      int tx3 = int (random(i*100,i*100+50));
      int ty3 = int (random(j*100,j * 100 + 50));
      rect (tx3,ty3,20,20);
      int tx4 = int (random(i*100,i*100+50));
      int ty4 = int (random(j*100,j * 100 + 50));
      rect (tx4,ty4,10,10);
      int tx5 = int (random(i*100,i*100+40));
      int ty5 = int (random(j*100,j * 100 + 40));
      rect (tx5,ty5,60,60);
      int tx6 = int (random(i*100,i*100+30));
      int ty6 = int (random(j*100,j * 100 + 30));
      rect (tx6,ty6,70,70);
      int tx7 = int (random(i*100,i*100+20));
      int ty7 = int (random(j*100,j * 100 + 20));
      rect (tx7,ty7,80,80);
      int tx8 = int (random(i*100,i*100+10));
      int ty8 = int (random(j*100,j * 100 + 10));
      rect (tx8,ty8,90,90);
      int tx9 = int (random(i*100,i*100+50));
      int ty9 = int (random(j*100,j * 100 + 50));
      rect (tx9,ty9,40,40);
      int tx10 = int (random(i*100,i*100+50));
      int ty10 = int (random(j*100,j * 100 + 50));
      rect (tx10,ty10,45,45);

      
      
    //for 
 
 //if (frameCount > 0.1) {
  noLoop();
 //     //println(mouseX + " : " + mouseY);
 //   }
    }
}
}

 

 

This week’s assignment was to recreate one of some older computer arts from the Triangulation webpage. I decided to make the Gaussian Distribution one – which seemed simple at first but turned out to be quite challenging to replicate. It’s just a bunch of dots distributed in different densities- well yeah, but… maybe not for me.

My first instinct was that all the dots are densely located around a horizontal line and gradually decrease density the further you get from the line. Yet I failed spectacularly trying to approach this logic – also rethinking that now, it would not reflect a small degree of wavy imperfection in the distribution.

Plan B was to define certain segments of the background to which I will assign a certain number of dots. Through layering them on each other and overlapping them I could imitate the distribution effect – though not perfectly. I played around with different segment sizes and numbers, as well as the number of dots in each.

The problem I encountered using this approach, was that the segments started showing in straight almost fully defined lines, which caused the gradual distributive effect to disappear. To “blend” these segments more I was thinking of defining them within a curvy segment rather than a rectangular one. Which worked in theory, but I could not make it work by myself. Yay.

Therefore I tried blending it through decreasing the dot number but increasing the number of segments.  Not perfect, but the best I could do. Fake it till you make it does not always apply.

This is the original version:

And this is my replication:

In addition, I also played a little bit with interaction. I was interested in what happens when I delete the noLooop() command, and the result made me feel actually really uncomfortable- a bunch of tiny little objects moving quickly and uncontrollably. It almost reminded me of a hive of bees.

That’s why I made the highest concentration of dots to follow the mouse cursor (similarly to what bees do) and if the space bar is pressed, the number, as well as the size of dots, start increasing until they pretty much consume the whole screen.

Sound on for an extra experience:

And last but not least, the code:

//setting up the number of dots used in different segments
int numberCirclesA = 700;
int numberCirclesB = 1000;
int numberCirclesC = 3000;
int numberCirclesD = 5000;

//setting up variables for x, y locations, and width of the dots
float x;
float y;
float w = 3;


void setup() {
  size (800, 390);
  //noLoop(); // to be activated only to see the exact replica of the original image
}


void draw () {
  background (255);
  noStroke();
  fill(0);

  //if the space key is pressed then the number of circles and their size increase
  if (keyPressed) {
    if (key == ' ') {
      w = w + .5;
      numberCirclesA = numberCirclesA + 2000 ;
      numberCirclesB =   numberCirclesB + 1000;
      numberCirclesC =   numberCirclesC + 1000;
      numberCirclesD =   numberCirclesD + 1000;
    }
    //if space bar not pressed, their return to their original values
  } else {
    w = 3;
    numberCirclesA = 700;   
    numberCirclesB = 1000;
    numberCirclesC = 3000;
    numberCirclesD = 5000;
  }



  // different segments in which the dots are being drawn

  //mouseY is added to the Y location to make the segment follow the mouse cursor 

  for (int i = 0; i < numberCirclesA; i++) {
    pushMatrix();
    x = random(0, width);
    y =random(0, height-15);
    ellipse (x, y, w, w);
    popMatrix();
  }
  for (int i = 0; i < numberCirclesB; i++) {
    pushMatrix();
    y = (random(110, 150) + mouseY);
    x = (random(0, width));
    ellipse(x, y, w, w);
    popMatrix();
  }
  //
  for (int i = 0; i < numberCirclesA; i++) {
    pushMatrix();
    x = random(0, width);
    y = (random(0, height -30)+ mouseY);
    ellipse (x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesB; i++) {
    pushMatrix();
    y = (random(40, height - 70) + mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesC; i++) {
    pushMatrix();
    y = (random(20, height - 150)+ mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesD; i++) {
    pushMatrix();
    y = (random(60, height - 200)+ mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }
  for (int i = 0; i < numberCirclesD; i++) {
    pushMatrix();
    y = (random(40, height - 175) + mouseY);
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  //tracking the mouser cursor
  print(mouseX);
  print (" ");
  println(mouseY);
}

 

 

When I first started recreating “Phase Pattern” by Manfred Mohr, I considered using functions like line() and beginShape(), but then I thought that drawing graphs would add more accuracy to the patterns I was trying to create. So I drew some sine and cosine functions, added some vertical and horizontal lines here and there, and voila! Can’t say it’s my best work because it still needs some adjustments with the curve shape, but I’ll keep working on it with my not so extensive math skills.

“Phase Patterns” by Mohr:

My rendition:

And here’s my code:

float theta = 0.0;  // Start angle at 0
float frequency = 2.0;
float amplitude = 50.0;  // Height of wave
float period = 500.0;  // How many pixels before the wave repeats

float y_for_sine(float x){
  float y = sin(x * TWO_PI * frequency/width) * 100;
  y = y + height/2 + 50;
  return y;
}

float y_for_cos(float x){
  float y = cos(x * TWO_PI * frequency/width) * 100;
  y = y + height/2;
  return y;
}

void setup() {
  size(600, 700);
  background(0);
}

void draw(){
  // bottom vertical lines (cos)
  stroke(255);
  float strokeweight2 = 1.0;
  strokeWeight(strokeweight2);
  //FOR EACH CURVE:
  float interval2 = (int) strokeweight2 + 4.89;
  float x_index2 = 0;
  while(x_index2 < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y++){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y > y_for_cos(x_index2)){
        point(x_index2,y );
      }
    }
    x_index2 += interval2;
  }
  
  //top horizental lines (cos)
  float strokeweight3 = 1.0;
  strokeWeight(strokeweight2);
  //FOR EACH CURVE:
  float interval3 = (int) strokeweight2 + 6;
  float x_index3 = 0;
  while(x_index3 < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y += interval3){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y < y_for_cos(x_index3)){
        point(x_index3,y );
      }
    }
    x_index3 += 1;
  }
  
  //top vertical lines (sin)
  stroke(255);
  float strokeweight = 1.0;
  strokeWeight(strokeweight);
  //FOR EACH CURVE:
  float interval= (int) strokeweight + 5.054;
  float x_index = 0;
  while(x_index < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y++){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y < y_for_sine(x_index)){
        point(x_index,y);
      }
    }
    x_index += interval;
  }

// cos line -- make this thicker
  strokeWeight(1.05);
  for(int x = 0; x < width; x++){
    point(x, y_for_cos(x));
  }
}

 

This homework assignment was very challenging for me. I used a source from open processing to do this, but the code was not working, so I had to go through it and learn what needs to change and be added to make it function. The difference with the original is that when the mouse clicks (mousePressed () ) on it, the direction of the lines change by rotating randomly at 0, 120, and 240 degrees.

int width = 600;
int height = 700;
int _size = 20;     // hexagon radius

void setup() {
  
  size(600,700);
  noLoop();
  
  background(25, 150, 180, 20);
  noFill();
  stroke(0);
  strokeWeight(2);

}

void draw() {

  // clear background
  background(25, 150, 170, 20);
  
  // line length (hypotenuse)
  float h = sin(THIRD_PI) * _size;
  
  for (int i = 0; i <= width / (_size * 3); i++) {
    for (int j = 0; j <= (height / h) + 1; j++) {

      // reference points (centre of each hexagon)
      float x = i * _size * 3 + (_size / 2);
      float y = j * h;
      // offset each odd row
      if (j % 2 > 0) {
        x += _size * 1.5;
      }

      pushMatrix();
      
        translate(x, y);
        
        // random hexagon rotation (0, 120, 240 degrees)
        rotate(int(random(0, 3)) * THIRD_PI);
    
        // draw line
        line(0, -h, 0, h);
  
        // draw arcs
        arc(-_size, 0, _size, _size, -THIRD_PI,     THIRD_PI);
        arc( _size, 0, _size, _size,  THIRD_PI * 2, THIRD_PI * 4); 
      popMatrix();}
  }
}
      void mousePressed() {
  
  redraw();
  }

I really like squares. Here are some squares:

int square_size = 100;

void setup () 
{
  size (800, 800);
  background(255);
}

void draw () 
{
  noLoop();
  background(255);
  draw_squares();
}
void draw_squares()
{
    for (int i=0; i < width; i+=square_size) 
  {
    for (int j=0; j< height; j+= square_size)
    {
      strokeWeight(8);
      float randomizer = random(5,15);
      rect(i, j, square_size, square_size);
      for (int k = 0; k<random(3,6); k++)
      {
        strokeWeight(2);
        
        rect(i+(k*randomizer), j+(k*randomizer), square_size-(k*20), square_size-(k*20));
      }
    }
  }
}

Here is what I’ve got as a result: