Month: October 2022

Looking Outwards 5

This week I looked at the artist Sebastien Monroy , a designer who programs generative art, games and digital experiences. The project I looked at of his is called Palm Reading, a project that generates abstract animations based on bioelectricity measured from palm tree fronds in Koh Lon island. He recieved an audio file from measuring the electric pulses of the plants that he took and converted into a moving image inspired by the movement of the waves generated by the plants. I think the result was really cool.

https://www.dinacon.org/2018/07/04/jessica-anderson-sebastian-monroy/

I couldn’t upload the video’s because they were too big for wordpress but they’re on that site

project 5: wallpaper

floral wallpaperDownload
// isis berymon section D

function setup() {
    createCanvas(600, 600);
    background(206, 214, 204); //light green
}

function draw() {
    var x = -20; //negative so pattern doesnt stop at edge
    var y = -20;
    for(var i = 0; i < 6; i++){
        for(var j = 0; j < 6; j++){
            tile(x, y);
            x+=120;
        }
        y+=120;
        x = -20;
    }
}

function tile(x, y) {
    push();
    translate(x, y);
    //branches
    stroke(120, 105, 80); //brown
    line(26, 0, 38, 12); //touches top
    line(40, 19, 20, 39);
    line(0, 27,14, 14); //touches left 1
    line(4, 24, 54, 73);
    line(54, 73, 70, 56);
    line(47, 66, 33, 80);
    line(24, 74, 13, 63);
    line(13, 63, 0, 75); //touches left 2
    line(27, 120, 15, 108); //touches bottom
    line(15, 108, 29, 94);
    line(29, 94, 41, 106);
    line(41, 106, 64, 83);
    line(64, 83, 84, 102);
    line(84, 102, 93, 93);
    line(92, 120, 115, 97);
    line(115, 97, 91, 73);
    line(91, 73, 104, 59);
    line(104, 59, 120, 75); //touches right 2
    line(97, 66, 88, 57);
    line(88, 57, 98, 46);
    line(120, 27, 108, 37); //touches right 1
    line(108, 37, 88, 17);
    line(88, 17, 91, 13);
    //flowers
    flower(41, 20);
    flower(102, 42);
    flower(18, 46);
    flower(73, 53);
    flower(28, 79);
    flower(63, 88);
    flower(12, 110);
    flower(93, 124);
    pop();
}

function flower(x, y) {
    noStroke();
    fill(187, 166, 212); //purple petals
    circle(x, y-6, 10);
    circle(x+6, y, 10);
    circle(x, y+6, 10);
    circle(x-6, y, 10);
    circle()
    fill(240, 228, 188); //yellow center
    circle(x, y, 6);
}

Project-05-Wallpaper

sketch
// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Project-05
 

var colorState; 

function setup() {
    createCanvas(500, 500);
    background (255,248,228);
}

function draw() { 
	var dim = 70;
	var rad = dim/2;
	colorState = 0; 

	for (var x=rad;x<=width-rad;x+=dim*2){
		for (var y=rad;y<=height-rad;y+=dim){
			cirColorOne(colorState);
			drawPiece(x,y,dim,rad);
		}
	}
	

	for (var x=dim+rad;x<=width-rad;x+=dim*2){
		for (var y=rad;y<=height-rad;y+=dim){
			cirColorTwo(colorState);
			drawPiece(x,y,dim,rad);
		}
	}


	noLoop();
} 

function drawPiece (x,y,dim,rad){
	var angleX;
	var angleY;

	//move origin
	translate (x,y);

	push();
	//random rotation angle from array
	randRot();

	push();
	noStroke();
	//draw semi circle
	arc(0,0,dim,dim,radians(90), radians(270),CHORD);
	pop(); 

	//draw lines in piece 
	for(var polarPos=85;polarPos>=10;polarPos-=5){
		angleX = rad*cos(radians(polarPos));
		angleY = rad*sin(radians(polarPos));

		strokeWeight(0.25);
		line(angleX,-angleY,angleX,angleY);

		//increase gap between lines so they dont blur together
		if(polarPos<=30){
			polarPos -=2;
		}
	}

	pop();

	//reset origin
    translate(-x,-y);
}

function randRot(){
	//rotate piece at one of 4 angles
	var rotateAngles = [0,90,180,270];

	//selec rand int
	var rotAngle = floor(random(0,4));
	rotate (radians(rotateAngles[rotAngle])); 
}

function cirColorOne(state){
	if(state==0){
		//yellow
		fill(255,206,109);
	}else if(state==1){
		//black
		fill(49,49,49);
		colorState = -1;
	}
	colorState+=1;
}

function cirColorTwo(state){
	if(state==0){
		//orange
		fill(255,105,33); 
	}else if(state==1){
		//blue
		fill(125,173,198); 
		colorState = -1;
	}
	colorState+=1;
}

Project 5: Wallpaper

I was inspired to design a Coptic-inspired pattern for this project. I am Coptic Orthodox Christian. Coptic means Egyptian and our art and our churches are filled with beautiful wooden engravings. I wanted to design a pattern inspired by these wooden engravings and see what I could learn about how they are created. I realized that Coptic patterns consist of one design that when placed next to itself creates another design. This pattern forms three different crosses!

Process Sketch/Reflection

Coptic wallpaper sketch
// Sandy Youssef; 
//section D; 
//syoussef@andrew.cmu.edu;
//Project-05;
function setup() {
    createCanvas(500, 600);
    background(156, 121, 90);
  
}

function draw() {
    crossOne(0, 0); // calling the function
    // loop to create crossOne pattern, since crossOne calls crossTwo, they are linked
    for (var y = 1; y <= height; y += 90) {
        for (var x = 1; x <= width; x += 90){ 
           crossOne(x-1, y-1);
    }
    }

    
}
function crossOne (x, y) {  
    push();
    translate(x,y);  
    fill(156, 121, 90);
    stroke(5);
    var x = 50;
    var y = 29;
    push();
    rectMode (CENTER);
    rect(50, 50, 50, 50);
    rect(x, y, 20, 8)
    // left rect
    pop();
    push();
    translate(33,40);
    rotate(radians(90));
    rect(0, 0, 20, 8);
    // right rect
    pop();
    push();
    translate(75,40);
    rotate(radians(90));
    rect(0, 0, 20, 8);
    //bottom rect
    pop();
    push();
    translate(40,67);
    rect(0, 0, 20, 8)
    pop();
    // top pointy rect
    fill(115,75,42); //HEREEEEE
    noStroke();
    rect(45, 20, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    // left pointy rect
    push();
    translate (45, 0);
    rotate(radians(90));
    noStroke();
    rect(45, 19, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    pop();
    // right pointy rect 
    push();
    translate (100, 0);
    rotate(radians(90));
    noStroke();
    rect(45, 20, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    pop();
    // bottom pointy rect
     push();
    translate (0, 54.3);
    noStroke();
    rect(45, 20, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    pop();
    // vertical bottom line in center
    push();
    translate(0,0);
    stroke(5);
    line(45,34, 45, 67);
    line(55, 34, 55, 67);
    pop();  
    // horiz line in center
    line(33,45, 67, 45);
    line(33, 55, 67, 55);
    // same color rectangles to hide lines in center
    push();
    noStroke();
    rect(30,45, 40,9);
    rotate(radians(90));
    rect(30,35, 40,9);
    pop();

    // little circles
    fill(115,75,42);
    push();
    stroke(5);
    translate(25,25);
    ellipse(7,7, 5);
    translate(35,35);
    ellipse(7,7,5);
    pop();
    push();
    stroke(5);
    translate (60,25);
    ellipse(7,7,5);
    pop();
    push();
    stroke(5);
    translate(25, 60);
    ellipse(7,7,5);
    crossTwo (0,0); // calling crossTwo function
    pop();
    pop();
 
function crossTwo (x2, y2) {
    rectMode(CENTER); 
    //noStroke();
    fill(115,75,42);
    rect(25, 35, 10, 30); // vertical bottom connection
    push();
    translate (x-50,y-119); // vertical top connection
    rect(25, 35, 10, 30);
    pop(); 
    push();
    translate(15, -35);
    rotate(radians(90)); // horizontal connectinon
    rect(25, 35, 10, 30);
    pop();
    // diamond cross in center
    push();
    stroke(5);
    rotate(radians(45));
    rect(13,40, 10,10);
    translate(10,10);
    rect(13,40, 10,10); // bottom 
    translate(-20,-20);
    rect(13,40, 10,10); // top 
    translate(0,20); // left 
    rect(13,40, 10,10);
    translate(20, -20);
    rect(13,40, 10,10);
    pop();

}

}

Looking Outwards 05: 3D Computer Graphics

Creator’s Name: Together Design UK
Title of Work: “Make your own cider:
Year of Creation: unknown

This project is an incredible example of 3D Computer Graphics applied in graphic design. This graphic is extremely intriguing to look at. The motion portrayed in this still image makes it very visually interesting and it looks like the liquid created a splash that is shaped like a wine glass. This graphic serves the purpose of promoting a “make your own cider” brand and it is done quite well. I believe these types of graphics are created with a type of 3d rendering program and that program is designed using algorithms to achieve this purpose. I am not exactly sure of the exact algorithms, but that is my guess. It is apparent that the creator’s purpose is to communicate a certain message about the brand and I think the company did a good job.

3D computer graphic created by Together Design

Project 05 – Wallpaper – srauch

Here is my palm frond wallpaper. Vibes.

sketch
//sam rauch, section B, srauch@andrew.cmu.edu, project 05
//this code makes a wallpaper pattern with overlapping palm leaves

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

function draw() {
    background(16, 28, 48);

    //drawing pattern
    var direction = 1 //flips direction leaves are facing as they're drawn in the j loop
    for (var i = 0; i <= width+110; i+=110){
        for (var j = 0; j<= height+100; j+=70){
            stem(i,j, 45*direction);
            direction = direction*-1;
        }
    }

    noLoop();
}

function portLeaf(a,b,radius, spin){ //make left leaves. must be called at 0,0
    push();
    translate(a,b);
    rotate(radians(spin));
    noStroke();

    push(); //bottom half
    fill(20, 50, 23);
    translate(a-(cos(radians(70))*radius), b-(sin(radians(70))*radius));
    arc(0, 0, radius*2, radius*2, radians(70), radians(110), CHORD);
    pop();

    push(); //top half
    fill(37, 87, 42); 
    translate(a+(cos(radians(250))*radius), b-(sin(radians(290))*radius));
    arc(0,0, radius*2, radius*2, radians(250), radians(290), CHORD);
    pop();

    pop();
}

function starLeaf(a,b,radius,spin) { //make right leaves. must be called at 0,0
    push();
    translate(a,b);
    rotate(radians(spin));
    noStroke();

    push(); //bottom half
    fill(20, 50, 23);
    translate(a+(cos(radians(70))*radius), b-(sin(radians(70))*radius));
    arc(0, 0, radius*2, radius*2, radians(70), radians(110), CHORD);
    pop();

    push(); //top half
    fill(37, 87, 42);
    translate(a-(cos(radians(250))*radius), b-(sin(radians(290))*radius));
    arc(0,0, radius*2, radius*2, radians(250), radians(290), CHORD);
    pop();

    pop();
}

function stem(stemX, stemY, spin) {//make a stem, and place leaves along it 
    push();
    translate(stemX, stemY);
    rotate(radians(spin));

    //leaves at the tip
    portLeaf(0,0,50,60);
    starLeaf(0,0,50,-60);
    portLeaf(0,0,50,80);
    starLeaf(0,0,50,-80);

    //put leaves along the stem
    var radius = 45;
    for(var i = 0; i<100; i+=10){
        push();
        translate(0,i);
        portLeaf(0,0,radius, 30);
        starLeaf(0,0,radius,-30);
        radius += 3;
        pop();
    }

    //line for stem
    stroke(20, 60, 25);
    strokeWeight(3);
    line(0,0, 0, 100);

    pop();
}

Project 05

Inspired by the “Evil Eye”, project 5 illustrates a patterned wallpaper with celestial elements and different colored eyes. I enjoyed designing the pattern 🙂

sketch
//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project-05

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

function draw() {
    background("lightyellow");

    //eye1 nested loop
    for(var x = 100; x < width; x+=200){
        for(var y = 75; y < height; y += 150){
        eye1(x,y);
        }
    }

    //eye2 nested loop
    for(var x = -200; x < width+200; x+=200){
        for(var y = -147; y < height+200; y += 149){
        eye2(x,y);
        }
    }

    //star nested loop
    for(var x = -100; x < width+180; x+=200){
        for(var y = -150; y < height+140; y += 150){
        fill(4,158,177);
        star1(x,y);
        }
    }

    //moon nested loop
    for(var x = -200; x < width+200; x+=200){
        for(var y = 75; y < height; y += 150){
        moon(x,y);
        }
    }




}

function eye1(x,y){
    //outside shape
    fill("white");
    stroke(1,35,133);
    strokeWeight(3);
    beginShape();
    vertex(x-45,y);
    bezierVertex(x-5,y-30,x+5,y-30,x+45,y);
    bezierVertex(x+5,y+30,x-5,y+30,x-45,y)
    endShape();

    //innershape
    fill(255,234,172);//yellow
    noStroke();
    beginShape();
    vertex(x-35,y);
    bezierVertex(x,y-20,x,y-20,x+35,y);
    bezierVertex(x,y+20,x,y+20,x-35,y)
    endShape();

    //iris outer
    noStroke();
    fill(4,158,177);
    ellipse(x,y,43,43);

    //array lines
    stroke(255,234,172);
    strokeWeight(2);
    line(x,y+17,x,y-17);
    line(x+17,y,x-17,y);
    line(x-14,y-14,x+14,y+14);
    line(x+14,y-14,x-14,y+14);

    //inner iris
    noStroke();
    fill(1,35,133);
    ellipse(x,y,25,25);
    fill("white");
    ellipse(x,y,5,5);
}

function eye2(x,y){
    //outside shape
    fill("white");
    stroke(4,158,177);
    strokeWeight(2);
    beginShape();
    vertex(x-45,y);
    bezierVertex(x-5,y-30,x+5,y-30,x+45,y);
    bezierVertex(x+5,y+30,x-5,y+30,x-45,y)
    endShape();

    //innershape
    fill(4,158,177);//lightblue
    noStroke();
    beginShape();
    vertex(x-35,y);
    bezierVertex(x,y-20,x,y-20,x+35,y);
    bezierVertex(x,y+20,x,y+20,x-35,y)
    endShape();

    //iris outer
    noStroke();
    fill(255,234,172);
    ellipse(x,y,43,43);

    //array lines
    stroke(4,158,177);
    strokeWeight(2);
    line(x,y+17,x,y-17);
    line(x+17,y,x-17,y);
    line(x-14,y-14,x+14,y+14);
    line(x+14,y-14,x-14,y+14);

    //inner iris
    noStroke();
    fill(1,35,133);
    ellipse(x,y,25,25);
    fill("white");
    ellipse(x,y,5,5);
}


function star1(x,y){
noStroke();
beginShape();
vertex(x-3, y+2);
vertex(x, y+20);
vertex(x+3, y+2);
vertex(x+12, y);
vertex(x+3, y-2);
vertex(x, y-20);
vertex(x-3, y-2);
vertex(x-12, y);
endShape();
}

function moon(x,y){
    fill(239,172,59);
    noStroke();
    beginShape();
    vertex(x-15,y-5);
    bezierVertex(x-5,y,x+5,y,x+15,y-5);
    bezierVertex(x+5,y+10,x-5,y+10,x-15,y-5)
    endShape();

}

Project 5: Wallpaper

A wall paper of metacircles!!!

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 * Project-05
 *
 * This program draws wallpapaer
 */

//set circle sizes
var sizeCircle=50;


function setup() {
    createCanvas(600,600);
    background(255);
}

function draw() {
//array for the metacircles (both directions)
    for (var x=0; x<=width; x+=sizeCircle*2)
    {
        for (var y=0; y<=height; y+=sizeCircle*2)
        {
            metaCircle(x,y,sizeCircle);
            metaCircle2(x+sizeCircle,y+sizeCircle,sizeCircle);
        }
    }

//filling cirlces that cover the gap between shapes
    for (var x=sizeCircle; x<=width+sizeCircle; x+=sizeCircle*2)
    {
        for (var y=0; y<=height; y+=sizeCircle*2)
        {
            //change color of strokes and fills
            fill(0);
            stroke(0);
            strokeWeight(sizeCircle/8);
            circle(x,y,sizeCircle/3);
            circle(x-sizeCircle,y+sizeCircle,sizeCircle/3);
        }
    }
//noLoop() to prevent refreshing as the patterns is all ramdom
    noLoop();

    
}

// first type of metacircle
function metaCircle(x,y,size,c) {
    //set random values from 0 to 2 to get 3 different colors for the shape
    var guess = Math.floor(Math.random()*3);
    if (guess==0)
    {
        fill (255,125,125,255);
    }
    else if (guess==1)
    {
        fill (125,255,125,255);
    }
    else if (guess==2)
    {
        fill (125,125,255,255);
    }
    //two circles as base
    strokeWeight(0);
    circle(x+size/2,y-size/2,size);
    circle(x-size/2,y+size/2,size);

    //one rotated square fill the middle part 
    rectMode(CENTER);
    push();
    translate(x,y);
    rotate(1/4*Math.PI)
    rect(0,0,size/2,size/2);
    pop();

    //drawing the outline with 4 arcs
    stroke(0);
    strokeWeight(size/8);
    noFill();
    arc(x-size/2, y-size/2, size, size, 0, HALF_PI);
    arc(x+size/2, y+size/2, size, size, PI, PI+HALF_PI);
    arc(x+size/2, y-size/2, size, size, -PI, HALF_PI);
    arc(x-size/2, y+size/2, size, size, 0, PI+HALF_PI);

    //patterns 
    stroke(25);
    strokeWeight(size/16);
    arc(x-size/2, y+size/2, size/3*2, size/3*2, 0, PI+HALF_PI);
    arc(x+size/2, y-size/2, size/3*2, size/3*2, -PI, HALF_PI);
    arc(x-size/2, y+size/2, size/3, size/3, 0, PI+HALF_PI);
    arc(x+size/2, y-size/2, size/3, size/3, -PI, HALF_PI);
}

//second type of metacircle same as above (no further explanations)
function metaCircle2 (x,y,size,c) {
    var guess = Math.floor(Math.random()*3);
    if (guess==0)
    {
        fill (255,125,125,255);
    }
    else if (guess==1)
    {
        fill (125,255,125,255);
    }
    else if (guess==2)
    {
        fill (125,125,255,255);
    }
    strokeWeight(0);
    circle(x+size/2,y+size/2,size);
    circle(x-size/2,y-size/2,size);
    rectMode(CENTER);
    push();
    translate(x,y);
    rotate(1/4*Math.PI)
    rect(0,0,size/2,size/2);
    pop();

    stroke(0);
    strokeWeight(size/8);
    noFill();
    arc(x-size/2, y+size/2, size, size, -HALF_PI, 0);
    arc(x+size/2, y-size/2, size, size, HALF_PI, PI);
    arc(x+size/2, y+size/2, size, size, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size, size, HALF_PI, 2*PI);

    stroke(220);
    strokeWeight(size/16);
    arc(x+size/2, y+size/2, size/3*2, size/3*2, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size/3*2, size/3*2, HALF_PI, 2*PI);
    arc(x+size/2, y+size/2, size/3, size/3, 0, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size/3, size/3, HALF_PI, 2*PI);
}

Looking Outwards – 05: 3D Computer Graphics

I love how Santi Zoraidez is able to use 3D computer graphics to render materials of multiple different objects with different textures, creating a surreal visual effect. Also, the collision of the hyper-realistic object, perfectly smooth texture, and the unrealistic physics of the items create a scene that viewers might believe is too real that it is not real at all. The ability to change textures at will and render them with perfect real-life physics (light and shadows), creates such a new type of art style, a style in between realism and surrealism, a purely imaginative discussion of space (artists goal) formed by realistic materials, textures and shapes (3D computer graphics). 

Link:

https://www.instagram.com/p/CX_tYgmNwn3/

Art by Santi Zoraidez

Blog 05

Erik Bean, an architect based in the UK, uses 3D modeling/rendering and digital illustration to comment on political issues in the UK and how it relates to the idea of a perfect society or “utopia.” His thesis work, Capital for the Collective: The Labour Miracle, uses a unique rendering style based loosely on old maps to bring together the real and imagined to propose a new way in which the public should interact with public space. In architecture, algorithms and certain computational technology is used to create larger renders such as Grasshopper, which help to simplify the work to build something digitally. I imagine that he used tools like this as well as digital illustration/editing tools and 3D modeling tools in order to create his detailed works. I appreciate the thought given to how public space/architecture interacts with politics and his addition of climate-focused architecture. Bean’s representations of the uniformity and chaos of people engaging in public spaces is a very interesting twist on traditional photorealistic renderings that have become so popular in architecture, and push usual student work into a whole new realm.

Capital for the Collective: Labour Miracle