Author: ~(ºwº)~

Randomness

This map of the US was created by Jasper Johns, and my grandmother has a version of it on her wall. Since I see it whenever I come to visit, I immediately thought of it for this week’s LO assignment. The randomness of the work comes from how the states’ borders are not clearly defined and paint is all over the place. Johns found a way to use 3 different colors together by blending them but also contrasting them. I admire the chaos of this piece, and wonder if there is any underlying message about the US. Although not particularly useful as a map, this is an incredibly cool painting.

Jasper Johns – Map – 1961

https://www.moma.org/collection/works/79372

Wallpaper

sketchDownload

function setup() {
    createCanvas(400, 600);
    background(182, 217, 214);
}

function draw() {
    noStroke();
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 6; j++) {
          fill(140, 110, 60);
          square(20+(i*100), 60+(j*100), 30);
          rect(20+(i*100), 20+(j*100), 5, 40);
          triangle(20+(i*100), 60+(j*100), 50+(i*100), 60+(j*100), 50+(i*100), 40+(j*100));
          circle(55+(i*100), 45+(j*100), 30);
          triangle(40+(i*100), 45+(j*100), 50+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
          triangle(70+(i*100), 45+(j*100), 60+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
          fill(255, 222, 33);
          ellipse(50+(i*100), 45+(j*100), 5, 10);
          ellipse(60+(i*100), 45+(j*100), 5, 10);
          fill(56, 83, 130);
          ellipse(70+(i*100), 80+(j*100), 25, 10);
          triangle(80+(i*100), 80+(j*100), 90+(i*100), 70+(j*100), 90+(i*100), 90+(j*100));
        }
    }
    noLoop();
}

I knew immediately that I wanted to do a cat patterned wallpaper. First I tried to break down what shapes I needed to represent a cat. Everything went well and I was able to draw it with p5js. I felt like it was missing something, so I added a fish for the cat to snack on. Once I drew the first cat and fish combo, put it in a nested for loop and changed the coordinates for each iteration. This quickly drew all of my cats for the complete wallpaper.

LO 5: 3D Computer Graphics

I am continuously amazed by the scale of Google Maps Street View / Google Earth. The fact that I can pick almost any road in the world and get a view as though I am there is insane. I love using it to look around my neighborhood and pretend that I’m taking a bike ride. Street View is also helpful when I’m going somewhere new. I appreciate that this compilation of images has been organized so that I can get a 3D view of so many places. I hope to encounter someone taking pictures to update the database. I know they are continuously retaking photos to ensure that Street View is up to date. I have no idea what specific methods they use to generate the 3D imaging, but I assume it’s all/mostly done by computers, since it would be a huge pain for humans to do it for the entire world. It is funny to see how some cars/trees/other objects in the environment are sometimes rendered badly. The computers are not perfect, but they do an amazing job.

https://www.google.com/streetview/

Sound Art

Ikue Mori makes interesting music using electronic drums. I love how she collaborates with multiple other artists to combine each of their unique sounds. It allows her to produce different mixtures of music. I also like how immersive it is with headphones. It always amazes me how people can get the “360º surround sound” by having each earbud play different sounds. Integrating this into the music really adds to the ambience. Mori previously used physical drums, but made the switch to electronic music. The partially computer generated sound probably comes from noises the computer makes that are then manipulated by the artist. Although these sounds come from a computer and are not organic noises from a physical instrument, Mori’s unique sound can still be heard across her works.

String Art

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;

function setup() {
    createCanvas(400, 300);
    background(200);
}

function draw() {
    drawLines(0, 50, 400, 200, 150, 300, 100, 100, 50);
    drawLines(100, 0, 300, 300, 150, 200, 350, 100, 50);
    drawLines(0, 200, 300, 100, 300, 300, 400, 300, 50);
    drawLines(350, 100, 300, 200, 150, 300, 350, 100, 50);
    noLoop();
}

function drawLines(x1, y1, x2, y2, x3, y3, x4, y4, numLines) {
  dx1 = (x3-x1)/numLines;
  dy1 = (y3-y1)/numLines;
  dx2 = (x4-x2)/numLines;
  dy2 = (y4-y2)/numLines;
  line(x1, y1, x3, y3);
  line(x2, y2, x4, y4);
  for (var i = 0; i <= numLines; i += 1) {
      line(x1, y1, x2, y2);
      x1 += dx1;
      y1 += dy1;
      x2 += dx2;
      y2 += dy2;
  }
}

Although my art isn’t super cool, I’m glad that I was able to write a method to draw shapes. Now I can spam it as many times as I want and just put in the parameters for where the lines should start and end 🙂

Dynamic Drawing

sketch 

function setup() {
    createCanvas(480,640);
    background(0);
}

function draw() {
    var shapeWidth;
    shapeWidth = Math.abs(mouseX - 240) / 2 + 80;
    background(0);
    fill(255, mouseY / 2.5, 0);
    ellipse(240, 180, shapeWidth, 200);
    fill(0, 255, mouseY / 2.5);
    ellipse(120, 440, shapeWidth, 200);
    fill(mouseY / 2.5, 0, 255);
    ellipse(360, 440, shapeWidth, 200);
}

I drew three circles that change color and width based on the mouse position. First I drew the circles and changed the colors, and then I decided that wasn’t complicated enough. Now they look super cool!

LookingOutwards-03

I love how this project is an intersection between an organic tree / physical origami and computer generated art. The structure is an interesting mix of structured and unstructured. Its shapes are relatively simple ellipses, but they’ve been stacked to look like a tree. Even without knowing that it’s supposed to be a tree, the shape is relatively clear. The design is super cool and futuristic! I wonder how much of the tree was computer generated / 3D printed and how much was made by hand. Since it’s origami, maybe some of it was made organically. I also have no idea what material may have been used. The creator does a great job blending generative art and traditional origami. The tree is very cool and futuristic, and I’d love to see other works by this artist.

^^The super cool tree :O

LO: Generative Art

I am looking at LIA’s artwork Nine Suns. This generative artwork is a video exclusively made with shades of red. Translucent arcs and lines of red overlap each other and create interesting images for the duration of the video. I admire how complex the video is even though it uses very basic shapes and 1 color. The algorithm used for the work is certainly complex, since it needs to generate shapes and move them around for 5 minutes. LIA has many other works with a similar style to this one. It is interesting that even though they are generating the art, their own unique style can still come through. When I first heard about generative artwork, I was skeptical of how a computer could generate anything interesting. LIA’s art has proven to me that this media can be used to create beautiful pieces.

Link: https://www.liaworks.com/videos/nine-suns/

Nine Suns, by LIA, from 2019

Images:


Project-02-Variable-Face

Variable-Face
var eyeSpacing = 80;
var noseLength = 120;
var mouthWidth = 120;
var mouthHeight = 100;

function setup() {
    createCanvas(480,640);
    background(200);
}

function draw() {
    //head
    fill(255,255,255);
    ellipse(240,320,360,440);
    //eyes
    fill(0,0,0);
    ellipse(240+eyeSpacing, 300, 50, 80);
    ellipse(240-eyeSpacing, 300, 50, 80);
    //nose
    fill(255);
    triangle(240, 300, 200, 300+noseLength, 280, 300+noseLength);
    //mouth
    arc(240, 400, mouthWidth, mouthHeight, 0, PI, CHORD)

    //check for user input
    if(mouseIsPressed) {
      eyeSpacing = random(50,100);
      noseLength = random(40,80);
      mouthWidth = random(120,240);
      mouthHeight = random(100,200);
    }
}

Phew I think I uploaded this correctly! Honestly the hardest part of the assignment was figuring out how to do the HTML stuff. Although very simple, I like my final product since it’s always smiling at me 😀

Project 1: My Self Portrait

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

function draw() {
noStroke()
fill(125,86,41)
circle(100,400,200)
circle(500,400,200)
circle(120,300,200)
circle(480,300,200)
circle(180,200,200)
circle(420,200,200)
fill(247,228,205)
ellipse(300,300,300,400)
fill(125,86,41)
circle(250,160,200)
circle(350,160,200)
ellipse(150,300,100,200)
ellipse(440,300,100,200)
circle(200,250,100)
circle(400,250,100)
fill(0,0,0)
ellipse(225,350,25,50)
ellipse(375,350,25,50)
circle(300,400,100)
fill(247,228,205)
square(250,300,100)
}

I’m really impressed with some of the portraits you guys made. Mine looks so lame in comparison lol