Month: October 2024

My midterm assignment tries to emulate the work of Jackson Pollack, an artist whose work I really enjoy. I really enjoy abstract art, and I thought the idea of trying to emulate the strokes he makes through code could make for a really interesting midterm project. I like the idea of bridging the physical into the digital, which is another reason why I wanted to try this.

Currently, my program creates a series of lines that will travel randomly and vary in its stroke size. It creates the lines in segments, and will occasionally break the line and start in a new place. I have 3 of these objects, all in different colors, that will draw the segments. You can click on the screen to generate a new set of lines, replacing the old ones. The code for the line drawer can be seen here:

class Drawer {
  constructor(seg, swScale) {
    this.seg = seg;
    this.swScale = swScale;
    this.sw = width * random(0.0002, 0.005);
    this.frame = width * 0.05;
    this.angVary = PI * 0.02;
    this.edgeBuff = height * 0.08;
    this.lineLength = height * 0.001;
    this.x = round(random(width));
    this.y = round(random(height));
    this.prevX = this.x;
    this.prevY = this.y;
    this.ang = random(PI * 2);
    if (random(2) < 1) {
      this.ang = PI * 0.25;
    } else {
      this.ang = PI * 0.75;
    }
  }
  makeLines() {
    for (let i = 0; i < this.seg; i++) {
      this.ang = this.ang + random(-this.angVary, this.angVary);
      this.x = this.lineLength * sin(this.ang) + this.x;
      this.y = this.lineLength * cos(this.ang) + this.y;
      if (
        this.x > width ||
        this.x < 0 ||
        this.y > height ||
        this.y < 0
      ) {
        this.ang += 0.2;
      }
      this.sw += width * random(-0.00003, 0.00003);
      this.sw = constrain(this.sw, width * 0.0001, width * 0.009);
      strokeWeight(this.sw * this.swScale);
      line(this.prevX, this.prevY, this.x, this.y);
      this.prevX = this.x;
      this.prevY = this.y;
      if (random(1000) < 1) {
        this.sw = width * random(0.0002, 0.005);
        this.x = round(random(width));
        this.y = round(random(height));
        this.prevX = this.x;
        this.prevY = this.y;
        this.ang = random(PI * 2);
        if (random(2) < 1) {
          this.ang = PI * 0.25;
        } else {
          this.ang = PI * 0.75;
        }
      }
    }
  }
}

Creating this object was the most difficult part so far. I was trying to figure out ways to make the lines move randomly but not too erratically. After much trial and error, I managed to make some numbers that looked good to me.

My next steps are to add the paint blobs, which I think could be the hardest part, because I want them to be misshapen. After that, I can work more on the interactivity by adding such things as ways to modify the amount of lines made. I also want to add more layers, because right now there is a lot of empty space and I want to minimize that at bit more. Adding more layers will also make the pieces look more interesting and make them look more like a Pollack piece, which has countless layers of paint on them. The last part I intend to do is work on is adding more colors, I am perhaps thinking about using random colors, but I am unsure how this will end up looking.

Concept 

We have learned so much about the nature of code and the physics behind it. For this project, I wanted to use what we learned in data visualization of Palestinian folklore. I wanted to visualize sound waves on this type of music and visualize it as similar to Palestinian embroidery. I think I aim to preserve cultural heritage digitally. Thus, I want to embed the traditional visual language of Palestinian embroidery with  Palestinian folklore.

Highlight 

 

There were a couple of challenges when mapping the data because, initially, I was getting dots and not lines, and they were not interesting or similar enough to embroidery. I spent a lot of time changing them into the concept I wanted.  I experimented with mathematical equations to reach the desired outcome. I have set the basic code for the project, but there is so much to do. I had to adjust the amplitude for the data and read it to add accurate numbers into the code so that it responds correctly. 

class particle {
  constructor(){

  this.pos = p5.Vector.random2D().mult(200);
  this.vel = createVector(0,0);
  this.acc = this.pos.copy().mult(random(0.001,0.0001));
    // this.r = 10;
    // this.lifetime = 255;
this.PW = random(1,5);
}
update(cond){
  this.vel.add(this.acc);
  this.pos.add(this.vel);
  
  if(cond){
    this.pos.add(this.vel);
    this.pos.add(this.vel);
    this.pos.add(this.vel);
    
  }
  
}
  //remove particles that were drawn 
  edges(){
    if(this.pos.x<-width/2 || this.pos.x>width/2 || this.pos.y <-height/2 || this.pos.y>height/2
     ){
       return true;
  } else {
    return false;
  }}
show(){
  noStroke();
   
    fill(204, 0, 0);
  ellipse(this.pos.x, this.pos.y,this.PW);
  
}}

Further, I made a particular class that also reacts to the sound by reading the fft energy and then moving according to the amplitude. The particles that are out of frame are deleted to avoid breaks and breakdowns.

Sketch 

Future Work 

I want to make buttons to allow the audience to pick a song from a preloaded set of songs, but I also need to work more on the aesthetics and final design of the work. I also want to add some complexity to the visualization, maybe allowing the audience to change the density of the strokes or play with textures and shades.