Category: SectionD

LO: “Hidden Order” Generative Muslim Geometric Art and Music

As a Muslim American I’ve had the privilege of coming from an artistic heritage of geometric graphic art. From the Alhambra to the niche at the CFA, Muslim geometric art is one of the most amazingly simple yet dazzlingly complicated art forms I’ve ever studied. (historical studies, of course. I’m not good enough at drawing it yet!) So naturally I went looking for some Muslim generative geometric art, and I found this amazing project called A Hidden Order, a cross disciplinary collaboration between traditional Muslim-British geometer Sama Mara, and English musician Lee Westwood. 

By combining sound and geometry they have created a generative art process where the music and sound informs the composition of the piece. First, Lee Westwood (and co) play a pre-composed piece. This is then run through algorithms and code to generate a colorful geometric image which assembles itself over the course of the piece. Some of them could then be photographed and turned into prints like these:

Octagon III – Conga – Variation I. 80 by 80cm

I’m not sure how exactly they might have even approached the algorithms to this. Just the concept boggles my mind. To see them actually performing and having the piece assemble as they play is even more astounding. This was what was said of the project by the author of the Islamic Digital Arts blog: “Each key or note was interpreted by a program that would then convert the sound to form part of a colour and shape system.” And yes, while some might think it looks like a kaleidoscope, it isn’t so simple. These forms are not just refractions of glass but are a part of a sacred geometry which has influenced the architecture and art of large parts of the world for over a millennia. If these were ceramic tiles, I could see them decorating the walls of grand mosques from Morocco to Indonesia. Were they carved stone, I could imagine them as the dazzling domes of the mosques in Isfahan. Not only is there a mathematical and artistic significance here, but a cultural one as well.

At the end of the day, I’m not so concerned with the algorithm as with the intersections and overlap of Western, Islamic, musical and visual arts and math. It’s really a gorgeous representation of how so many seemingly different things can come together to create beautiful art!

Project 02: Variable Face

This project was challenging because it took a lot of trial and error. Commenting helped a lot when going back and forth between editing different things to match them up.

sketch
/*
    Joan Lee
    Section D

    Aspects of variability
        4 different expressions with mouse movement
        switching hair color each click
        different posture each click
        background changes every click
*/

var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(bgColor);

    //hair behind face
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);

    //person
    noStroke();
    fill(bodyColor);
    ellipse(width / 2, height, 170, shoulderHeight);    //body
    fill(250, 230, 180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);     //head
   
    //eyes
    stroke(0);
    strokeWeight(1);
    fill("white");
    var eyeLX = width / 2 - faceWidth / 4;
    var eyeRX = width / 2 + faceWidth / 4;
    var x = constrain(mouseX, 20, 35);  //eyes getting bigger with mouse moving right
    circle(eyeLX, height / 2, x);
    circle(eyeRX, height / 2, x);   //whites of eyes
    fill(63, 35, 11);
    circle(eyeLX + 1, height / 2, 5);
    circle(eyeRX - 1, height / 2, 5);   //pupils considering interpupillary distance

    //nose
    noFill();
    stroke(205, 179, 156);  //shadow
    strokeWeight(1);
    beginShape();
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2, height / 2 + 20);
    curveVertex(width / 2 - 5, height / 2 + 10);
    curveVertex(width / 2 - 5, height / 2 + 10);
    endShape();
    
    //mouth
    strokeWeight(4);
    stroke(255, 200, 200);
    fill(0);
    var x1 = constrain(mouseX, 1, 40);
    ellipse(width / 2, height / 2 + 50, 60, x1);    //making mouth bigger with mouse placement
    
    //bangs
    noStroke();
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);

    //eyebrows
    fill(73, 45, 35);
    var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
    rect((width / 2) - (faceWidth / 3), y, 30, 5);      
    rect((width / 2) + (faceWidth / 8), y, 30, 5);  //raised vs furrowed eyebrows with mouse moving up or down
}

function mousePressed() {
    bgColor = random(0, 255);
    faceWidth = random(110, 160);
    faceHeight = random(160, 200);
    shoulderHeight = random(330, 450);
    if(on == true){     //changing hair color each click
        on = false;
    } else{
        on = true;
    }
}

Project-02-Variable-Face

sketch

var eyeSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var mouthSize=20;
var State= 0;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(180);
    fill (255,160,122);
    ellipse(width/2, height/2, faceWidth,  faceHeight);// face
    var eyeLX = width / 2 - faceWidth * 0.25;// x position of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;// x position of right eye
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//right eye
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);//left pupil
    ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);//right pupil
    fill(255,0,0);
    var mouthX =width/2;
    var mouthY =height/2+0.25*faceHeight;
    ellipse(mouthX, mouthY, mouthSize, mouthSize);//mouth
    fill(139,69,19);
}

function mousePressed() {
State= int(random(1,4))
   if (State == 1) {
faceWidth= 200;
faceHeight= 400;
eyeSize= 70;
mouthSize=40;
mouthY=height/2+0.5*faceHeight;// surprise face
} else if (State == 2) {
faceWidth= 325;
faceHeight= 275;
eyeSize=30
mouthSize=10;//relaxed face 
} else {
faceWidth= 300;
faceHeight= 300;
eyeSize=50;
mouthSize=20// normal face
}
}

When I was designing the project, I was thinking about different states of facial expression and trying to show them in the product.

Blog 02

Akten, True Colors 2020

https://www.memo.tv/works/true-colors/

One of the artists I really enjoyed the work of was Memo Akten, his work with AI intrigued me. The computer could only recognise things that it already knows, one of the demonstrations was a video of a woman moving some keys and headphones around. Next to that video was one that was a record of what the computer could comprehend, in that video appeared flowers and moving water. The interpretation struck a chord because it shows that the computer, although not “feeling” , pieced together beautiful things and saw them as default shapes (probably because they’re less complex than things like faces). I’m not sure how he creates art like this but I assume it’s something along the lines of feeding a computer program a bunch of pictures and then showing it new pictures and watching it try to figure out what it is. I’ve seen other programs that you can put two words into and a program try to create something that fits the two words together. I assume that this is almost like the opposite of this. It’s also kind of interesting that the motivation behind Akten’s projects is to create something but he’s doing it in a second hand way. He creates the thing that then creates the final product, I can appreciate the level of detachment he has from his final product while still being able to orchestrate it.

Variable Face

generative face
var x = 150;
var y = 220;
var faceWidth = 150;
var faceHeight = 200;
var hairLength = 180;
var mouthSize = 20;
var eyeL = 40;
var eyeW = 20;
var pupiL = 15;
var bgR = 225;
var bgG = 123;
var bgB = 138;
var bodThic = 100;



function setup() {
    createCanvas(480, 640);
}

function draw() {

    //original face but made dependant on itself not coords make teh stuff in relation to the face width
    background(bgR, bgG, bgB);

    fill(0)
    rect(width/2-0.6*faceWidth, height/2-0.2*faceHeight, (width/2+0.6*faceWidth)-(width/2-0.6*faceWidth), hairLength)

    fill(255-bgR, 225-bgG,225-bgB);
    ellipse(width / 2, height, bodThic, height);

    fill(253,227,220);
    strokeWeight(0);
    ellipse(width/2, height/2, faceWidth, faceHeight);    //face

    fill(0);
    quad(width/2-0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.6*faceWidth, height/2-0.2*faceHeight, width/2-0.6*faceWidth, height/2-0.2*faceHeight)    //trap bang

    fill(225,199,190);
    triangle(width/2, height/2 ,width/2-0.07*faceWidth,height/2+0.23*faceHeight,width/2+0.07*faceWidth,height/2+0.23*faceHeight);    //nose

    strokeWeight(3);
    stroke(239,94,94);
    noFill();
    ellipse(width/2, height/2+0.35*faceHeight, mouthSize);


    fill(245,249,255); 
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, eyeL, eyeW);    //eye left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, eyeL, eyeW);    // eye right

    fill(127,71,42);
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, pupiL);   //pupil left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, pupiL);    // pupil right 

    fill(253,227,220);
   // rect((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, eyeW / 2);    //lids left
  
    fill(10)
    rect ((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left
    rect ((width/2+0.25*faceWidth) - (eyeL / 2), (height/2+0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left

}


function mousePressed(){
    faceWidth = random(75, 200);
    faceHeight = random(100, 300);
    hairLength = random(100, 300);
    mouthSize = random(5, 40);
    eyeL = random(20, 50);
    eyeW = random(10, 50);
    pupiL = random(5, 20);
    bgR = random(0, 225);
    bgG = random(0, 225);
    bgB = random(0, 225);
    bodThic = random(100, width);
}

LO 2 – Generative Art

For a while, I assumed that for works to be classified under the genre of ‘generative art’, they had to hold a certain level of complexity. I used to picture them as works that completely stray away from all pre-established artistic styles. Manolo Gamboa Naon makes me think otherwise. Through experimentation with basic geometric shapes, his work bridges the world of digital and analog art. In manipulating the most bare artistic elements, Manolo explores the divides between organic and artificial. The fluidity of his works are achieved by approaching the digital surface as a plastic space. Even though this field of generative art may be new to many, historical influences (such as Kandinsky) in his work furthers a sense of relatability. For me, the rhythm and beauty of his works are derived from simple manipulations of color and composition. Even through minor shifts of pattern and placement of shape, Manolo achieves a great range of emotion. 

While it may take me a while to understand the specifics of his algorithm, Manolo translates techniques like Decalcomania–a blotting process where paints create a mirror image–into code. Through–presumably–random layering of color, his program creates gradient-like surfaces that each fade into one another. Thus, these digital tools enable him to create levels of fluidity that cannot be achieved with any other analog techniques.

CUDA – Manolo Gamboa Naon, June 5, 2018

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);

}

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);
}