Month: September 2022

Looking Outwards-02

Music has always been a large aspect of my life, as my daily routine essentially revolves around it. Whether I’m getting ready in the morning, studying, or cooking, there’s always some kind of playlist being played. After perusing through a variety of generative art creators, I discovered an artist that also shared a love for music.

Toni Mitjanit is well known for their ‘Spaghetti Coder’, a project that has a complex and tangled control structure that creates rhythm through motion and sound. I admire the blend Mitjanit created between art and mathematics, and their goal of modeling nature’s appearance, motion, and sound. The interesting variations of Mitjanit’s coded designs give off a sensual and “vibey” feel when you watch them on top of music, and I can definitely see them being played at festivals or concerts.

AAAC (An Autonomous Agent Coder) from Spaghetti Coder on Vimeo

Mitjanit uses a combination of different mathematical tools (i.e. trigonometry, calculus, matrices, etc.) with programming languages like C++, Java, Processing, and openFrameworks in order to generate these unique visuals. If Mitjanit wants to include an user interaction aspect to their artwork, they also utilize communication hardware like MIDI, OSC, or DMX protocols. I think my favorite usage of programming and media that Mitjanit used was using fractal brownian noise as texture a piece involving for geometric lines and patterns.

Mitjanit’s artistic sensibilities can be clearly seen throughout their algorithm, the play between mathematics and physics coupled with their creative nature-centered concepts are a work of art, and a step forward in the mix between modernization and appreciation for our environment.

aarnavp – Project 2 Variable Face

sketch

The pupils follows your cursor!

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var r = 220;
var g = 220;
var b = 220;
var faceW = 150; 
var faceH = 150;
var randomR = 221;
var randomG = 161;
var randomB = 119;
var eyeSize = 5;
var eyeGap = 50
var noseW = 30;
var noseH = 30;
var mouthType = 1;
var mouthSize = 50;
var bodyW = 200;


function draw() {

	background(r, g, b);
	//body
	fill(255 - r, 255 - g, 255 - b);
	ellipse(width / 2, height, bodyW, height);

	//face
	noStroke();
	fill(randomR, randomG, randomB);
	ellipse(width / 2, height / 2, faceW, faceH);

	//eye
	fill(255);
	ellipse((width / 2) - (eyeGap / 2), height / 2, eyeSize * 2);
	ellipse((width / 2) + (eyeGap / 2), height / 2, eyeSize * 2);
	fill(0);
	var y;
	if (mouseY >= (height / 2) + (eyeSize / 2)) {			//if pupil goes past top of eye
		y = min(mouseY, (height / 2) + (eyeSize / 2));
	} else if (mouseY  <= (height / 2) - eyeSize / 2) {		//if pupil goes past bottom of eye
		y = max(mouseY, (height / 2) - (eyeSize / 2));
	} else {												//if pupil is in eye gap
		y = height / 2;
	}

	var xL; 
	var xR;
	if (mouseX >= (width / 2) + (eyeGap / 2)) {								//if pupil goes past right eye
		xR = min(mouseX, (width / 2) + (eyeGap / 2) + (eyeSize / 2));
		xL = min(mouseX, (width / 2) - (eyeGap / 2) + (eyeSize / 2));
	} else if (mouseX <= (width / 2) - (eyeGap / 2)) {						//if pupil goes past left eye
		xL = max(mouseX, (width / 2) - (eyeGap / 2) - (eyeSize / 2));
		xR = max(mouseX, (width / 2) + (eyeGap / 2) - (eyeSize / 2));
	} else {																//if pupil is in eye gap
		xL = (width / 2) - (eyeGap / 2);
		xR = (width / 2) + (eyeGap / 2);
	}

	ellipse(xL, y, eyeSize);	//leftEye
	ellipse(xR, y, eyeSize);	//rightEye

	//nose
	fill(randomR - 20, randomG - 20, randomB - 20);
	ellipse(width / 2, (height / 2) + (faceH / 5), noseW, noseH);
	fill(randomR, randomG, randomB);
	ellipse(width / 2, (height / 2) + (faceH / 5) - 10, noseW, noseH);

	//mouth
	fill(0);
	if (mouthType <= 2 & mouthType >= 1) {
	    rect((width / 2) - (mouthSize / 2), (height / 2) + (faceH / 5) * 2, mouthSize, 3);
	} else {
		circle(width / 2, (height / 2) + (faceH / 5) * 2, mouthSize * 0.25);
	}

}

function mousePressed() {
	bodyW = random(width / 1.5, width / 3);

	faceW = random(width / 4, width / 2);
	faceH = random(height / 4, height / 2);

	randomR = random(150, 200);
	randomG = random(110, 130);
	randomB = random(70, 90);

	eyeGap = random(faceW / 2, faceW / 5);
	eyeSize = random(5, 20);

	noseW = random(20, 40);
	noseH = random(30, 50);

	mouthType = random(0, 2);
	mouthSize = random(faceW / 2, faceW / 10);

	r = random(255);
	g = random(255);
	b = random(255);

}

Blog 02: “Distributed Consciousness”

By Ilia Urgen

“Distributed Consciousness” is a collection of 12 digital illustrations from 2021, created by Turkish-born visual artist Memo Akten. For reference, I have included 1 of his illustrations below.

Akten is an artist who’s constantly inspired by the natural environment around him and how human interactions connect with nature. The main subject of the 12 illustrations is an octopus, which Akten saw while snorkeling in the Mediterranean Sea.

I admire the depths of dimensions in his collection, along with the use of contrasting textures and vivid-bright colors, all while keeping an underwater theme. The soft, gentle eyes of the octopus makes the observer feel at ease, where they can picture themselves being underwater just like Akten was. I also admire the ombre-effect in the background, making the illustration even more welcoming.

This collection involved a combination of artist, artificial intelligence, and ecological awareness. Akten’s greater understanding of digital computation, the natural world, and environmental design is what draws any person to this work of art.

aarnavp – LO 02 Generative Art

In the topic of Generative Art, I was especially inspired by Mitchell Whitelaw’s “Generative Heritage” pieces on New Castle, UK. Strictly from an anthropological standpoint, there is a lot of significance to the concept Whitelaw intends on emulating, as he intends on capturing the various facets of history embedded within this place as a “digital artifact.” Moreover, there is this idea of modernizing the practice of “collaging” in a way that effectively speaks more to the significance of the content. Mitchell talks about this idea of automation simplifying all the possible permutations of a design, whereas traditional art methods would involve a lot more selectability/omission of content. While this may apparently speak to the artists’ decisions, it diminishes the ability to emphasize the concept, which is the history of New Castle. This project especially changed my outlook on generative art, as it represents the idea of possibility as opposed to “meaningless art.”

Mitchell discussed part of the algorithm, which takes 5 source images from a dataset of 2000. The randomly selected images are then compositionally arranged with “semi-random” patterns/rules that allow for formal visual elements (such as unity and repetition) which create the aesthetic digital collages. The images’ opacities are all lowered for more interaction between the images. 

While the process may seem extremely predetermined/predictable, there were several creative choices made within the code that correlate to artistic choices one would make on a physical medium. One method is that the compositor treats images differently depending on the textures/qualities of the material of images – lineweight drawings are treated in a different manner than photographic artifacts, which result in appropriate digital collaging that properly curates elements from the both of them.

Mitchell Whitelaw – Generative Heritage

LO: Computational Architecture

One of the computational architecture art piece created by artist Michael Hansmeyer is Zauberflöte, a grotto set design for Mozart’s Magic Flute. The thing that I admire most about this project is the combination of classic art and modern experimental art presented by this project to the audience. Mozart’s Magic Flute has been a famous classic opera art piece and Michael Hansmeyer made use of algorithm to design the set for the opera. In this way, this one art piece can draw attention from different groups of art audience: people who are interested in modern experimental art and also people who are interested in classic art. From my knowledge, the grotto’s geometry is completely composed by a generative subdivision algorithm. By using algorithms as a compositional strategy, the artist created an architecture whose processes are deterministic but the results are not necessarily entirely foreseeable, which shows that computational art has the power to surprise the audience.

Zauberflöte set design, La Monnaie

Reference
Hansmeyer, Michael, Zauberflöte, 2018, https://www.michael-hansmeyer.com/zauberfloete

Project 2 – Variable Faces (Dog)

Click through for color and other variable changes

sketch 

var rightearX = 360;
var rightearY = 240;
var leftearX = 120
var leftearY = 240
var pupilH = 29
var eyebrow = 211
var nose = 120
var tongue = 43
var r = 80
var g= 35
var b= 80
var red = 255
var green = 255
var blue = 255
var beardR = 213
var beardG = 227
var beardB = 244
 
function setup() {
    createCanvas(500, 500);
}
 
function draw() {
    background("white");
    noStroke();
//facebase
    fill(red,green,blue);
        rect(144,150,214,198,50);
//facehood-dark color
    fill(r,g,b);
        rect(144,150,214,162,50);
//faceeyes
    fill(red,green,blue);
        rect(176,192,66,111,33);
        rect(259,192,66,111,33);
//nose
    fill(red,green,blue);
        ellipse(249,337,nose,113);
//tongue
    fill("red");
        rect(229,311,41,tongue,20);
//beard
    fill(beardR,beardG,beardB);
        quad(195,341,216,363,263,316,242,294);
        quad(239,316,260,294,307,341,286,363);
//white eyes
    fill("white");
        ellipse(209,247,37,41);
        ellipse(293,247,37,41);
//darkest color
    fill(r,g,b);
    //ears
        triangle(299,139,383,156,rightearX,rightearY);
        triangle(200,139,116,151,leftearX,leftearY);
    //pupil
        ellipse(208,252,24,pupilH);
        ellipse(293,252,24,pupilH);
    //eyebrows
        rect(189,eyebrow,40,9,5);
        rect(274,eyebrow,40,9,5);
    //snout
        ellipse(250,304,60,34);
}
 
function mousePressed() {
    rightearX = random(350, 390);
    rightearY = random(240, 340);
    leftearX = random(110,150);
    leftearY = random(240,340);
    pupilH = random(20,38);
    eyebrow = random(200,224);
    nose = random(120,150);
    tongue = random(43,80);
    r = random (0,100);
    g = random(0,100);
    b = random (0,100);
    red = random (100,255);
    green = random (100,255);
    blue = random (100,255);
    beardR = random (200,255);
    beardG = random (200,255);
    beardB = random (200,255);
}

Project 02

Variable Face

sketchDownload
// Ilia Urgen
// Section B

//background color
var r = 128;
var g = 235;
var b = 255;

//shirt color
var r1 = 217;
var g1 = 0;
var b1 = 0;

var faceWidth = 480;
var faceHeight = 660;

var neckWidth = 250; 

var eyebrowHeight = 518;
var eyebrowThickness = 30;

var eyeDiameter = 60;

var eyeCenterX1 = 400;
var eyeCenterY1 = 575;
var eyeCenterX2 = 600;

//nose width coordinates
var noseX = 500;
var noseY = 540;

var mouth = 3;

function setup() {
    createCanvas (1000, 1000);
}                                   
                                    
function draw() {                   
    background (r, g, b);

    //neck outline
    noStroke();
    fill (243, 207, 187);
    rect (375, 500, neckWidth, 800);        
    
    //face outline                      
    ellipse (500, 600, faceWidth, faceHeight);  

    //left ear
    arc (500-(faceWidth/2)-15,620,80,160,PI + HALF_PI,PI + HALF_PI);  
    
    //right ear
    arc (500+(faceWidth/2)+15,620,80,160,PI + HALF_PI,PI + HALF_PI);  

    //left eye
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 50, eyeDiameter);  
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 30, eyeDiameter); 
    fill (102,51,0); //brown
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1,5,5);

    //right eye
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 50, eyeDiameter);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 30, eyeDiameter);
    fill (102,51,0); //brown
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1,5,5);

    //nose
    fill (240,190,180);
    triangle (noseX - 50,700,500,noseY,noseX + 50,700);
    
    //t-shirt                                                              
    fill (r1,g1,b1);                                              
    quad (500-(neckWidth/2),920,200,1000,800,1000,500+(neckWidth/2),920);

    //left eyebrow
    noFill();
    strokeWeight (eyebrowThickness);
    stroke (55,39,45);
    arc (400,eyebrowHeight,120,30,PI,0);

    //right eyebrow
    arc (600,eyebrowHeight,120,30,PI,0);

    //mouth
    noFill();
    strokeWeight (35);
    stroke (193,104,115);
    
    //sad face
    if (mouth == 1) { 
        arc (500,785,180,40,PI,0);
    }

    //happy face
    else if (mouth == 2) {
        arc (500,775,180,40,0, PI);
    }

    //shocked face
    else if (mouth == 3) {
        fill (255);
        stroke (255);
        ellipse (500,790,115,10);

        noFill();
        strokeWeight (35);
        stroke (193,104,115);
        arc (500,770,180,40,PI,0);
        arc (500,780,180,40,0, PI);
    }

    //ear lines
    noFill();
    stroke (55,39,45);
    strokeWeight (2);

    arc (500-(faceWidth/2)-20,625,30,100,HALF_PI, PI + HALF_PI);
    arc (500+(faceWidth/2)+20,625,30,100,PI + HALF_PI, HALF_PI);

    //hair
    strokeWeight (eyebrowThickness);

    line (300,660-(faceHeight/2.5),100,(faceHeight/2)-20);
    line (310,660-(faceHeight/2.5),120,(faceHeight/2)-25);
    line (320,660-(faceHeight/2.5),140,(faceHeight/2)-30);

    line (330,660-(faceHeight/2.5),160,(faceHeight/2)-35);
    line (340,660-(faceHeight/2.5),180,(faceHeight/2)-40);
    line (350,660-(faceHeight/2.5),200,(faceHeight/2)-45);

    line (360,660-(faceHeight/2.5),220,(faceHeight/2)-50);
    line (370,660-(faceHeight/2.5),240,(faceHeight/2)-55);
    line (380,660-(faceHeight/2.5),260,(faceHeight/2)-60);

    line (390,660-(faceHeight/2.5),280,(faceHeight/2)-65);
    line (400,660-(faceHeight/2.5),300,(faceHeight/2)-70);
    line (410,660-(faceHeight/2.5),320,(faceHeight/2)-75);

    line (420,660-(faceHeight/2.5),340,(faceHeight/2)-80);
    line (430,660-(faceHeight/2.5),360,(faceHeight/2)-85);
    line (440,660-(faceHeight/2.5),380,(faceHeight/2)-90);

    line (450,660-(faceHeight/2.5),400,(faceHeight/2)-95);
    line (460,660-(faceHeight/2.5),420,(faceHeight/2)-100);
    line (470,660-(faceHeight/2.5),440,(faceHeight/2)-105);

    line (480,660-(faceHeight/2.5),460,(faceHeight/2)-110);
    line (490,660-(faceHeight/2.5),480,(faceHeight/2)-115);
    
    line (500,660-(faceHeight/2.5),500,(faceHeight/2)-120);
    
    line (510,660-(faceHeight/2.5),520,(faceHeight/2)-115);
    line (520,660-(faceHeight/2.5),540,(faceHeight/2)-110);

    line (530,660-(faceHeight/2.5),560,(faceHeight/2)-105);
    line (540,660-(faceHeight/2.5),580,(faceHeight/2)-100);
    line (550,660-(faceHeight/2.5),600,(faceHeight/2)-95);

    line (560,660-(faceHeight/2.5),620,(faceHeight/2)-90);
    line (570,660-(faceHeight/2.5),640,(faceHeight/2)-85);
    line (580,660-(faceHeight/2.5),660,(faceHeight/2)-80);

    line (590,660-(faceHeight/2.5),680,(faceHeight/2)-75);
    line (600,660-(faceHeight/2.5),700,(faceHeight/2)-70);
    line (610,660-(faceHeight/2.5),720,(faceHeight/2)-65);

    line (620,660-(faceHeight/2.5),740,(faceHeight/2)-60);
    line (630,660-(faceHeight/2.5),760,(faceHeight/2)-55);
    line (640,660-(faceHeight/2.5),780,(faceHeight/2)-50);

    line (650,660-(faceHeight/2.5),800,(faceHeight/2)-45);
    line (660,660-(faceHeight/2.5),820,(faceHeight/2)-40);
    line (670,660-(faceHeight/2.5),840,(faceHeight/2)-35);

    line (680,660-(faceHeight/2.5),860,(faceHeight/2)-30);
    line (690,660-(faceHeight/2.5),880,(faceHeight/2)-25);
    line (700,660-(faceHeight/2.5),900,(faceHeight/2)-20);

}

function mousePressed() {
    
    //background color
    r = random (0,255);
    g = random (0,255);
    b = random (0,255);

    //shirt color
    r1 = random (0,255);
    g1 = random (0,255);
    b1 = random (0,255);

    faceWidth = random (400, 900);
    faceHeight = random (400, 800);

    eyebrowThickness = random (10,50);
    eyebrowHeight = random (500, 545);

    eyeDiameter = random (20,80);
    eyeCenterY1 = random (570,600);

    //nose width coordinates
    noseX = random (480,520);
    noseY = random (500,590);

    //mouth option 1,2, or 3
    mouth = int(random (1,4));
}

SydneyCha-Project-02-Variable-Face

sketch
//Sydney Cha
//Section D

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;

var r = 207;
var g = 185;
var b = 151;

var re = 100;
var ge = 100;
var be = 100;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(re);

    ellipse(width / 3, height / 2, faceWidth / 3, faceWidth / 3); //left ear
    ellipse(2*width / 3, height / 2, faceWidth / 3, faceWidth / 3); //right ear

    fill(r, g, b);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //face

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(re, ge, be);
    ellipse(eyeLX, height / 2, 2*eyeSize/3, 2*eyeSize); //left eye
    ellipse(eyeRX, height / 2, 2*eyeSize/3, 2*eyeSize); //right eye

    fill(200, 70, 70);
    arc(width / 2, 2*height / 3, 20, 10, TWO_PI, PI); //mouth

    line(width / 2, height / 2, width / 2, faceHeight - 10); //nose
}
 
function mousePressed() {
    faceWidth = random(100, 120);
    faceHeight = random(130, 200);
    eyeSize = random(10, 30);

    r = random(160, 240);
    g = random(180, 200);
    b = random(150, 180);

    re = random(95, 255);
    ge = random(95, 255);
    be = random(95, 255);
}

Computational design of ornaments

Muqarnas is elaborate structural ornamentation that transits between floor plans and dome ceilings. This project done by Michael Hansmeyer involves using an algorithm to replicate and generate new patterns of muqarnas. I am intrigued by the dazzling patterns computers generate using simple logic. Thanks to computational design, what took hundreds of hours to design in the past can be done in minutes. This project also has implications for ornamental design in other areas, including clothing, interior design, etc.

Muqarnas generated by the algorithm

The algorithm first draws two contour lines marking the top and bottom of muqarnas, then subdividing the space in between recursively. To add variation, the software subdivides the space selectively based on the topographic features of each tile. Finally, contour lines are drawn between tiles of different tiers to add vertical dimension. The author shows his artistic sensibilities by subdividing the geometry so that each tile is too small to recognize. As a result, the muqarnas look like a continuous surface with concaves and convex features, which is different from traditional muqarnas. It is not just a replication of the past but a new design approach that utilizes the machine’s mighty computing power.

LookingOutwards – 02

Looking at Cytoplasmic Playgrounds (2012) by Markos Kay I admire how abstract the images of his collection are while still conveying the motion of the idea he’s trying to show, which is protein interactions. The movement within this collection of drawings brings life to abstracted molecular chemistry and the complexities of detail, depth, and fullness in the images are exciting to explore. The consistently, simple beige backgrounds throughout the collection also prevent the series from becoming too unrecognizable and random. While this image is computer generated, the artist, Kay, adds his own creativity in putting in the way chemical reactions are represented: what colors are used, what items to prioritize, and what movements to convey. The algorithm that Kay used to generate these looks very complicated. I think he does use the random function within bounds to generate the positions of items, especially the points in the clusters. The ‘movement’ in the drawings tends to appear to have a center, indicating that the algorithm might use vectors attracted to centers to give the appearance of centripetal movement.

Multiprotien Complexes: A set of similar proteins that allow for a simpler and more efficient pathway for protein (ie. enzyme) movement.