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

Project 6: Abstract Clock

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {
    background(241, 225, 174);
    
    //background elements art
    stroke(0);
    noFill(); 
    ellipse(300, 360, 90); //minute ellipse outline
    triangle(350, 30, 430, 90, 410, 105); //top r corner triangle
    fill(41, 72, 108, 220); //blue quad
    quad(170, 100, 190, 270, 290, 320, 60, 450);
    fill(41, 72, 108, 180); //blue circle
    ellipse(300, 160, 40);
    fill(120, 79, 58, 220); //brown quad
    quad(50, 160, 130, 370, 340, 465, 180, 350);
    fill(226, 170, 56, 150); //yellow circles
    ellipse(110, 300, 130);
    ellipse(180, 30, 30);
    
    push();
    noStroke();
    fill(192, 50, 47, 220);  //red triangle and ellipse
    triangle(80, 35, 135, 90, 20, 130);
    ellipse(230, 450, 25);
    fill(120, 79, 58, 200); //brown triangle
    triangle(270, 240, 430, 380, 240, 350);
    fill(0);    //black triangle
    triangle(380, 350, 440, 400, 370, 390);
    pop();

    //hours red arc
    push();
    translate(300, 200);
    rotate(-135);
    hr();
    pop();

    //wavy lines
    push();
    noFill();
    strokeWeight(2);
    strokeCap(SQUARE);
    translate(370, 200);
    rotate(30);
    bezier(40, -40, -40, -40, 40, 40, -40, 45);
    translate(10, 10);
    bezier(35, -35, -40, -40, 35, 35, -20, 35);
    pop();

    //minutes yellow arc
    push();
    translate(300, 360);
    rotate(-90);
    scale(.5);
    mins();
    pop();

    //seconds black line
    push();
    translate(240, 240);
    rotate(-135);
    sec();
    pop();
}

//hours, minutes, seconds functions
function hr() {
    var h = hour();
    noFill();
    strokeCap(SQUARE);
    strokeWeight(10);
    stroke(192, 50, 47);
    var hourHand = map(h % 24, 0, 24, 0, 360);
    arc(0, 0, 200, 200, 0, hourHand);
}

function mins() {
    push();
    var m = minute();
    noFill();
    strokeCap(SQUARE);
    strokeWeight(80);
    stroke(226, 170, 56, 200);
    var minHand = map(m, 0, 60, 0, 360);
    arc(0, 0, 100, 100, 0, minHand);
    pop();
    push();
    fill(0);
    ellipse(0, 0, 50);
    pop();
}

function sec() {
    var s = second();
    strokeCap(SQUARE);
    strokeWeight(10);
    stroke(0);
    var secHand = map(s, 0, 60, 0, 360);
    rotate(secHand);
    line(0, 0, 150, 150);
}

For my project, I was inspired by Bauhaus art and design and decided to make an abstract clock based on abstract artwork. When I started the project, I knew I wanted to use a combination of basic graphic elements to represent time instead of making a representational scene. After looking through some Bauhaus work, I found Kandinsky’s “Arch and Point” (1923). I think that the composition and interaction of shapes is really pleasing in this painting.

I did some quick sketches to think about what elements could represent elements of time. I simplified the composition to capture the most prominent elements of the piece and used the red arc to represent hours, the yellow arc to represent minutes, and the black line to represent seconds for a 24-hour clock.

LO 6 – Randomness

Kenneth Martin was an English artist who mainly created non-representational/abstract art using geometric shapes. Martin drew inspiration from the work of Kasimir Malevich and Alexander Calder, interested in exploring spatial relationships between simple structural elements.

“Chance and Order” (1971) is one of my favorite pieces by Martin, and I think that his process of creating this artwork is quite fascinating. Randomness played a significant role in producing the final work, yet his approach was very organized and systematic, hence the name “Chance and Order” which describes his process and method. I found the following explanation regarding his process for the “Chance and Order” series of work: “The points of intersection on a grid of squares are numbered and the numbers are written on small cards and picked at random…A line is made between each successive pair of numbers as they are picked out” (Understanding Uncertainty).

I admire the simplicity of Martin’s work and find that while his pieces only utilize basic graphic/geometric elements, they are still very visually intriguing.

Chance, Order, Change 6 (Black) 1978-9
More about Martin’s process

Project 5: Wallpaper

wallpaper cb

function setup() {
    createCanvas(600, 600);
    noLoop();
}

function draw() {
    background(249, 220, 180);

    //grid pattern background
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y <= height; y += 20) {
        push();
        translate(x, y);
        grid();
        pop();
        }
    }

    //columns of 4 eggs
    for (var x = 56; x <= 560; x += 164) {
        for (var y = 72; y <= 522; y += 150) {
        push();
        translate(x, y);
        rotate(radians(-20));
        egg();
        pop();
        }
    }

    //columns of 3 eggs
    for (var x = 140; x <= 470; x += 164) {
        for (var y = 150; y <= 450; y += 150) {
        push();
        translate(x, y);
        rotate(radians(30));
        scale(.85);
        egg();
        pop();
        }
    }

    //columns of 3 bacons
    for (var x = 50; x <= 546; x += 164) {
        for (var y = 144; y <= 450; y += 150) {
        push();
        translate(x, y);
        rotate(radians(20));
        scale(.5);
        bacon();
        pop();
        }
    }

    //columns of 4 bacons
    for (var x = 140; x <= 472; x += 162) {
        for (var y = 70; y <= 538; y += 152) {
        push();
        translate(x, y);
        rotate(radians(-280));
        scale(.7);
        bacon();
        pop();
        }
    }
}

function egg() {
    fill(255);  //white
    noStroke();
    ellipse(-11, -14, 40, 42);
    ellipse(-7, 21, 50, 48);
    beginShape();
    curveVertex(4, -28);
    curveVertex(4, -28);
    curveVertex(23, 10);
    curveVertex(9, 40);
    curveVertex(9, 40);
    endShape();
    beginShape();
    curveVertex(-27, -10);
    curveVertex(-27, -10);
    curveVertex(-10, -10);
    curveVertex(-27, 10);
    curveVertex(-27, 10);
    endShape();

    fill(255, 200, 100);  //yolk
    ellipse(-2, 5, 30);
    noFill();
    stroke(255);
    strokeWeight(3);
    arc(-2, 5, 20, 20, HALF_PI, PI);
}

function bacon() {
    noFill();
    strokeWeight(8);
    strokeCap(SQUARE);
    stroke(147, 73, 0);
    bezier(35, -25, -40, -40, 40, 40, -35, 35);
    push();
    translate(13, 13);
    bezier(35, -25, -40, -40, 40, 40, -35, 35);
    pop();
}

function grid() {
    rectMode(CENTER);
    noStroke();
    fill(255, 175, 148, 150);
    rect(0, 0, 17, 17);
}

For this project, I was inspired by my water bottle, which has an eggs and bacon design on it. I decided to make my own pattern and have included some of my initial sketches below. I wanted to play with custom shapes, specifically curveVertex and bezier curves, as well as arcs. To add visual interest, I experimented with shifts in scale and rotation in creating an alternating pattern of eggs and bacon.

LO 5 – 3D Computer Graphics

Alexis Christodoulou is a self-taught 3D artist whose work focuses on imaginary environments. He works on a range of creative projects, from commercial to personal, and produces his work using 3D computer graphics software. More specifically, Christodoulou uses Cinema4d and Redshift for rendering, additionally using Adobe CC for post-production edits.

I particularly like the editorial designs that he created for Icon Design Italy in 2019. He designed two covers and several other renders of dreamy, open spaces for the magazine. Christodoulou’s work is incredibly intriguing and visually appealing due to the highly realistic, serene compositions. I admire his sophisticated use of color to evoke certain emotions and creativity in imagining dream-like environments. I think that his use of direct natural light in his renders is very successful, in that it gives a very soothing, airy feeling to his work.

Project 4: String Art

string art cb

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 200;

function setup() {
    createCanvas(400, 300);
    background(200);
    line(0, 0, 0, 300);
    line(0, 300, 400, 300);
    dx1 = (0-0)/numLines;
    dy1 = (300-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (300-300)/numLines;
}

function draw() {
    strokeWeight(.5);
    background(0);

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    for (var i = 0; i <= numLines; i += 1) {

        //bottom left corner
        stroke(mouseX, mouseY, 100);
        line(x1, y1, x2, y2);
        //top right corner
        line(x1 + 400, y1, x2, y2 - 300);
        //moving lines Y
        stroke(mouseY, 100, mouseX);
        line(i*4, mouseY, 400, 0);
        line(0, 300, i*4, mouseY);
        line(i*4, mouseY, 0, 0);
        line(400, 300, i*4, mouseY);
        //moving lines X
        stroke(mouseX, 100, mouseY);
        line(mouseX, i*3, 400, 0);
        line(0, 300, mouseX, i*3);
        line(mouseX, i*3, 0, 0);
        line(400, 300, mouseX, i*3);
      
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

My approach to this project involved a lot of trial and error but I had fun experimenting with different parts of the code and seeing what I could make. I wanted to make something interactive, so I made the colors change and the lines follow the mouse position.

LO 4 – Sound Art

For this week’s LO, I was inspired by Adrien Kaeser’s “Weather Thingy” (2018), which is a unique sound controller that utilizes real-time climate data to control and produce music. The device consists of a weather station with 3 climate sensors (a rain gauge, wind vane, and anemometer) that is connected to a custom-built controller. The controller has an interface that enables it to assign the parameters received to audio effects, translating the climate data into midi data for interpretation by musical instruments.

I enjoyed learning about this project because of how it functions in real-time using sensors that collect and interpret data to produce new and different sounds. I thought that the music in the video was very calming and nice to listen to. I’m curious about what sounds would be produced by different types of weather, such as a heavy rain/storm or hot, dry day.

“Weather Thingy” demo video

Project 3: Dynamic Drawing

dynamic drawing cb

var size = 100;
var diam = 50;
var dir = 1;
var speed = 2;

function setup() {
    createCanvas(450, 600);
}

function draw() {
    //color-changing background and stroke
    background(10, 10, mouseX/2);
    stroke(255-mouseX/2, 255-mouseY/2, 255-mouseX/2);
    
    //center of canvas
    var x = width/2;
    var y = height/2;

    //constrain mouse position on canvas
    mouseX = constrain(mouseX, 0, width);
    mouseY = constrain(mouseY, 0, height);

    //inner flower circles rotate depending on mouseX
    strokeWeight(1.5);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 50);
    for (var i = 0; i < 5; i += 1) {
        push();
        translate(x, y);
        rotate((mouseX / 400) + radians(360 * i / 5));
        ellipse(50, 0, 100, 100);
        pop();
    }

    //outer flower circles rotate depending on mouseX
    strokeWeight(1);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 30);
    for (var i = 0; i < 8; i += 1) {
        push();
        translate(x, y);
        rotate((-mouseX / 400) + radians(360 * i / 8));
        ellipse(50, 0, 250, 250);
        pop();
    }

    //outermost circles rotate and change size depending on mouseY
    strokeWeight(1);
    noFill();
    var m = max(min(mouseY, 600), 0);
    var size = m * 180 / 600 + 30;
    for (var o = 0; o < 50; o += 1) {
        push();
        translate(x, y);
        rotate((mouseY / 500) + radians(360 * o / 50));
        ellipse(300, 0, size, size);
        pop();
    }

    //center expanding contracting circle
    strokeWeight(3);
    noFill();
    ellipse(x, y, diam, diam);
    diam += dir * speed;
    if (diam > 400) {
        dir = -dir;
        diam = 400;
    } else if (diam < 0) {
        dir = -dir;
        diam = 0;
    }

    //converging lines that follow the mouse position
    //converging lines right
    strokeWeight(1);
    line(450, 0, mouseX, mouseY);
    line(450, 50, mouseX, mouseY);
    line(450, 100, mouseX, mouseY);
    line(450, 150, mouseX, mouseY);
    line(450, 200, mouseX, mouseY);
    line(450, 250, mouseX, mouseY);
    line(450, 300, mouseX, mouseY);
    line(450, 350, mouseX, mouseY);
    line(450, 400, mouseX, mouseY);
    line(450, 450, mouseX, mouseY);
    line(450, 500, mouseX, mouseY);
    line(450, 550, mouseX, mouseY);
    line(450, 600, mouseX, mouseY);

    //converging lines left
    strokeWeight(1);
    line(0, 0, mouseX, mouseY);
    line(0, 50, mouseX, mouseY);
    line(0, 100, mouseX, mouseY);
    line(0, 150, mouseX, mouseY);
    line(0, 200, mouseX, mouseY);
    line(0, 250, mouseX, mouseY);
    line(0, 300, mouseX, mouseY);
    line(0, 350, mouseX, mouseY);
    line(0, 400, mouseX, mouseY);
    line(0, 450, mouseX, mouseY);
    line(0, 500, mouseX, mouseY);
    line(0, 550, mouseX, mouseY);
    line(0, 600, mouseX, mouseY);

}

For this project, I was inspired by guided breathing/meditation animations and wanted to use motion/simple shapes to create something soothing and mesmerizing. I used circles to create a rotating flower and practiced using transformations, expanding/contracting, push/pop, and mouse interactions. Below are some inspiration images:

fireworks animation on SmaPhoArt website

LO 3 – Computational Fabrication

I am inspired by Elisa Stroyk’s “Wooden Carpet” (2009) because of the fascinating form, which is a hybrid surface that combines textiles and furniture. The form and material highly contrast each other, as a rug is typically thought of as soft and flexible while wood is more rigid and hard. I think that the way that these properties have blended in this project is quite interesting. In terms of the technical creation of the work, I believe that the geometric shapes were algorithmically developed, laser-cut out of wood, and then bonded to a textile backing.

Stroyk’s work is driven by her interest in material and presumptions about material, rethinking form and function in everyday objects. The flexibility and modularity of this project reflect that though parametric 3D fabrication involves rules, there are infinite possibilities and combinations.

Project 2: Variable Face

variable face cb

var eyeWidth = 55;
var eyeHeight = 70;
var eyeColor = 10;
var earHeight = 180;
var faceWidth = 300;
var faceHeight = 230;
var backgroundR = 245;
var backgroundG = 200;
var backgroundB = 175;
var dressR = 240;
var dressG = 90;
var dressB = 160;
var blushWidth = 30;
var blushHeight = 15;
var bodyWidth = 120;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var centerX = width / 2
    var centerY = height / 2
    background(backgroundR, backgroundG, backgroundB);

    //body
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY + 120, bodyWidth, 50);
    rect(centerX - (bodyWidth / 2), centerY + 120, bodyWidth, 300);

    //ears
    var earLX = centerX - 55
    var earRX = centerX + 55
    var earLH = centerY - earHeight
    var earRH = centerY - earHeight
    stroke(95, 130, 255);
    strokeWeight(10);
    fill(255, 130, 130);
    triangle(centerX - 115, centerY - 60, earLX, centerY - 60, centerX - 70, earLH);
    triangle(centerX + 115, centerY - 60, earRX, centerY - 60, centerX + 70, earRH);

    //dress
    noStroke();
    fill(dressR, dressG, dressB);
    triangle(centerX - 60, height, centerX + 60, height, centerX, centerY - 100);

    //face
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY, faceWidth,  faceHeight);

    //hair
    //left
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 35, centerY - 90);
    curveVertex(centerX - 50, centerY - 50);
    curveVertex(centerX - 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //center
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 15, centerY - 70);
    curveVertex(centerX, centerY - 35);
    curveVertex(centerX + 15, centerY - 70);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //right
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX + 35, centerY - 90);
    curveVertex(centerX + 50, centerY - 50);
    curveVertex(centerX + 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();

    //eyes
    var eyeLX = centerX - faceWidth * 0.25;
    var eyeRX = centerX + faceWidth * 0.25;
    noStroke();
    fill(255);
    ellipse(eyeLX, centerY, eyeWidth, eyeHeight);
    ellipse(eyeRX, centerY, eyeWidth, eyeHeight);
    //eye black
    noStroke();
    fill(eyeColor);
    ellipse(eyeLX - 5, centerY + 5, 48, 60);
    ellipse(eyeRX - 5, centerY + 5, 48, 60);
    //eye highlight
    noStroke();
    fill(255);
    triangle(eyeLX, centerY, eyeLX + 20, centerY - 10, eyeLX + 20, centerY + 10);
    triangle(eyeRX, centerY, eyeRX + 20, centerY - 10, eyeRX + 20, centerY + 10);

    //blush
    noStroke();
    fill(210, 150, 170);
    ellipse(eyeLX + 2, centerY + 55, blushWidth, blushHeight);
    ellipse(eyeRX + 2, centerY + 55, blushWidth, blushHeight);

   
    //mouth
    if (mouseY <= (centerY)) {
        //smile
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 32, centerY + 60);
        curveVertex(centerX + 32, centerY + 60);
        endShape();
    } else if (mouseY > centerY) {
        //frown
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 25, centerY + 70);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(280, 330);
    faceHeight = random(210, 300);
    eyeWidth = random(50, 60);
    eyeHeight = random(65, 75);
    eyeColor = random(0, 100);
    backgroundR = random(170, 255);
    backgroundG = random(170, 170);
    backgroundB = random(170, 200);
    blushWidth = random(25, 40);
    blushHeight = random(5, 25);
    bodyWidth = random(110, 150);
    dressR = random(130, 255);
    dressG = random(80, 170);
    dressB = random(110, 150);
    earHeight = random(160, 200);
}

My inspiration for this project was Rosie, a character from the game Animal Crossing. I played around with the variability of the size of the eyes, face, blush, and body as well as the color of the eyes, background, and dress. When creating the two mouth facial expressions, I also explored if statements and curves. Below is a picture of Rosie and my initial Illustrator sketch!

LO 2 – Generative Art

“the V01D” (2018) by Joshua Davis is a generative work that utilizes audio reactive algorithms to create fascinating, complex imagery. This piece was a large-scale installation created for the OFFF Festival in Barcelona. Davis has created numerous computational art/design projects, many of which use programming to visualize sound.

I really admire Davis’s work because of the unique, ever-changing visuals that he is able to achieve and am interested to learn more about the execution of his work. From what I can tell, I think that Davis used real-time algorithms that respond to audio in order to generate transformative animations. In this specific work, he used Kurt Uenela / Null + Void’s music to determine the motion of the piece.

Some of Davis’s other works that I am particularly drawn to include “Golden Times,” “Take 10 Weightless,” and “Noise Paintings.” Across all of his works, his strong color sensibility is quite evident. I think that his understanding of color and visual composition are what make his work so successful.