xmf – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LookingOutwards-06

The controversial website, https://thispersondoesnotexist.com/, generates portraits of seemingly real people with different features with just a page refresh. If told these are real people it is easily believable, however, they are computer-generated images from artificial intelligence. Phillip Wang is the software engineer which created this website. There is a randomness on how these “people” will be generated because there are theoretically, countless possibilities. And depending on the scale, millions of facial features.

The controversy of this project is because of the realistic properties of each generated face. The sheer amount of people on the planet is difficult to keep on record who is who and if someone that is generated is truly a fake person. The concern is if a false human can be easily generated at a refresh of a page, then how can we trust one of our more basic senses, sight. Despite not being a so-called artistic project, I found this to be quite refreshing because of the limits of this project. Saying something looks alike is subjective between any two people but not with our developing technology, the randomness created from this AI can be used to create an identity or mimic an existing one. It is interesting the capabilities of a randomly generated face. It can be unlocking a phone using facial recognition or playing a character with an avatar which is not even real.

Project-05-Wallpaper

sketch

function setup() {
    createCanvas(600, 600);
    background(0);
}

function draw() {
  push();// background
    stroke(100);
    for (var x = 0; x <= 600; x+=50){
      line(x,0,x,600)
    }
  pop();

  push(); // 1,2 domino
    for (var x = 50; x <= 520; x+=200){
      for(var y = 50; y <= 520; y+=200)
      domino(x,y);
    }
  pop();
  // 3,5 domino
    for (var x = 150; x <= 520; x+=200){
      for(var y = 150; y <= 520; y+=200)
      domino2(x,y);
    }
function domino(x,y){
    push();
      noStroke()
      translate(x,y);
      fill(255)
        quad(0,10,20,40,80,20,60,-10) // white face
      fill(200)
        quad(0,10,0,20,20,50,20,40) // light grey face
      fill(100)
        quad(20,40,20,50,80,30,80,20) // dark grey face
      stroke(0)
      strokeWeight(3)
        line(50,30,30,0) // middle line
        fill(0)
          circle(25,20,5) // left dot
          circle(45,3,5) // right dots
          circle(65,15,5)
    pop();
  } //1,2 domino
function domino2(x,y){
    push();
      noStroke()
      translate(x,y);
      fill(255)
        quad(0,10,20,40,80,20,60,-10) // white face
      fill(200)
        quad(0,10,0,20,20,50,20,40) // light grey face
      fill(100)
        quad(20,40,20,50,80,30,80,20) // dark grey face
      stroke(0)
      strokeWeight(3)
        line(50,30,30,0) // middle line
        fill(0)
          circle(25,20,5)//left dots
          circle(13,13,5)
          circle(37,27,5)
          circle(55,10,5)//right dots
          circle(44,3,5)
          circle(67,17,5)
          circle(55,22,5)
          circle(57,-2,5)
    pop();
    } // 3,5 domino
    noLoop();
}

I was looking into how wallpapers were a consistent pattern of repeating actions and reactions. Dominos are an immediate thought when asked about chain reactions so I created dominos in an isometric view with 2 different dominos. Each row and column alternate to create a 3D marking effect. The end product is a noir themed domino wallpaper.

Looking Outwards 05: 3D Computer Graphics

Mike Winkelmann, otherwise known as Beeple, is a 3D artist who has created videos and images everyday nonstop for the past few years. All his renders are eye captivating and realistic in detail. There is also a wide variety of designs he does, some political, some gruesome, and some tame. He has done collaborations with major brands such as LV. He uses a combination of different programs to fuel his work. He works in both 2D and 3D, but the way each image or model is generated is through 2D calculations of meshes. By deciding how detailed, smooth, or consistent his models will be, the properties of each mesh have to be specific. Beeple also chooses specific angles or frames when rendering his work which shows an intention behind how he wants to depict certain aspects or highlight specific objects. In modeling programs, meshes and curves and the base foundation of a surface of an object. By using that to his advantage, he is able to manipulate, shadow, scale, and proportions to have models work in his favor. In addition, there is the artistic idea of having a foreground, midground, and background.

Project-04-String-Art

sketch

// Xander Fann xmf Section B
var bx = 0
var len = 10
var up = 0
function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {
  push()
    translate(0,up)
    background(255)
    stroke(200,200,255)
      for (var y = -5000; y <= 5000; y += 5){
        line(bx,y,bx+width,y);
      }
    //balloon
      noFill()
      stroke(255,0,0) // red
      for(var arcH = 0; arcH <= 130; arcH += 3){
        arc(200,180,arcH,130,-PI/2,PI/2)
      }


      noFill()
      stroke(0,255,0) // green
      for(var arcH = 0; arcH <= 130; arcH += 3){
        arc(200,180,arcH,130,PI/2,-PI/2)
      }

      noFill()
      stroke(0,0,255,70) // blue
      for(var arcH =- 70; arcH <= 0; arcH += 1){
        arc(200,180,arcH,130,PI/2,-PI/2);arc(200,180,arcH,130,-PI/2,PI/2)
      }
    //basket
    //basket horizontal
      stroke(214, 174, 56)
      for(var y = 260; y<= 290; y += 2){
        line(180,y,220,y)
      }
    //basket vertical
      stroke(214, 174, 56)
      for(var x = 180; x <= 220; x += 2){
        line(x,260,x,290)
      }
    //connection strings
      stroke(0)
      for(var x = 160; x <= 240; x += 20){
        line(x,230,200,260)
    }
    //movement
      up -= 3
      if (mouseIsPressed) {up += 10}
    pop()

    //moutains
    noFill()
    stroke(100,255,0)
    for(r = 200; r<= 300; r += 3)
    ellipse(200,400,800,r)
}

I started by thinking about how the density of strings can affect each other and how overlapping strings is similar to the idea of hatching make an object look 3 dimensional like a sphere. I thought of a hot air balloon where multiple colors can also be used to show the roundness of the balloon. When the screen is pressed the balloon also moves downwards.

Looking Outwards 04: Sound Art

Ernst Chladni is a physicist but incorporates his work into music and the use of music as vibrations to create art on a Chladni plate. A particle on the plate, sand, rocks, or in the video, couscous, will vibrate because of the friction between an object and the plate. In the video, it was a bow gliding across the edge of the plate, which made the couscous move to areas where there are limited vibrations. This process creates symmetrical patterns made with the coming together of the particles. Though the video is not an example of how digital sounds can create art, careful algorithms can create desired patterns with calculated vibrations. Every chladni plate has a different pattern because the way each plate vibrates is different. Not only is this art visually, but musically as well. The combination of both forms of art is an interesting exploration into how something that is heard can affect something that is seen.

To generate this type of pattern, the oscillation of the plate is precise, which creates the distant locations the particles will oscillate too. The symmetry and pattern can be predicted the more an object rubs against the plate. An artist can stop whenever they care to, however, the more they strike the plate, the more detailed each pattern becomes because of the longer vibrations the particles will experience. This style of art can be done by anyone and with any medium.

Project-03-Dynamic-Drawing

dynamicdrawing

function setup() {
    createCanvas(600, 450,);
    background(220);
}
function draw() {
    var x = mouseX
    var y = mouseY
    var g = 0
    var b = 0
    //background
    background(0)

    push();
    translate(mouseX-750,0)
    stroke(255,)
    strokeWeight(2)
    scale(3,1)
    line(0,20,50,20)
    line(120,40,130,40)
    line(60,50,130,50)
    line(300,80,350,80)
    line(300,90,380,90)
    line(100,100,170,100)
    line(230,130,280,130)
    line(200,160,210,160)
    line(40,170,90,170)
    line(400,200,420,200)
    line(340,220,370,220)
    line(220,230,310,230)
    line(420,270,440,270)
    line(80,280,180,280)
    line(160,290,150,290)
    line(370,320,420,320)
    line(10,330,90,330)
    line(140,350,170,350)
    line(40,370,60,370)
    line(320,390,330,390)
    line(80,400,120,400)
    line(210,430,260,430)
    line(400,440,450,440)
    pop();
    // spinning arcs
    strokeWeight(1+y/50);
    noFill();
    //transformations
    translate(300,225);
    rotate(radians(x/2));
    cony = max(y,.5);
    scale(cony/200);
    
    noStroke();
    fill(0);
    circle(0,0,270);
    g = g + x/3
    b = b + x/8
    //arcs (smallest to largest)
    noFill();
    stroke(255,0+g,0+b);
      arc(0,0,140,140,-PI/4,4*PI/5);
    rotate(radians(x/2));
      arc(0,0,180,180,PI/2,4*PI/3);
    rotate(radians(x/5));
      arc(0,0,200,200,PI,9*PI/4);
    rotate(radians(x/7));
      arc(0,0,270,270,11*PI/6,5*PI/6);
}

I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.

Looking Outwards 03: Computational Fabrication

G3DP2 is a newly designed additive manufacturing technology that is 3D printed to be a revolutionary instability and optical implementations. This new glass takes away uncertain variables and gives users and designers greater control of material and experience. G3DP2 is able to be altered for users’ needs in terms of thermal control to molding. To advance a traditional material such as glass is easily overlooked because of the long satisfaction we’ve already had with the material. However, with this, there is greater “flow control, spatial accuracy and precision, and faster production rates with continuous deposition of up to 30kg of molten glass”.

The algorithm and idea behind the new design and structure of G3DP2 are based on the preferences which are the manufacturing platform and structural system. The “geometric expression” is the column surface area, number of lobes, and the turning radius of the printer. A lighting system inside the column is also programmed to move with kaleidoscope-like patterns. The work of The Mediated Matter group is very similar to projects like this. They are inspired for natural design in nature and use computational design and various digital fabrication skills to mimic natural patterns and processes. G3DP2 is an accurate depiction of The Mediated Matter group’s goals and focus.

Project-02-Variable-Face

In addition to the faces, I tried making each variation bigger after each click, as if the image is approaching you. After a certain size, the image would revert back to the starting size but the variables are still different, giving a new look each time.

var eyesize = 30
var headwidth = 200
var headheight = 270
var headcolor = 255
var red = 0
var green = 0
var blue = 0
var hair = 230
var hairheight = 200
var hairR = 410
var hairheightR = 200
var hairsize = 50
var hairdifference = 10
var lefteyex = 270
var righteyex = 370
var eyeheight = 240
var mouthheight = 50
var tonguelength = 30
var bodysize = 500
var browstartleft = 240
var browstartright = 340
var browheight = 180
var browlength = 50


function setup() {
    createCanvas(640,480);

}

function draw() {
    background(red,green,blue);
  //body
    fill(random(90),random(90),random(90))
    ellipse(320,520,bodysize,400);
  //head
    fill(219, 181, 88);
    noStroke();
    ellipse(320,240,headwidth,headheight);
  //parameters
    if(headheight>400) {headheight=270,headwidth=200,
                        hair=230,hairheight=200,
                        hairR=410,hairheightR=200
                        hairsize=50,hairdifference=10
                        lefteyex=270,righteyex=370
                        eyeheight=230,mouthheight=50
                        tonguelength=30,bodysize=500
                        browstartright=340,browstartleft=240
                        browheight=180,browlength=50}
  //hair
    noFill();
    stroke(0,50);
    strokeWeight(5,);
    arc(hair,hairheight,hairsize,30,PI,0);
    arc(hair,hairheight-hairdifference,hairsize,30,PI,0);
    arc(hairR,hairheightR,hairsize,30,PI,0);
    arc(hairR,hairheightR-hairdifference,hairsize,30,PI,0);
  //eyes
    noStroke();
    fill(random(200,255),random(200,255),random(200,255))
    circle(lefteyex,eyeheight,eyesize);
    circle(righteyex,eyeheight,eyesize);
  //mouth
    fill(0);
    rect(250,300,140,mouthheight,50);
  //tongue
    stroke(241, 76, 88);
    arc(320,330,30,tonguelength,0,PI);
  //eyebrows
    noStroke();
    rect(browstartleft,browheight,browlength,10,30);
    rect(browstartright,browheight,browlength,10,30);

}

function mousePressed() {
  red = random(255);
  green = random(255);
  blue = random(255);
  headwidth += 25
  headheight += 30
  hair -= 10
  hairheight -= 5
  hairR += 10
  hairheightR -= 5
  hairsize += 7
  hairdifference += 2
  eyesize = random(50, 70);
  lefteyex -= 7
  righteyex += 7
  eyeheight -= 3
  mouthheight +=10
  tonguelength += 10
  bodysize += 30
  browstartleft -= 7
  browstartright +=7
  browheight = random(150,200);
  browlength += 7
}

Looking Outwards 02: Generative Art

Design has different mediums and some even unable to be seen by the human eye, but by using code, Joshua Davis used music to create art. He is a designer with a MoMa class on designing with sound, called Painting with Sound, and each piece is done differently or reacted to differently. Specifically, The Lament Configuration (2015) is a sporadic example of his computational design. The video is a frantic collage of abstract shapes and their relationships with the music. Incorporating an acoustic aspect to the art gave it transitions and dynamic of each shape a purpose. The smoothness of and the matching of the beat to the piece gave it a coherent flow when watching the video. Not only does the viewer see and hear the beats but the way the shapes are moving touches the viewer.

If coded the animation was reacting to something specific about the music. There could’ve been a variable that changed everything the music changed. When the beat was louder, or more intense the shape grew larger. In addition, the shape was constantly spinning. The spinning component can be a variable that changes the coordinates of the shape and the enlargement can be a variable that is affected by sound. The red color of the background stayed constant but the shape affected by the music is changing perspectives, which changed how light affects the shape. Maybe this is possible when the shapes react a certain size of coordinate the color changes, using an if else condition.

Joshua Davis has a different piece for every song he analyzes, but not only changing colors or shapes but the format of his piece. From the way the shapes are organized to how they move, each piece he has emits a different emotion, the same way music channels different emotions in everyone.

https://joshuadavis.com/MoMA-Classes-Painting-with-Sound

Self-Portrait

Portrait

function setup() {
    createCanvas(800,600);
    background(0);

}

function draw() {
    //reference grid
      stroke(80,80,80,10)
      line(0,100,799,100);
      line(0,200,799,200);
      line(0,300,799,300);
      line(0,400,799,400);
      line(0,500,799,500); // x grid lines
      line(200,0,200,599);
      line(400,0,400,599);
      line(600,0,600,599); // y grid lines
      noLoop();

    //background
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,150,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,250,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,350,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,450,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,550,50,50);

      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,150,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,250,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,350,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,450,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,550,50,50);

      fill(random(0,225),random(0,225),random(0,225));
          ellipse(300,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
          ellipse(500,50,50,50);

    //body
      fill(255,255,245);
      rect(200,430,400,300,90);
      fill(235,235,235);
      quad(275,430,370,470,350,410,280,420)
      quad(800-275,430,800-370,470,800-350,410,800-280,420)
      fill(20,20,20);
      line(290,510,290,599);
      line(510,510,510,599);
      textSize(15);
      text('15104',460,520);

    //headshape
      loop();
      fill(253, 211, 159);
      ellipse(400,300,270,300);
      stroke(0,0,0);
      strokeWeight(2);

    //nose
      stroke(0,0,0);
      strokeWeight(4)
      line(400,280,410,325);
      line(410,325,395,335);
      arc(390,335,10,5,PI,0);
      arc(400,335,7,3,PI,0);


    //mouth
      fill(0,0,0)
      noStroke();
      arc(390,380,60,35,0,PI);
      fill(255,255,255);
      arc(390,380,45,20,0,PI);

    //eyebrows
      fill(0,0,0)
      quad(315,280,370,270,360,260,325,268);
      quad(800-315,280,800-370,270,800-360,260,800-325,268);

    //eyes
      ellipse(340,280,30);
      ellipse(800-340,280,30);

    //glasses
      noFill();
      stroke(104,63,18);
      ellipse(340,280,80);
      ellipse(800-340,280,80);
      arc(400,290,40,15,PI,0)

    //hat
      fill(42,79,109);
      noStroke();
      arc(400,260,260,220,PI,0);
      fill(34,29,59,100);
      rect(273,230,255,30);
      fill(34,29,59);
      ellipse(400,150,20,20);

}