Month: October 2020

LookingOutwards- 06

This project <Noise Turbulence Doodles >was created by Raven Work.

I really enjoy this project because it is interactive and the logic is really simple. The user just needs to drag and draw in the interface and the art is created. The artist used the noise function to create this project that the objects wander around but remain smooth and organic. This artwork reminds me of the ancient Chinese legend that the fairy is flying on the colorful clouds but is presented in a modern way. Also, the randomness of the color creates a dreamy feeling.

Project 06: Abstract Clock

For my abstract clock I built it off the idea that we (or at least I), run on coffee. The day starts with a cup of coffee and is essentially continuously fueled by yet another cup. The clock begins with 12 empty cups on the screen that represent each hour in the AM or PM. Then with each minute – the coffee level increases in the cup until its filled, capped, and sleeved. Ticking along is a coffee bean counter that is representative of each second that goes by (the brewing/drip process) that helps fill the cup.

During the AM hours, the background represents a daytime sky with a sun. Then during PM hours, there is a night sky with a moon and randomly generated stars.

sketch

//Helen Cheng
//helenc1@andrew.cmu.edu
//Section C
//Project-06

var mugX = [];
var currH;
var starX = [];
var starY = [];

function setup() {
    createCanvas(480, 300);
    rectMode(CENTER);
    //initializes array with num of cups
    for (h=0; h<12; h++) {
        mugX[h] =  h*40 + 20
    }

    for (i=0; i< 20; i++) {
        starX[i] = random(width);
        starY[i] = random(height);
    }
}

function draw() {
    //colors sky based on AM or PM
    if(hour()<12){
        dayTime();
    }
    else{
        nightTime();
    }

    //draws table
    fill(235, 227, 218);
    rect(240, 250, 480, 200);

    //draws a coffee bean per second
    for(s =0; s<second(); s++){
        coffRow = Math.floor(s/20);
        coffeeBean(45 + 20*(s-20*coffRow), 200 + 30*coffRow);
    }
  
    //draws coffee cups depicting hours
    currH = hour()%12;
    for (h=0; h<12; h++) {
        if (h<currH){
          fill(92, 48, 7);
          strokeWeight(1);
          rect(mugX[h], height/2, 30, 50); 
          strokeWeight(0);
          ellipse(mugX[h], height/2 + 25, 30, 10);
          //cap
          fill(191, 155, 187);
          rect(mugX[h], height/2-25, 35, 10);
          ellipse(mugX[h], height/2-30, 25, 10);
          //cup sleeve
          rect(mugX[h], height/2, 35, 20);
        }
        else{
          fill(240, 234, 223);
          strokeWeight(1);
          rect(mugX[h], height/2, 30, 50); 
          arc(mugX[h], height/2 + 25, 30, 10, 0, PI);
        }
    }
  
    //fills coffee cup per minute
    for (m=0; m<minute(); m++) {
        strokeWeight(0);
        fill(92, 48, 7);
        ellipse(hour()%12*40 + 20, (height/2+25)-(m*50/60), 30, 10);
    }
}

function coffeeBean(x,y){
    strokeWeight(2);
    fill(92, 48, 7);
    ellipse(x, y, 10, 20);
    line(x, y-10, x, y+10);
} 

function nightTime() {
    background(35, 41, 94);
    fill(242, 242, 233);
    circle(width/3, height/5, 30);

    for (i=0; i< 20; i++) {
        circle(starX[i], starY[i], 5);
    }
}

function dayTime() {
    background(152, 210, 237);
    fill(245, 205, 103);
    circle(width/3, height/5, 40);
}

sketch of concept

Abstract Clock

sketchDownload
//Ian Lippincott
//ilippinc@andrew.cmu.edu
//Section: D
//Project-06-A

var c1;
var c2;
var s = second();

function setup() {
    createCanvas(480, 480);
    //Define background colors
    c1 = color(17, 19, 42);
    c2 = color(84, 17, 102);
    
}



function draw() {
	//Background
	setGradient(c1, c2);
	//Stars
	stroke(255);
	strokeWeight(2);
	point(30, 50);
	point(400, 80);
	point(250, 30);
	point(35, 200);
	point(100, 420);
	point(10, 370);
	point(400, 400);
	point(270, 430);
	noStroke();
	//Moon base
	//Light Moon Color
	fill(253, 242, 199);
	circle(240, 240, 320);

	//Moon shadow
	//Dark Moon Color
	fill(226, 199, 145);
	beginShape();
	vertex(240, 80);
	bezierVertex(25, 87, 25, 393, 240, 400);
	bezierVertex(100, 393, 100, 87, 240, 80);
	endShape();

	//Dark Spots
	circle(220, 260, 60);
	circle(320, 200, 25);
	circle(240, 140, 10);
	circle(180, 180, 10);
	circle(200, 200, 10);
	circle(340, 270, 20);
	circle(320, 290, 8);
	circle(290, 340, 20);
	circle(180, 330, 15);

	//Light Spots
	fill(253, 242, 199);
	circle(130, 220, 50);
	circle(145, 165, 20);
	circle(155, 320, 40);

	//Hour Counting Shadow
	fill(226, 199, 145, 170);
	beginShape();
	vertex(240, 80);
	bezierVertex(25, 87, 25, 393, 240, 400);
	bezierVertex(25 + hour() * (320 / 24), 393, 25 + hour() * (320 / 24), 87, 240, 80);
	endShape();

	//Minute Counting Cloud
	drawCloud(minute() * 8, 350);

	//Second Counting Witch
	drawWitch(-60 + second() * 480 / 60, 300);



}


//Makes Gradient Background
function setGradient(c1, c2) {
	noFill();
	for (var b = 0; b < height; b++) {
		var inter = map(b, 0, height, 0, 1);
		var c = lerpColor(c1, c2, inter);
		stroke(c);
		line(0, b, width, b);
	}
}


function drawCloud (x, y) {
	push();
	fill(80, 58, 96);
	translate(x, y);
	rect(0, 0, 120, 30, 12);
	rect(10, 10, 170, 30, 10);
	rect(-20, 20, 100, 30, 15)
	rect(30, 30, 100, 30, 20);
	rect(100, 20, 100, 20, 15);
	rect(100, 30, 140, 10, 15);
	pop();
}

function drawWitch (x, y) {
	translate(x, y);
	fill(39, 27, 53);
	ellipse(36, 48, 48, 20);
	strokeCap(ROUND);
	strokeWeight(4);
	stroke(39, 27, 53);
	line(36, 48, 140, 48);
	strokeCap(SQUARE);
	strokeWeight(1);
	beginShape();
	vertex(36, 38);
	bezierVertex(27, 36, 18, 40, 0, 47);
	bezierVertex(18, 55, 27, 60, 40, 50);
	endShape();
	angleMode(DEGREES);
	push();
	rotate(30);
	ellipse(95, -5, 32, 18);
	pop();
	push();
	rotate(-35);
	ellipse(60, 75, 32, 18);
	pop();
	beginShape();
	vertex(89, 18);
	bezierVertex(82, 26, 65, 29, 50, 28);
	bezierVertex(60, 30, 70, 38, 75, 45);
	endShape();
	beginShape();
	vertex(106, 21);
	vertex(108, 28);
	vertex(110, 34);
	vertex(102, 40);
	vertex(100, 38);
	vertex(95, 21);
	endShape();
	push();
	rotate(80);
	rect(40, -98, 25, 3);
	pop();
	push();
	rotate(30);
	rect(95, -40, 5, 3);
	pop();
	push();
	rotate(20);
	ellipse(105, -29, 12, 15);
	pop();
	beginShape();
	vertex(105, 15);
	bezierVertex(98, 10, 95, 8, 95, 3);
	bezierVertex(95, 4, 100, 6, 106, 2);
	endShape();
	


}

For this project, I wanted to create a clock that took inspiration from the Studio Ghibli movie Kiki’s Delivery Service. I make my design first in Illustrator.

LO 06 – Randomness

John Cage was an American composer who was one of the leading figures of the post-war avant-garde. While most of his work involved music and non-standard use of musical instruments, he also produced visual art. One project titled “Rocks” used randomness to determine the tools and placement of the objects being painted. Cage used computer-generated random numbers from a list which determined what group of stones would be used in his drawing/painting. He would then go through the same process to choose the brush/pencil he would use, and the position of the rocks. After this “seed” has been chosen, Cage would trace the rocks in their random positions. I particularly enjoy this work because of the simplicity in the randomness. While these pieces of art do not use complex algorithms to produce random results, they use random number generators to select the materials, and Cage is still able to physically contribute to the pieces. This is certainly a contrast to the work of Jackson Pollock, which appears to be completely random, but in the end, Pollock is controlling every splatter of paint. In the work of John Cage, his work looks so controlled, yet every aspect of it, aside from the shape of the rocks, is random.

Link: http://hanesgallery.wfu.edu/portfolio-item/johncagerocks/

Project-06: Abstract Clock

For the Abstract Clock project, I used a grid of 24 circles to denote the hour and the red circle as the second hand

https://editor.p5js.org/ssahasra/full/YVNbtFtzJ

[the p5.js embed code was not rendering so I uploaded a video of the p5.js preview]

https://editor.p5js.org/ssahasra/sketches/YVNbtFtzJ

LO-06: Paintings with Randomness

https://dhruvkaran.com/recreating-paintings-with-generative-art/https://dhruvkaran.com/recreating-paintings-with-generative-art/

Taking inspiration from the work of Jackson Pollock, I was interested in finding interesting ways in which artists have applied randomness in generative art, specifically using concepts like the random walk.I stumbled upon a website called Unography Mag where several famous paintings are recreated using randomness principles.

Based on this, artist Dhruv Karan recreated Vincent Van Gogh’s self-portrait is an appropriate example of using randomness in generative art. What I particularly enjoy about this work is that it gradually reveals the full picture, so someone watching it can spend time trying to guess what the picture is and therefore be engaged in the artwork. Applying Brownian motion and Perlin noise, Dhruv Karan used the tracing of the line across the canvas like a digital paintbrush.

It seems like while defining how the random walk of the line will happen, the algorithm uses a certain mapping of color to paint the picture, so a line on it’s a path in a way “deposits” color on the canvas to reveal a part of the painting. He also describes how pixels can be assigned rgb values for this artwork. It reminds me of how pointillism was used in painting, where the smallest unit is a point or pixel.

LO: Randomness

Vera Molnar’s “Interruptions” 1968-89

Vera Molnar comes to my mind when randomness in computational art is brought up. Molnar is one of the first artists who created art through code. One of her projects that really represent randomness is “Interruptions.” Molnar created these pieces by creating square grids with little lines with tilts to different tilts and then making some lines disappear to create forms. Each piece is all different as she used a limited random generator that varied x and y by two or three millimeters. I find the works very interesting as it mimics how straightly places lines can be “interrupted”, similar to a domino effect or even the lines repelling each other. She made these to create shapes with the interruption similar to how in painting there are shapes that pop out of the background. Her pieces seem fairly easy but so much more complex. As a woman, I admire her very much.

Vera Molnar: http://www.veramolnar.com/

Project 06: Abstract Clock

The idea here was to use a binary representation for a clock. Green is 1, red is 0. The clock hours with the back square as the MSB, while minutes have the back square as the LSB. If the back left square is green, that means it’s 8 o’clock, and if the back right square is green, that means it’s 8:01. The back building, tells whether it is afternoon or not. This is also the return of 3D space in my projects. Hooray.

yeeeeeeeeeeeeet

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

/* 
  Idea: Create a small town that tells the time based on what's "open."
  Doors will represent a binary pattern on each side of town.
  A building in the back tells whether it is am or pm.
*/

function draw() {
    background(0);

    fill(255);
    stroke("#FF00FF");

    // fill the floor and make a road
    drawCube(-10000, 200, 1, 20000, 0, 20000);
    fill(128);
    drawCube(-200, 200, 1, 400, 0, 20000);

    // draw am pm  tower
    fill("#800080");
    drawCube(-200, -400, 2400, 400, 600, 400);
    fill(hour() < 12 ? "#800000" : "#008000");
    drawCube(-100, -300, 2400, 200, 200, 0);

    // get time and store it
    let h = hour() % 12;
    let m = minute();

    var hStr = h.toString(2);
    var mStr = m.toString(2);

    // draw cubes and doors
    for (var i = 0; i < 4; i++) {
        fill("#800080");
        drawCube(200, -400, 1800 - (i * 500), 800, 600, 400);
        drawCube(-200, -400, 1800 - (i * 500), -800, 600, 400);
        
        // hour squares
        fill(hStr[i] == 1 ? "#008000" : "#800000");
        drawCube(-200, (i * -100), 1900 - (i * 500), 100, 100, 0);

        // minute squares
        fill(mStr[i] == 1 ? "#008000" : "#800000");
        drawCube(200, (i * -100), 1900 - (i * 500), -100, 100, 0);
        if (i > 1) {
            fill(mStr[i+2] == 1 ? "#008000" : "#800000");
            drawCube(200, 200 + (i * -100), 1900 - (i * 500), -100, 100, 0);
        }
    }

    
}

// the return of the 3d projection matrix

// uses projection matrix seen in this video:
// https://www.youtube.com/watch?v=ih20l3pJoeU
// the video is mostly math about projecting 3d coordinates to 2d coordinates
function projMatrixMult(coords) {
    // aspect ratio
    var a = width / height;

    // field of view
    var fov = HALF_PI;
    f = 1 / tan(fov / 2);

    // range of view
    var zNear = 0.1;
    var zFar = 1000;

    var q = zFar / (zFar - zNear);

    if (coords.length != 3) {
        print("Improper array size.");
        return coords;
    } else {
        // this calculates the result of multiplying [x, y, z, 1]
        // with a 4x4 projection matrix (not shown for lack of use without
        // the math.js extension)
        let projMat = [a * f * coords[0], f * coords[1], 
                       coords[2] * q - zNear * q, coords[2]];
        
        if (coords[2] != 0) {
            projMat[0] /= projMat[3];
            projMat[1] /= projMat[3];
            projMat[2] /= projMat[3];
            projMat[3] /= projMat[3];
            return projMat;
        } else {
            print("z is equal to 0");
            return coords;
        }
    }
}

// self explanatory
// note to self: add rotation parameters
// note to self: generalize for any number of points greater than 4 (later)
function drawCube(x, y, z, wid, hei, d) {
    // push 3d coords to an array
    let cubePoints3D = [];
    cubePoints3D.push([x, y + hei, z]); // front bottom left            0
    cubePoints3D.push([x, y, z]); // front top left                     1
    cubePoints3D.push([x + wid, y + hei, z]); // front bottom right     2
    cubePoints3D.push([x + wid, y, z]); // front top right              3
    cubePoints3D.push([x, y + hei, z + d]); // back bottom left         4
    cubePoints3D.push([x, y, z + d]); // back top left                  5
    cubePoints3D.push([x + wid, y + hei, z + d]); // back bottom right  6
    cubePoints3D.push([x + wid, y, z + d]); // back top right           7

    // get projection and add to list of points
    let cubeProj = [];
    for (let i = 0; i < cubePoints3D.length; i++) {
        cubeProj.push(projMatrixMult(cubePoints3D[i]));
    }

    // this scales the image to be on screen
    for (let i = 0; i < cubeProj.length; i++) {
        cubeProj[i][0] += 1;
        cubeProj[i][1] += 1;

        cubeProj[i][0] *= width / 2;
        cubeProj[i][1] *= height / 2;
    }

    // need 6 quads for the 6 faces of the cube, draw the further quads first
    // realistically, without camera movement or rotation, i can draw only
    // 5 quads and still have it look find regardless of placement
    // if i add rotation, i need to add conditionals for what is drawn first
    
    // back face
    quad(cubeProj[7][0], cubeProj[7][1], cubeProj[6][0], cubeProj[6][1],
        cubeProj[4][0], cubeProj[4][1], cubeProj[5][0], cubeProj[5][1]);
    
    // bottom
    quad(cubeProj[6][0], cubeProj[6][1], cubeProj[4][0], cubeProj[4][1],
        cubeProj[0][0], cubeProj[0][1], cubeProj[2][0], cubeProj[2][1]);

    // top
    quad(cubeProj[7][0], cubeProj[7][1], cubeProj[5][0], cubeProj[5][1],
        cubeProj[1][0], cubeProj[1][1], cubeProj[3][0], cubeProj[3][1]);

    if (x > 0) {
        // left
        quad(cubeProj[5][0], cubeProj[5][1], cubeProj[4][0], cubeProj[4][1],
            cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);

        // right
        quad(cubeProj[7][0], cubeProj[7][1], cubeProj[6][0], cubeProj[6][1],
            cubeProj[2][0], cubeProj[2][1], cubeProj[3][0], cubeProj[3][1]);
    } else {
        // right
        quad(cubeProj[7][0], cubeProj[7][1], cubeProj[6][0], cubeProj[6][1],
            cubeProj[2][0], cubeProj[2][1], cubeProj[3][0], cubeProj[3][1]);

        // left
        quad(cubeProj[5][0], cubeProj[5][1], cubeProj[4][0], cubeProj[4][1],
            cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);
    }
    
    // front
    quad(cubeProj[3][0], cubeProj[3][1], cubeProj[2][0], cubeProj[2][1],
        cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);

    // the lines are no longer necessary
}

Project 6: Abstract Clock

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

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

function draw() {
    noStroke();
    var x = random(0, 480);
    var y = random(0, 480);

// every second generate 1 random white star
    fill(255);
    circle(x, y, 3);

// every minute generate 1 cyan star
  if(second() == 59) {
      fill(0, 255, 255);
      circle(x, y, 10);
  }

// every hour generate 1 yellow star
  if (minute() == 59 & second() == 59) {
      fill(255, 255, 0);
      circle(x, y, 35)
  }
// when clock reaches 24 hr reset background to black
  if (hour() == 23 & minute() == 59 && second() == 59) {
      background(0);
  }
}

For this project, I was inspired by the concept of time and the universe, which is still yet to be fully discovered or understood. In my work, a second is represented by a small “white start” appearing into the “universe.” A minute is by a “blue star”, and an hour is represented by a yellow star. When the clock reaches 24 hours, the canvas is reset to black

The Universe

LO6: Randomness

Although artificial intelligence is not based entirely on randomness, from my understanding there is still an aspect of randomness that will aid the algorithm in its learning process. This song, “Blue Jeans and Bloody Tears,” is a song that has been generated after analyzing hundreds of Eurovision songs. I know that the randomness of this algorithm is not the main focus, but I believe that it is what led to the creation of this specific song. Most evolutionary algorithms randomly generate their first generation and if this is the case for Sweaty Machines’ AI, then I think that the song was formed in this direction due to the output of the AI. There must have been thousands of other ways this song could have been generated, but it just so happened to form in this manner. I find that complete randomness, while at times interesting, is much better when incorporated into the creation of less abstract works. Using randomness to generate something that anybody can parse and enjoy is truly impressive. For that reason, I appreciate this AI generated Eurovision song.

Feel free to take a listen to the song in question.