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

LookingOutwards-05

In her artwork, Nimbes, Joanie Lemeecier and James Ginzburg attempt to capture the paradox of observation: how as we observe and understand more rules and truths in our universe we understand that we know less and even that through a different lens these truths no longer apply. These digital artists use 3D rendering to compute a series of images that consist of small individual pieces that occasionally relate to each other to create a recognizable image of a church or tree canopy for example before exploding. This disintegration of the recognizable, the observable, represents the limits of our understanding and how the truths we may understand as the image of a church are in fact irrelevant. I find their work particularly interesting because it serves as a reminder of the chaos that exists outside our collective and individual perception of the universe.

LookingOutwards-05: 3D Computer Graphics

I looked at the project “Celestial Beings” by Jonas Pfeiffer, where he used computer graphics to create angles that are true to the description in the Old Testament. What I really admire about this object is that the artist utilizes elements the audience is familiar with but rearranges the elements to create something completely out of imagination. The freakish appearance with the familiar elements allows the audience to be both terrified and linger on the image. And through the manipulation of color, lighting, and other factors, the author made it resemble the description of an angle. I find it astonishing that computer graphics can realize one’s imagination or recreate mythical creatures that wouldn’t exist in real life.

It is most likely the author has modeled the objects in 3d modeling software and animated the object and put it through a renderer. The model might be generated through an algorithm that would pattern existing elements together, as shown by the clear repetitive elements in the angels.

It can be comprehended that the artist is interested in Christian mythology, but enjoy modern texturing as shown in the rendering style of the angels. The modern accent is also displayed in the rendering of the “Orphan”, where there are elements that seem to be written by markers on the giant eye.

Link: https://www.behance.net/gallery/152115365/Celestial-Beings

Project 05 Wallpaper

For making my wallpaper, I first drew the sketch below where I wanted there to be a striped background, flowers, and a curving dotted line behind the flowers that would connect them vertically. Once I achieved this, I adjusted some things like making the flowers have more layers and, instead of one stripe behind each flower column, I decided I liked many stripes better.

project5

// Rachel Legg / rlegg / Section C

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

function draw() {
    //blue stripes behind
    for(var x = 10; x <= width; x += 100){
        stripeBlue(x, 0);

    }

    // repeated curving line
    for (var y = 0; y < height + 20; y += 20){
        for(var x = 1; x < width; x += 2){
            noStroke();
            fill(255, 255, 224);
            circle((50 * x) - 40 * cos(radians(y * 1.85)), y + 5, 10);
        }
    }

    //flower
    for (var y = 40; y <= height; y = y + 100){
        for (var x = 50; x <= width; x += 100){
            flowerBlue(x, y);
        }
    }

noLoop();

}

function stripeBlue(x, y){
    noStroke();
    fill(119, 158, 203, 40);                   
    rectMode(CENTER);
    rect(x + 40, y + 300, 10, 600);
    rect(x + 20, y + 300, 5, 600);
    rect(x + 60, y + 300, 5, 600);
    rect(x + 0, y + 300, 5, 600);
    rect(x + 80, y + 300, 5, 600);
    //blue flowers every 100

}

function flowerBlue (x, y){
    //flower
    fill(185, 200, 220); 
    stroke(255, 255, 224);
    strokeWeight(0.75);
    ellipse(x + 8, y + 8, 35);
    ellipse(x - 8, y + 8, 35);
    ellipse(x + 8, y - 8, 35);
    ellipse(x - 8, y - 8, 35);
    //triple layer
    ellipse(x + 8, y + 8, 25);
    ellipse(x - 8, y + 8, 25);
    ellipse(x + 8, y - 8, 25);
    ellipse(x - 8, y - 8, 25);
    //double layer
    ellipse(x + 8, y + 8, 15);
    ellipse(x - 8, y + 8, 15);
    ellipse(x + 8, y - 8, 15);
    ellipse(x - 8, y - 8, 15);
    //center
    fill(255, 255, 224);         //light yellow
    ellipse(x, y, 10);
}

Looking Outward – 05

Eugene Golovanchuk (aka Skeeva) is an art director and 3D digital artist. His artwork uses “3D dark art surrealism, captivating in its cyberpunk flare.” Much of his work has a focus on fashion, developing outfits digitally. I chose to look specifically at his project “Oversized” made in March 2020 which was one of his personal projects where he wanted to learn how to use “Marvelous Designer” to simulate clothing and animation. This project shows animations of three different outfits (with a focus on oversized coats), and the video above shows the first outfit of the series. He uses imagery and animation to show off the garments he designed, and they are so cool. His artwork is fascinating as it seems so real, yet so out of this world and like nothing I have ever seen before. The patterns and textures are mesmerizing. I think this is also very interesting because so much of fashion is about texture and materiality, and Skeeva is able to achieve this kind of detail all through a computer.

Title: Oversized
Artist: Eugene Golovanchuk (Skeeva)
Link: https://theskeeva.com/oversized
https://theskeeva.com/work

3D Computer Art

The project that I found that was very beautiful was Alexey Kashpersky’s “Environment for Umakala Movie Project” released in 2016.

I admired the project because of the beautiful colors and structure that was used to create the abstract and otherworldly environment. It seemed like this project took a long time to create, and it shows in the details of each piece. The texture of the coral really brought this piece to life, and I can imagine a beautiful animated movie that happens in this world.

I know that the artist used ZBrush to create the world, VRay to render, and After Effects to comp it all together. I do not think there was an algorithm that was used to create this landscape. Rather I think the artist created this landscape completely by hand. He also used some floral elements and ice models that were created by his wife.

I am not sure what the movie project is about or if the artist captured what they were going for. I do know that a trailer of it came out in 2016, and all of the subtitles are in Chinese. I think the story is mythical, powerful, and mysterious based on the trailer. Therefore, I would say the artist’s sensibilities manifested well in the final form. The world he created is very mythical and mysterious.

Looking Outwards 04

While looking into sound and computational artwork, I stumbled upon the sonic exhibition ‘Rupture’ by Camille Norman. The work was a performance pieces in which a series of panel glass frames lay broken or shattered in a room with microphones hanging above that emit a vibration. I think this work was makes an interesting comment on the way sound waves and vibrations produce types of factures within the air. In some sense, these can seem random, but in others these waves can be manipulated to produce a certain outcome of experience. The idea of path in this sense is taken to understanding from the microphone to the experiencer’s ears. I think this in a sense relates to the paths of the computational design. Weaving and interweaving within each other to finally reach the eye at one given instant. Amongst the chaos and the parameters of these waves and progressions, there results a single moment in time of experience.

https://www.norment.net/work/objects-installations-ind/rapture/

Looking Outwards 03

I looked into the MAAD architecture thesis projects from the CMU School of Architecture. In particular, the work of professor Joshua Bard. What interested me about some of his work is the fact that I had actually taken his introductory class dealing with computational design. I was able to learn a few basic ideas on how to set up parameters to computational change a design, but looking further into his work, it’s interesting how he takes biological forms and ideas and applies the idea of mathematics and logics to it to generate modules. This made me think about how a ton of architecture is heavily influenced by the biology of the world and I often her the word “biomimicry” around the discussion of computational architecture and design. In many ways, without the development and advancement of the computer and the capabilities of a few functions, these newer generations of architectural design may not be as computational as they are now.

http://joshbard.com/

Looking Outwards 04

I admire this project as the system of connecting the alternating environment with the sound to create an immersive experience for the visitors. By having different sensors and converting the lighting variation and day-night cycle to usable data, it creates a series of changes to the visitors’ visual and acoustic movement. For the algorithms, they first used sensors or detectors to track the changes in lighting variation. Then, the 500 artificial neurons that are created will respond to the data converted by the detectors. This cycle continues so that the real-time data will be analyzed to create an immersive experience. The artificial neurons, they are running on the Attiny 85 with Arduino. In addition, since there are also LED lights inside, and they are placed in a hexagon shape, this kind of placement creates a sense of conflict with the continuously changing visual and acoustic movement. The overall experience will create a world that contains order and chaos. Therefore, I think it aims to create an immersive experience for the visitors.

Link: https://www.creativeapplications.net/environment/floating-codes-the-spatial-topology-of-an-artificial-neural-network/

floating-codes_prototype_2021_03 Download

This is my project 04.

sketch

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
//Inside-wing top left & bottom right
var dx1;
var dy1;
var dx2;
var dy2;
var numberLines = 15
function draw() {
    background(249,214,214);

    //background line-top left
    stroke(168,141,158);
    line(50,0,150,0);
    line(0,50,0,150);
    dx1 = (150-50)/numberLines;
    dy1 = (0-0)/numberLines;
    dx2 = (0-0)/numberLines;
    dy2 = (150-50)/numberLines;
    var x1 = 50;
    var y1 = 0;
    var x2 = 0;
    var y2 = 150;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }
    //background line-top right
    line(250,0,350,0);
    line(400,50,400,150);
    dx1 = (350-250)/numberLines;
    dy1 = (0-0)/numberLines;
    dx2 = (400-400)/numberLines;
    dy2 = (150-50)/numberLines;
    var x1 = 250;
    var y1 = 0;
    var x2 = 400;
    var y2 = 50;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        }

    line(0,150,0,250);
    line(150,300,50,300);
    dx1 = (0-0)/numberLines;
    dy1 = (250-150)/numberLines;
    dx2 = (50-150)/numberLines;
    dy2 = (300-300)/numberLines;
    var x1 = 0;
    var y1 = 150;
    var x2 = 50;
    var y2 = 300;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }
    line(400,150,400,250);
    line(250,300,350,300);
    dx1 = (400-400)/numberLines;
    dy1 = (250-150)/numberLines;
    dx2 = (350-250)/numberLines;
    dy2 = (300-300)/numberLines;
    var x1 = 400;
    var y1 = 150;
    var x2 = 350;
    var y2 = 300;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }    
    //feeler left
    stroke(146,63,75);
    line(185,80,190,75);
    line(197,117,203,115);
    dx1 = (190-185)/numberLines;
    dy1 = (75-80)/numberLines;
    dx2 = (203-197)/numberLines;
    dy2 = (115-117)/numberLines;
    var x1 = 185;
    var y1 = 80;
    var x2 = 203;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    //feeler right
    line(220,80,215,75);
    line(197,117,203,115);
    dx1 = (215-220)/numberLines;
    dy1 = (75-80)/numberLines;
    dx2 = (203-197)/numberLines;
    dy2 = (115-117)/numberLines;
    var x1 = 220;
    var y1 = 80;
    var x2 = 197;
    var y2 = 117;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke(63,41,54);
    line(130,50,130,110);
    line(280,140,280,230);
    dx1 = (130-130)/numberLines;
    dy1 = (110-50)/numberLines;
    dx2 = (280-280)/numberLines;
    dy2 = (230-140)/numberLines;
    var x1 = 130;
    var y1 = 50;
    var x2 = 280;
    var y2 = 230;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //Inside-wing top right & bottom left
    line(120,140,120,230);
    line(270,50,270,110);
    dx1 = (120-120)/numberLines;
    dy1 = (230-140)/numberLines;
    dx2 = (270-270)/numberLines;
    dy2 = (110-50)/numberLines;
    var x1 = 120;
    var y1 = 140;
    var x2 = 270;
    var y2 = 110;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    
    //Outside-top left
    stroke(189,135,134);
    line(110,20,110,115);
    line(200,115,200,130);
    dx1 = (110-110)/numberLines;
    dy1 = (115-20)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (130-115)/numberLines;
    var x1 = 110;
    var y1 = 20;
    var x2 = 200;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //Outside-top right
    line(290,20,290,115);
    line(200,115,200,130);
    let numLines = 10;
    dx1 = (290-290)/numberLines;
    dy1 = (115-20)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (130-115)/numberLines;
    var x1 = 290;
    var y1 = 20;
    var x2 = 200;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
}
    //Ouside-bottom left 
    line(100,135,110,260);
    line(200,125,200,140);
    dx1 = (110-100)/numberLines;
    dy1 = (260-135)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (140-125)/numberLines;
    var x1 = 100;
    var y1 = 135;
    var x2 = 200;
    var y2 = 125;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //Ouside-bottom right 
    line(300,135,290,260);
    line(200,125,200,140);
    dx1 = (290-300)/numberLines;
    dy1 = (260-135)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (140-125)/numberLines;
    var x1 = 300;
    var y1 = 135;
    var x2 = 200;
    var y2 = 125;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //bottom patterning
    stroke(107,87,104)
    line(150,150,170,150);
    line(130,180,150,180);
    dx1 = (170-150)/numberLines;
    dy1 = (150-150)/numberLines;
    dx2 = (150-130)/numberLines;
    dy2 = (180-180)/numberLines;
    var x1 = 150;
    var y1 = 150;
    var x2 = 150;
    var y2 = 180;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    line(225,150,245,150);
    line(245,180,265,180);
    dx1 = (245-225)/numberLines;
    dy1 = (150-150)/numberLines;
    dx2 = (265-245)/numberLines;
    dy2 = (180-180)/numberLines;
    var x1 = 225;
    var y1 = 150;
    var x2 = 265;
    var y2 = 180;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //upper patterning
    line(145,90,155,90);
    line(140,105,150,105);
    dx1 = (155-145)/numberLines;
    dy1 = (90-90)/numberLines;
    dx2 = (150-140)/numberLines;
    dy2 = (105-105)/numberLines;
    var x1 = 145;
    var y1 = 90;
    var x2 = 150;
    var y2 = 105;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    line(245,90,255,90);
    line(250,105,260,105);
    dx1 = (255-245)/numberLines;
    dy1 = (90-90)/numberLines;
    dx2 = (260-250)/numberLines;
    dy2 = (105-105)/numberLines;
    var x1 = 245;
    var y1 = 90;
    var x2 = 260;
    var y2 = 105;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
}

Project-04-String Art

sketch

// Emily Franco
// efranco
// Section C

//num of string lines
var numLines = 50;

//base lines
var dx1;
var dy1;
var dx2;
var dy2;

//string lines
var x1;
var y1;
var x2;
var y2; 

//counts sets of lines
var setCount = 0;

//line points
var lnx1; 
var lny1;
var lnx2;
var lny2;

//colors
r = 0; 
g = 0; 
b = 0;
function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background ("white");
}

function draw() {
	var halfW = width/2;
	var halfH = height/2;
	
	if (setCount == 0){
		//-----first line set--------
		lnx1 = 0; 
		lny1 = 0;
		lnx2 = width/10;
		lny2 = height-(height/12);
	}else if (setCount == 1){
		//-----second line set--------
		lnx1 = width/10; 
		lny1 = height-(height/12);;
		lnx2 = halfW;
		lny2 = height-(height/7);
	}else if (setCount == 2){
		//-----third line set--------
		lnx1 = halfW; 
		lny1 = height-(height/7);
		lnx2 = width-(width/6);
		lny2 = height-(height/2);
	}else if (setCount == 3){
		//-----fourth line set--------
		lnx1 = width-(width/6); 
		lny1 = height-(height/2);
		lnx2 = width-(width/3);
		lny2 = 0;
	}else if (setCount == 4){
		//-----fifth line set--------
		lnx1 = width-(width/3); 
		lny1 = 0;
		lnx2 = width/2;
		lny2 = height/8;
	}else if (setCount == 5){
		//-----fifth line set--------
		lnx1 = width/2; 
		lny1 = height/8;
		lnx2 = width/9;
		lny2 = height/9;
	}else if (setCount>5){
		//stop looping
		noLoop();
	}

	//generate random colors
	r = random (255);
	g = random (255);
	b = random (255);

	push();
	noStroke();
	//fill trangle between base lines
	fill (r,g,b,100);
	beginShape();
	vertex (lnx1,lny1);
	vertex (halfW,halfH);
	vertex (lnx2,lny2);
	endShape();
	

	//draw base lines
	line(halfW,halfH,lnx1,lny1);
	line(halfW,halfH,lnx2,lny2);

	pop(); 

	//get position increment for string line
	dx1 = (halfW-lnx1)/numLines;
	dy1 = (halfH-lny1)/numLines;
	dx2 = (lnx2-halfW)/numLines;
	dy2 = (lny2-halfH)/numLines;

	//reset string postions
	x1 = lnx1;
	y1 = lny1;
	x2 = halfW; 
	y2 = halfH;

	for (var i = 0; i<numLines; i+=1){
		//inverted stroke color
		stroke (255-r,255-g,255-b,150);
		//draw string lines
		line (x1,y1,x2,y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
	}

	setCount += 1;
}