Assignment 3

For this assignment I was inspired by Sol Lewitt’s work called Wall Drawings. I wanted to create an algorithm that connects multiple points together with lines similar to the artist’s work which asked people to draw points and join them together with straight lines.

I started off with figuring out how to put random points on the canvas but using classes and arrays. Then, I proceeded on to figure out how to connect them and get rid of the original points. And then I used some code that we saw in class and modified it a little according to my needs to make the points move. I also used the background opacity feature to create a mesmerizing artwork that become more and more hypnotic the more you click on it.

Sketch:

Problems and Potential Future work:

I want to create a further element of interactivity where the points (or lines) move away from the user’s mouse as it is hovered over the canvas. I tried doing it, but ran into confusion due to multiple things going on with the classes and arrays already.

let fiftyballs = []; //array for storing however many balls the user wants to create

let xPosition = []; //arrays for x and y position of each point the line begins from
let yPosition = [];
 
let x_Pos; //global variables to make it easy to store the x and y positions of the points
let y_Pos;

let R = 236;
let G = 238;
let B = 129;


let totalcount = 5; // variable for number of points to be created


class ballproducer {
  constructor() {
    
    this.xPos = random(10, width - 10);
    this.yPos = random(10, height - 10);
    
    x_Pos = this.xPos;
    y_Pos = this.yPos;
  
    this.xSpeed = random(-3,3);
    this.ySpeed = random(-3,3);
    
  }
  

  move() {
    // move the ball
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;
    x_Pos = this.xPos;
    y_Pos = this.yPos;
  }
  


  checkForCollisions() {
    // check first for left and right wall
    if (this.xPos <= 15 || this.xPos >= width - 15) {
      this.xSpeed = -this.xSpeed;
    }

    // do the same for the ceiling and the floor
    if (this.yPos <= 15 || this.yPos >= height - 15) {
      this.ySpeed = -this.ySpeed;
    }
  }

  draw() {
    circle(this.xPos, this.yPos, 0);
  }
  

}


function setup() {
  createCanvas(600, 600);
  
  frameRate (60);
  
  for (let i = 0; i < totalcount; i++) {
   
    fiftyballs[i] = new ballproducer(); 
  
  }
  
  
}

function draw() {
  
   background(R, G , B  ,15);
    
  
  for (let i = 0; i < totalcount; i++) {
  
    
    xPosition[i] = x_Pos;
    yPosition[i] = y_Pos;
  
    fiftyballs[i].draw();
    fiftyballs[i].move();
    
    fiftyballs[i].checkForCollisions();
    
    line(xPosition[i], yPosition [i], xPosition[i-1], yPosition[i-1]); //draws the line from the previous to the next point
  
}
}

function mouseClicked(){ //each mouse click adds +1 lines to the graphic
  
  R =  random(140,237);
  G = random(160,238);
  B = random(129,237);
  
   
  fiftyballs[totalcount] = new ballproducer(); // adds a new value to the array which has the objects for the balls
  totalcount =  totalcount+1; //increases the number of points or lines by 1 on each click
}