SectionE – Page 6 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards – 05

I admire the Weeping Woman by Carlos Ortega made in 2012. I admire the 3D quality of the character and cloth. The light and shadow are a big part of making this happen. I also admire how the colors blend together to set the mood for the work. The work is based on a version of the Mexican legend of “the weeping woman” and the song called “the weeping woman” by a Mexican band Califanes. I believe the colors, and how the character is posed, and how the ghosts are made reflect the creator’s sensibilities. It was made using Autodesk Mudbox, Autodesk Maya, mental ray, and Adobe Photoshop.

Carlos Ortega Elizalde | CG artist – The Weeping Woman (carlosortega3d.com)

Project 5 – Wallpaper

I was inspired by fruit slices and the cute illustrator aesthetic of fun summery-y wallpapers. There are 4 main types of types, when combined with various colors create a visually appealing pattern.

sketch

// Tsz Wing Clover Chau
// Section E

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

var nX;
var nY;
var n = 5;
var size;

var count1;
var count2 = 0;
var count3;
var swap = true;

let colors1 = [[230, 57, 70], [252, 213, 206], [255, 183, 3], [249, 220, 196], [231, 111, 81]];

let colors2 = [[254, 250, 224], [233, 237, 201], 
                            [236, 248, 248], [250, 237, 205], [255, 255, 255]];

function draw() {
    size = width/n;
    strokeWeight(3);

    ellipseMode(CENTER);

    for (var j = 0; j < n; j++){
        if (j %2 == 0){
            swap = false;
            count1 = 1;
            countUp = true;

            for (var i = 0; i < n; i++){
                fill(colors2[count1]);
                noStroke();
                rect(i*size, j*size, (i+1)*size, (j+1)*size);

                firstRow(i*size, j*size, size, i);

                if (countUp){
                    count1 += 1;
                } else {
                    count1 -= 1;
                }
                count1 = count1%5;
                swap = !swap;
            }

        } else {
            swap = true;
            count1 = 4;
            
            countUp = false;
            for (var i = 0; i < n; i++){
                fill(colors2[count1]);
                noStroke();
                rect(i*size, j*size, (i+1)*size, (j+1)*size);

                count2 += 1;
                count2 = count2%5;
                count3 = count2;

                secondRow(i*size, j*size, size, i, j);

                if (countUp){
                    count1 += 1;
                } else {
                    count1 -= 1;
                }

                count1 = count1%5;
                swap = !swap;
            } 
        }
    noLoop();
    }
}


function firstRow(x, y, r, i){
    if (swap){
        fill(colors1[count2]);
        if (i == 3){
            arc(x+r, y, r*(4/5), r*(4/5), HALF_PI, PI, PIE)


            push();
            noFill();
            stroke(50);
            arc(x+r, y, r, r, HALF_PI, PI, OPEN);
            pop();

            count2 += 1;
            count2 = count2 % 5;

            fill(colors1[count2]);
            arc(x+(r*0.05), y+(r*0.95), r, r, -HALF_PI, 0, PIE);

        } else {
            arc(x+(r*0.95), y+(r*0.95), r*0.75, r*0.75, PI, -HALF_PI, PIE);

            push();
            noFill();
            stroke(50)
            arc(x, y, r, r, 0, HALF_PI, OPEN);
            pop();

            count2 += 1;
            count2 = count2 % 5;

            fill(colors1[count2]);
            arc(x, y, r*(4/5), r*(4/5), 0, HALF_PI, PIE);
        }
    } else {
        fill(colors1[count2]);
        arc(x, y+r/2, r, r, -HALF_PI, HALF_PI, PIE);

        count2 += 1;
        count2 = count2 % 5;

        fill(colors1[count2]);
        arc(x+r, y+r/2, r*(4/5), r*(4/5), HALF_PI, -HALF_PI, PIE);

        push();
        noFill();
        strokeWeight(3);
        stroke(50);
        arc(x+r, y+r/2, r, r, HALF_PI, -HALF_PI, OPEN);
        pop();
    } 
}

function secondRow(x, y, r){
    if (swap){
        noFill();
        stroke(50);

        ellipse(x+r/2, y+r/2, r/3, r/3);

        noStroke();
        fill(colors2[count2]);
        ellipse(x+r/2, y+r/2, r/5, r/5);

    } else {
        fill(colors1[count3]);
        arc(x+r/2, y, r, r, 0, PI, PIE);
        count3 += 1;
        count3 = count3%5;
        fill(colors1[count3]);
        arc(x+r/2, y+r, r, r, PI, 0, PIE);
    }
}

Looking Outwards 05: 3D Computer Graphics

Artist: Don Mupasi
Work: “Adventures in Space” (2021)

The work I’ve chosen to look at is “Adventures in Space”, a collection of NFTs by Don Mupasi, a UK bAsed 3D visual artist and photographer.
One thing I admire is how effectively Mupasi is able to establish tone and atmosphere in his works. Each piece tells a story and the various small details catch the viewer’s attention, inviting to examine the work closer and learn more.

One of Mupasi’s major inspirations for his works include music he’s listened to or works he’s read, and these manifest in the scenes he creates. Speaking of his work, Mupasi says: “Visually, I try to convey this through scenes and compositions with a lot of color and exaggerated elements – like large suns, moons, hills, mountains, lush forests, etc. I place and move my characters in those scenes to convey certain feelings and meaning from those moments.”

“To The Moon”

The primary program he uses is Cinema 4D and After Effects. Given that his animations involve movement through space, he probably first renders the digital models in Cinema 4D and then combines them in After Effects, using layers and keyframe easing to fine tune the overall composition.

Links:
https://visualdon.uk/
https://www.skillshare.com/user/visualdon
https://foundation.app/@visualdon
https://medium.com/cryptocomnft/visualdon-discusses-his-roots-and-quitting-his-9-to-5-for-digital-art-2dc2e7282a4d

l.o. 5: 3D art

louie zong is a los angeles-based multidisciplinary artist working primary in freelance animation and instrumentation in jazz, pop, and blues. he uses blender, a free and open-source 3D creation software, to make music videos that feature lively, fun, and sculptural animations that are synced to the waveforms of their corresponding audio clips. (watch: quack!, elephant memories)

louie’s background is in 2D story art and illustration for children’s cartoons, and the color and textural style of his 3D work maintains those visual anchoring. because blender is meant to encompass the entirety of the 3D animation pipeline, I assume that he first models figures and then motivates them in a video editing format.

l.o. 4: sound art

l.o. 04
m. tayao
lab section E

‘the witness-machine complex’ examines how technological interventions in sound can and do mediate our ability to communicate with one another in tangible spaces. the case study of this project is the Nuremberg trials in 1945-1946, where then-newly developed electronic audio technology was used to enable live translation during court proceedings. the translation machines used red and yellow flashing lights to change the speed or repeat audio that was then fed into the headphones of the prosecutors and witnesses. often, these interventions would add confusion and stagnated time to the trials, pauses that were then cut from recordings of the proceedings.

in this exhibition, computational sound artists abu ham dam collected seven of these moments of confusion and re-enacts them using machines that mimic the technology of the translators used in 1945. he uses these staged moments to highlight how the relationship between testimony and the technologies that confer them disseminates and distorts how truth and justice operates in global contexts.

project 04: string art

for this project, I was inspired by the work of weaver and sculptor Ruth Asawa, who gained international recognition in the art world for her looped-wire sculptures and hanging mobiles. the most challenging part of this project was creating self-contained forms that intersected multiple times.

string art ruth asawa

/*  atayao
    lab section E
    project 04: string art
*/ 

// incrementing variables
var connectX = 150;    // starting x for all connecting lines
var connectY1a = 75;    // top of shape A
var connectY1b = 125;    // bottom of shape A
var connectY2a = 160;    // top of shape B
var connectY2b = 190;    // bottom of shape B
var connectY3a = 250;    // top of shape C
var connectY3b = 350;    // bottom of shape C
var xa = 200;    // y-point of top share
var xb = 50;    // y-point of middle shape
var xc = 120;    // y-point of bottom shape
var dx1a;    // change in x for top half of top shape
var dx1b;    // change in x for bottom half of top shape
var dx2a;    // change in x for top half of middle shape
var dx2b;    // change in x for bottom half of middle shape
var dx3a;    // change in x for top half of bottom shape

// number of lines that connect two anchors
var numLines = 15;

function setup() {
    createCanvas(300, 400);
    background(0);
    stroke(255);

    // ANCHOR LINES

    stroke(100);
    line(width/2, 0, width/2, 350);    // center line

    stroke(255);
    strokeWeight(1.5);
    // shape A
    line(100, 100, 200, 100);    // anchor 1A (horizontal)
    line(150, 75, 150, 125);    // anchor 1B (vertical)
    line(100, 100, 150, 75);    // anchor 2 (top-left diagonal)
    line(150, 125, 200, 100);    // anchor 3 (bottom-right diagonal)
    // shape B
    line(50, 175, 250, 175);    // anchor 4A (horizontal)
    line(150, 160, 150, 190);    // anchor 4B (vertical)
    line(50, 175, 150, 160);    // anchor 5 (top-left diagonal)
    line(150, 190, 250, 175);    // anchor 6 (bottom-right diagonal)
    // shape C
    line(120, 300, 180, 300);    // anchor 7A (horizontal)
    line(150, 250, 150, 350);    // anchor 7B (vertical)
    line(120, 300, 150, 350);    // anchor 8 (bottom-left diagonal)
    line(150, 250, 180, 300);    // anchor 9 (top-right diagonal)

    // INCREMENTS
    dx1a = (100-xa)/numLines;
    dx1b = (200-100)/numLines;
    dx2a = (250-50)/numLines;
    dx2b = (50-250)/numLines;
    dx3a = (180-120)/numLines;
    dx3b = (120-180)/numLines;
}

function draw () {
    stroke(200);    // color of connecting lines

    // TOP SHAPE
    // top half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY1a, xa, 100);
        xa += dx1a;
    }
    // bottom half
    xa = xa + dx1b
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY1b, xa, 100);
        xa += dx1b;
    }

    // MIDDLE SHAPE
    // top half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY2a, xb, 175);
        xb += dx2a;
    }
    // bottom half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY2b, xb + dx2b, 175);
        xb += dx2b;
    }

    // BOTTOM SHAPE
    // top half
    for (var i = 0; i <=numLines; i++) {
        line(connectX, connectY3a, xc, 300);
        xc += dx3a;
    }
    // bottom half
    xc  = xc + dx3b;
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY3b, xc, 300);
        xc += dx3b;
    }
    noLoop();
}

Project 05

Wallpaper Art – Floral pattern

sketch

// Theresa Ye
// Section E
// thye@andrew.cmu.edu
// Project-05

function setup() {
    createCanvas(400, 600);
    background(215,200,204);
}

function draw() {
     for (var x = 0; x < 450; x += 25) {
        for (var y = 0; y < 650; y += 30) {
            drawLeavesSmall(x,y);
        }
    }
    for (x = 25; x < 390; x += 50) {
        for (y = 25; y < 600; y += 60) {
            stroke(215,200,204)
            fill(176,142,149);
            ellipse(x,y,45)
        }
    }

    for (x = 25; x < 390; x += 50) {
        for (y = 25; y < 600; y += 60) {
            drawLeaves(x,y);
            drawFlower(x,y);
        }
    }
}

function drawFlower (x,y) {
    push();
    translate(x,y);
    scale(0.5)
    fill(188,164,170);
    stroke(215,200,204);
    strokeWeight(0.5);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(188,164,170);
    rotate(radians(120));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(188,164,170);
    rotate(radians(120));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(255);
    stroke(255);
    ellipse(0,0,10);
    pop();
}

function drawLeaves(x,y) {
    push();
    translate(x,y);
    scale(0.5);
    stroke(215,200,204)
    fill(176,142,149);
    ellipse(0,0,45)
    fill(141,99,110);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(90));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(145));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    pop();
}

function drawLeavesSmall(x,y) {
    push();
    translate(x,y);
    scale(0.25);
    stroke(215,200,204)
    fill(239,233,235);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(90));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(145));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    pop();
}

Project 5: Wallpaper

sketch

In this project I tried to create a set of repetitive diamond geometry and also a glowing effect that makes it look like it’s in 3D.

sketch


var r=50

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

function draw() {
    drawingContext.shadowBlur=20;
    drawingContext.shadowColor=color(20);   //glowing effect and black shadow
    noStroke();

    //first set of geometries
    for(var col=0;col<4;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondOne();
            pop();
        }
    }

    //second set of geometries
    for(var col=4;col<8;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondTwo();
            pop();
        }
    }

    //third set of geometries
    for(var col=8;col<12;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondOne();
            pop();
        }
    }

    //fourth set of geometries
    for(var col=12;col<16;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondTwo();
            pop();
        }
    }    
    

}


//first type of diamond
function diamondOne(){
    quad(0,0,r,r,r,2*r,0,r);
}


//second set of diamond
function diamondTwo(){
    quad(0,r,r,0,r,r,0,2*r);

}


//coloring the diamonds
function diamondColor(row){
    if(row%8==0){
        fill(22,76,122);
    }else if(row%8==1){
        fill(254,252,204);
    }else if(row%8==2){
        fill(255,190,14);
    }else if(row%8==3){
        fill(226,92,3);
    }else if(row%8==4){
        fill(119,147,172);
    }else if(row%8==5){
        fill(1,24,66);
    }else if(row%8==6){
        fill(224,28,1);
    }else if(row%8==7){
        fill(255,141,6);
    }
}

LO5: 3D Computer Graphics

In this week’s looking outward practice, I’m very interested in a 3D graphic art, Forest Diorama, designed by Roman Klčo. This piece of art portraits a forest scene with possibly 3D rendering methods. In general, the art creates a axonometric view of a certain part of land, putting trees, rocks and mountain slopes onto it, also simplifying it in more cartoonish shapes. These kind of art could be done with renderers like Blender, which is very interesting in making small scenes that tell stories.

https://dribbble.com/shots/5455348-Forest-Diorama

Looking Outwards -05

3d Computer Graphics

An artist in this field that I admire a lot is Omar Aqil. I first got to know him from his series of 3D recreations of famous Picasso paintings. Omar uses computer-generated imagery to portray three-dimensional aspects of two-dimensional drawings and represent them as renderings or animation. His works are very representative of the original paintings but with an almost cute twist because of the roundness of the three dimensional shapes he uses. I like these projects so much because they just add an extra depth to these familiar paintings and make them fun and interesting. Other than his mimicry series, Omar also has other series of portraits, products, and other sculptures that are dynamic in colour and depth. His renderings often incorporate organic aesthetic elements that contrast the “tech” feel of the piece, making the image look unreal and tangible at the same time.

Omar Aqil