SectionA – Page 12 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO-06

Chance music (leaving one or more aspect of the music up to random chance) is known to have existed in some form since Mozart, who is said to have used dice to determine the order of measures and musical phrases in some of his works. The genre really emerged and broadened during the 1900’s, however, when John Cage pioneered music that uses chance throughout the whole work. Music of Changes (for solo piano) is one of Cage’s earlier works in which he used the I Ching to compose the piece.

When composing this work, Cage wrote parts of the music such as melodies and chords, then he used the I Ching to arrange what he had written. After he had arranged the notes and had an overall sound concept, Cage restarted and used the I Ching to assign note durations, tempos, dynamics, and other musical elements.

Undergraduate music majors commonly study this piece in their music history and theory classes because it is one of the most randomized pieces in the literature. It brings about the question of whether or not it is music: there are no coherent melodic or harmonic lines, and a toddler could probably bang out something similar if seated in front of a piano. The composition style and intent behind it, however, is what makes it art. Cage predetermined notes and harmonies, then intentionally and methodically randomized and organized them. The piece might make a better talking point than listening experience, but it is interesting to know that it is out there.

Music of Changes (1951) by John Cage

Looking Outwards 6

After briefly touching on Perlin noise in class, I was curious to explore more and see the applicability of it in a more creative sense and quickly found that it can also be applied as a computationally randomized art design.

To start, Perlin noise was actually originally created to add realistic randomness to visual renderings of elements such as fire, smoke, and water. The inventor, Ken Perlin, created it for use in Tron, and actually won an Academy Award for the discovery and application.

The algorithm itself aims to create smoother transitions between numbers by interpolating and returning random numbers in between them. This “noise” function can also be applied in both 2D and 3D, hence creating applicability with lines and modelled objects.

Some applications of Perlin noise can also go beyond the typical use, such as these 2D line art pieces by Holger Lippman, which simulates various landscape images based off of different Perlin noise-algorithms that are used.

artwork created by Holger Lippman using the Perlin algorithm.

Project 6: Abstract Clock

For this week’s project, I garnered inspiration from my current home desk set up, where you can often find my air pods, succulent, and phone playing music.

sketch Download

// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project-06

function setup() {
    createCanvas(480, 380);
    background(244, 212, 212);
}

function draw() {
	// time variables
	var yr = year();
	var h = hour();
	var m = minute();
	var s = second();

	background(244, 212, 212);

	// iphone body
	fill(255);
	noStroke();
	rect(50, 40, 160, 305, 20);
	stroke(0);
	strokeWeight(0.2);
	fill(235);
	rect(57, 75, 147, 230);

	// time of day image
	if (h == 0 || h == 1 || h == 2 || h == 3 || h == 4 || h == 5 || h == 24) {
		// if between the hours of 12am and 5am, show night photo
		noStroke();
		fill(51, 83, 135);
		rect(77, 92, 105, 105);

		// moon
		fill(180);
		ellipse(140, 130, 35, 35);

		fill(130);
		ellipse(150, 132, 7, 7);
		ellipse(130, 130, 5, 5);
		ellipse(143, 121, 6, 6);
		ellipse(137, 139, 3, 3);

		// stars
		fill(255);
		ellipse(100, 110, 2, 10);
		ellipse(100, 110, 10, 2);
		ellipse(115, 150, 2, 8);
		ellipse(115, 150, 8, 2);
		ellipse(90, 160, 2, 12);
		ellipse(90, 160, 12, 2);
		ellipse(160, 100, 1, 7);
		ellipse(160, 100, 7, 1);
		ellipse(170, 155, 1, 7);
		ellipse(170, 155, 7, 1);

		// cloud 1
		ellipse(160, 175, 10, 10);
		ellipse(150, 170, 17, 17);
		ellipse(141, 173, 7, 7);
		ellipse(135, 175, 9, 9);
		rect(130, 171, 35, 10, 5);

		// cloud 2
		ellipse(110, 185, 8, 8);
		ellipse(105, 183, 5, 5);
		ellipse(101, 182, 7, 7);
		ellipse(97, 185, 6, 6);
		rect(93, 183, 20, 7, 4);

	} else if (h == 6 || h == 7 || h == 8 || h == 9 || h == 10 || h == 11) {
		// if between the hours of 6am and 11am, show dawn photo
		noStroke();
	    fill(255, 220, 131);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(247, 167, 107, 100);
	    ellipse(115 , 160, 45, 45);
	    ellipse(115 , 160, 35, 35);
	    fill(247, 167, 107);
	    ellipse(115, 160, 25, 25);

	    // cloud 1
	    fill(255);
	    ellipse(165, 125, 10, 10);
		ellipse(155, 120, 17, 17);
		ellipse(146, 123, 7, 7);
		ellipse(140, 125, 9, 9);
		rect(135, 121, 35, 10, 5);

		// cloud 2
		ellipse(170, 175, 8, 8);
		ellipse(165, 173, 5, 5);
		ellipse(161, 172, 7, 7);
		ellipse(157, 175, 6, 6);
		rect(153, 173, 20, 7, 4);

		// cloud 3
		ellipse(100, 108, 12, 12);
		ellipse(92, 112, 9, 9);
		ellipse(108, 110, 7, 7);
		ellipse(115, 110, 10, 10);
		rect(87, 111, 35, 7, 4);

	} else if (h == 12 || h == 13 || h == 14 || h == 15 || h == 16 || h == 17) {
		// if between the hours of 12pm and 5pm, show day photo
		noStroke();
	    fill(179, 227, 250);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(255, 220, 131, 100);
	    ellipse(130, 120, 45, 45);
	    ellipse(130, 120, 35, 35);
	    fill(255, 220, 131);
	    ellipse(130, 120, 25, 25);

	    // cloud 1
	    fill(255);
	    ellipse(100, 178, 12, 12);
		ellipse(92, 182, 9, 9);
		ellipse(108, 180, 7, 7);
		ellipse(115, 180, 10, 10);
		rect(87, 181, 35, 7, 4);

		// cloud 2
		ellipse(170, 165, 10, 10);
		ellipse(160, 160, 17, 17);
		ellipse(151, 163, 7, 7);
		ellipse(145, 165, 9, 9);
		rect(140, 161, 35, 10, 5);

	} else {
		// if between the hours of 6pm and 11pm, show dusk photo
		noStroke();
	    fill(108, 100, 173);
	    rect(77, 92, 105, 105);

	    // sun
	    fill(221, 216, 114, 100);
	    ellipse(150, 160, 40, 40);
	    ellipse(150, 160, 30, 30);
	    fill(221, 216, 114);
	    ellipse(150, 160, 20, 20);

	    // cloud 1
	    fill(255);
		ellipse(165, 115, 10, 10);
		ellipse(155, 110, 17, 17);
		ellipse(146, 113, 7, 7);
		ellipse(140, 115, 9, 9);
		rect(134, 111, 35, 10, 5);

		// cloud 2
		ellipse(110, 135, 8, 8);
		ellipse(105, 133, 5, 5);
		ellipse(101, 132, 7, 7);
		ellipse(97, 135, 6, 6);
		rect(93, 133, 20, 7, 4);s

		// cloud 3
		ellipse(100, 178, 12, 12);
		ellipse(92, 182, 9, 9);
		ellipse(108, 180, 7, 7);
		ellipse(115, 180, 10, 10);
		rect(87, 181, 35, 7, 4);

		// stars
		ellipse(115, 155, 2, 8);
		ellipse(115, 155, 8, 2);
		ellipse(100, 110, 2, 12);
		ellipse(100, 110, 12, 2);
		ellipse(140, 131, 1, 7);
		ellipse(140, 131, 7, 1);
	} 

	// minute line with marker
	stroke(0);
	strokeWeight(1);
	line(67, 215, 194, 215);
	fill(255);
	var mMapped = map(m, 1, 60, 67, 194);
	strokeWeight(.5);
	ellipse(mMapped, 215, 10, 10); // moving circle

	// seconds line with marker
	strokeWeight(1);
	line(67, 285, 194, 285);
	var sMapped = map(s, 1, 60, 67, 194);
	strokeWeight(.5);
	ellipse(sMapped, 285, 15, 15) // moving circle

	// show name of year on screen
	textSize(10);
	fill(0);
	text(yr + ' ~', 118, 235);

	// buttons and iphone details
	noStroke();
	fill(0);
	rect(125, 250, 3, 13); // pause button
	rect(132, 250, 3, 13);

	triangle(150, 250, 150, 263, 163, 257); // forward buttom
	triangle(156, 250, 156, 263, 168, 257); 

	triangle(104, 250, 104, 263, 92, 257); // backward buttom
	triangle(110, 250, 110, 263, 97, 257); 

	rect(115, 58, 30, 3); // top detail

	ellipse(105, 60, 6, 6); // top cameras
	ellipse(130, 50, 4, 4);

	noFill(); // home button
	stroke(0);
	strokeWeight(.5);
	ellipse(130, 325, 25, 25);

	// succulent pot
	fill(216, 186, 117);
	noStroke();
	circle(360, 285, 125, 125);
	fill(140, 122, 84);
	circle(360, 285, 100, 100);

    // succulent leaf # changes with hour, 12 leaves total
	if (h < 24 & h > 12) {
		h -= 12;
	}

    if (h == 0) {
	    h = 12;
    }
    
    // 8 big exterior leaves change
    for (var i = 0; i < h; i++) {
    	push();
    	translate(360, 285);
    	rotate(radians(45*i));
    	fill(139, 196, 118);
	    ellipse(0, 30, 25, 80);
	    pop();
    }

    // 4 interior leaves change
    for (var i = 8; i < h; i++) {
    	push();
    	translate(360, 285);
    	rotate(radians(90*i));
    	fill(174, 215, 152);
	    ellipse(0, 20, 15, 50);
	    pop();
    }

	// airpods case
	fill(255);
	push();
	rotate(radians(-20));
	rect(230, 160, 100, 107, 20);
	pop();
	strokeWeight(1);
	stroke(175);
	line(280, 100, 375, 65);

    // right airpod
    fill(255);
    noStroke();
	ellipse(435, 60, 30, 30);
	push();
	rotate(radians(30));
	rect(410, -170, 11, 45, 7);
	fill(175);
	ellipse(415, -128, 12, 8);
	fill(0);
	ellipse(404, -165, 10, 4);
	ellipse(396, -165, 3, 4);
	pop();

	// left airpod
	noStroke();
	ellipse(265, 180, 30, 30);
	push();
	rotate(radians(-30));
	rect(125, 285, 11, 45, 7);
	fill(175);
	ellipse(130, 325, 12, 9);
	fill(0);
	ellipse(142, 287, 10, 4);
	ellipse(150, 287, 3, 4);
	pop();
}

For the hour, I decided to use the number of leaves of the succulent to indicate the hour between 1 and 12. However, since there were only 12 leaves, and not 24, I gave context clues as to whether it was the am or pm of that hour using the picture on the phone.

Additionally, the phone indicates the year in text, and shows passage of minutes using the the top line and circular marker and passage of seconds using the bottom line and circular marker.

Here are some of the visual variations of my clock:

Lastly, here are some of my sketches, both from illustrator and my sketchbook!

illustrator sketch showing all 4 time of day options

Looking Outwards 6 – Minecraft Map

By Eamonn Burke

https://minecraft.gamepedia.com/File:Map_Zoom_4.png

This is a map from the video game Minecraft developed by Markus Persson. Every time a new “world” is started, the map is randomly generated to include a variety of biomes, oceans, and other features. What I admire about this computational art is that it makes the game infinitely engaging and fun. You never know exactly what kind of map scape you’ll get, which lends to never-ending exploration every time you start a new world.

Minecraft worlds are built on a grid, so I would guess that each map has a random amount of “blocks” designated for each biome (including 0) centered around random x and y coordinates. I would also guess that the terrain height has a random range, but are biased in ways so that mountains and caves are created with Perlin noise. As far as non-landscape features, like villages and temples, these are probably plotted randomly as well, with more common features like villages having higher probability distributions.

Persson’s creative sensibilities came in knowing how to bias the randomness -creating realistic landscapes using appropriate ranges and logical conditions. He also was able to create an incredibly immersive game conducive to exploration and creation, despite choosing “outdated” graphics.

Project-06: Abstract Clock

sketch Download

 /*
Nicholas Wong
Section A
*/


var d; //Days
var h; //Hours
var m; //Minutes
var s; //Seconds

var angle; //Angle for sin-wave frequency for pulse

function setup()
{
    createCanvas(480,480);
    angleMode(DEGREES); //Degrees instead of radians (makes mapping easier)
}
 
function draw() 
{
	translate (width/2,height/2) //Make origin at center
	rotate(-90) //Rotate -90 so starting points for most circle counters face up

	background(0); //Black background

	//Day circle (Outer circle)
	dayCircle();

	//Detail circles
	push();
	fill(0)
	strokeWeight(1)
	stroke(250,0,0);
	circle(0,0,200);
	pop();

	//Dark red circles
	push();
	noFill();
	stroke(1)
	stroke(50,0,0)
	circle(0,0)
	circle(0,0,65)
	circle(0,0,80);
	circle(0,0,100);
	circle(0,0,150);
	pop();


	//Hour circle (Second outer ring)
	hourCircle();

	//Minute circle (Tertiary rings)
	minuteCircle();

	//Second circle (Dotted inner ring)
	secondCircle();

	//Center-most pusling circle
	secondPulse();
    angle += (360/60) / 2; //1 period is 360/framerate, half makes 1 pulse/s

    
}

//Circle of 31 arcs
function dayCircle()
{
	var d = day();

	//Loop runs 31 times, the maximum number of days for any month
	for (let i=1; i<=31; i++)
	{

		push();
		noStroke();
		fill(50,0,0)
		arc(0,0,250,250,(i-1)*360/31,(i-1)*360/31 + 10.5); //Make 31 arcs

		//If the day is today, make the arc red
		if(i == d)
		{
			fill(250,0,0)
		}
		else //If not today, make arc dark red
		{
			fill(70,0,0)
		}

		//First day of month is slightly brighter red arc
		if(i==1)
		{
			fill(90,0,0)
		}

		arc(0,0,235,235,(i-1)*360/31,(i-1)*360/31 + 10.5); //Outer arc for aesthetics
		pop();

		//Additional circles for aesthetics
		noFill();
		stroke(255,0,0);
		circle(0,0,250);
		circle(0,0,200);
	}
}

//Circle with 24 segments
function hourCircle()
{
	var h = hour();

	//Loop is run for the amount of hours passed today
	for (let i=0; i<=h; i++)
	{

		push();
		noFill();
		
		stroke(200,0,0);
		strokeWeight(3)

		arc(0,0,150,150,i*15,i*15 + 6); //Add arcs for every hour that has passed today

		strokeWeight(0.35)

		push(0);
		rotate(-90)
		line(75*sin((-i*15)),75*cos((-i*15)),100*sin((-i*15)),100*cos((-i*15))) //Line drawn from arcs for aesthetics
		pop();

		stroke(255)
		strokeWeight(1)
		arc(0,0,140,140,i*15,i*15 + 6); //Secondary arc for aesthetics
		pop();
	}
}

//Circle of variable arc lengths that show minutes in an hour
function minuteCircle()
{
	var m = minute();

	let m_circle = map(m,0,60,0,360); //Map minutes in an hour to angles on a circle
    push();
    noFill();

    strokeWeight(2);
    stroke(200,0,0);

    //Creates an arc with arc length representing how many minutes has passed in this hour
   	arc(0,0,100,100,0,m_circle);

   	strokeWeight(2);
   	stroke(250,100,100);
   	arc(0,0,80,80,0,m_circle); //Aeshtetic secondary arc

   	pop();
}

//Circle of 60 segments that show seconds in a minute
function secondCircle()
{
	var s = second();

	//Loop runs for the amount of seconds passed in this minute
	for (i=0; i<=s; i++)
	{
		push();
		noFill();
		stroke(255,150,150);
		strokeWeight(1)
		arc(0,0,65,65,i*6,i*6 + 1); //Creates an arc for every second that has passed in this minute
		pop();
	}
}

//Circles in center that pulse every second
function secondPulse()
{

   	if (frameCount/60 == 1) //If the frame count is divisible by 60 (is a second)
   	{
   		angle = 180; //Angle is set to 180
   	}

    let s_diam = sin(angle) * 40; //Pulse maximum diameter

    push();

    noFill();
    strokeWeight(1)
    stroke(250,150,150)

    circle(0,0,s_diam); //Draw circle with variable diameter

    stroke(250,250,250)

    circle(0,0,s_diam * 0.75); //Second circle for aesthetics

    pop();
}

Mk2 tony diy arc reactor lamp stainless steel kit illuminant led flash light set Sale - Banggood.com

Inspired by tech stuff. Mostly Iron Man, I just re-watched Endgame.

Looking Outwards 6: Randomness

Jackson Pollock’s works are always described as being “random”, generated from “randomness”, being completely devoid of any generative structure, pattern or system. Some compare his work to a child or a madman flinging paint onto a canvas, with no consideration of composition, light, color, or any of the fundamental elements of what the masses consider “a painting”.

However, that isn’t quite true. Jackson Pollock’s paintings have been heavily analyzed, even down to the atomic level, by art critics and scientists alike. However, both agree that there is a system hidden in his work: The apparent strokes and patterns in the paintings look the same, regardless of how close an observer looks at it. In other words, there is a design containing a repeating structure of patterns. This is not so much randomness as it is chaos.

People often lump the word “chaos” with the word “random”, but they are different concepts. Chaos is present in deterministic systems whose behavior, can in principle, be predicted. Large, complex systems have deterministic laws that are highly sensitive to initial conditions. A common metaphor for this is the Butterfly Effect; A butterfly flapping its wings in China can cause a Hurricane in Texas through a cascade of events. Although the apparent cause of the hurricane in this metaphorical butterfly-hurricane system is “randomness”, there exists hints of underlying patterns, feedback loops, and self organization. The same hints of a mathematical system exist within Pollock’s work – The same system which nature uses to guide the growth of blood vessels, tree branches, and even galaxies.

Project-06: Abstract Clock

This project posed a large challenge in how I was going to sync up each lightning strike on the minute, but it turned out to be a really simple solution once I sat down to get it. On each minute, lightning strikes as a line and strokeWeight decreases over the minute, causing it to fade like a real strike. Every hour, another cloud is added until it resets at 00:00.

cloud

var cloudx = [] //where to draw each cloud
var cloudy = []
var strikeTime; //the timing of the lightning strike







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

function draw() {
    numClouds = hour() //adds a cloud for every hour
    strikeTime = ((60 - second()) / 10) //lightning strikes on the minute and fades
    background(48, 4, 181)
        for (m = 0; m <= numClouds; m ++) { //randomly determines cloud coordinates and sends to array
        		cloudx.push(random(40, 440))
        		cloudy.push(random(40, 440))
}
        for (i = 0; i < numClouds; i++) { //draws cloud and lightning
        	cloud(cloudx[i], cloudy[i], 15)
        	strike(cloudx[i], cloudy[i])
        	         }
}

function cloud(cloudx, cloudy, cloudsize){ //instructions for each cloud
	push()
	translate(cloudx, cloudy)
	fill(40, 40, 40, 188)
	ellipse(-10, 0, cloudsize)
	ellipse(0, -10, cloudsize)
	ellipse(0, 0, cloudsize)
	ellipse(10, 0, cloudsize)
	pop()
}



function strike(cloudx, cloudy){ //instructions for lightning
    push()
	translate(cloudx, cloudy)
	strokeWeight(strikeTime)
	stroke(255, 255, 0)
	line(0, 0, 10, 10)
	line(10, 10, -20, 20)
	line(-20, 20, 15, 30)
	pop()
}

LO-06: Randomness

I looked into the String Quartet by Witold Lutoslawski, a randomly determined piece made in the 20th century style of aleatoricism, a composition style where elements of the score and performance are left to chance. Many of the rhythms and articulations of the piece are left up to chance, such as repetition until the audience is quiet, or determining tempo through counting seconds. An analysis of the score shows it to be very complex, with new music notations such as wavy lines as beams and instructions on the score. It appears to be chaotic and disjointed but various elements of the score show that it is heavily dependent on communication by the members of the quartet, with synchronized exits and entrances. Repetitions are also determined by the members of the quartet or the audience. Lutoslawski experienced great repression of his work by the Soviet Union, with some of his pieces being banned for “inaccessibility”. However, he only lived in the USSR as he was forced out of Poland by World War II. His music, I believe, reflects these challenges but also acknowledges order and stability in dark times, when each part comes together to create flowing soundscapes and peaceful silence.

LO-06 (randomness)

For this LO, I scoured the internet for randomness projects and I ultimately came upon this random script generator. Although the creation date and author is unknown, it is quite a robust software. After generating multiple scripts using a variation of around 30 inputs to generate the script, it was pretty clear that the results had enough variation to deem it to be sufficiently random. However, just how random is this script exactly? Assuming all 30 inputs each change a small part of the script then there could be theoretically be up to 30^30*the available words in the dictionary versions of scripts generated. This isn’t the case though, as after reading a couple scripts, I noticed that many themes and sentences were in fact being repurposed and reused, thus this program utilizes “pseudo” randomness.

https://www.plot-generator.org.uk/movie-script/

PROJECT-06 (clock)

move your mouse around to stabilize the clock!

sketch

// SEAN CHEN
// 15-104 A

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

function randomizer() { // giving the design "chaos"
    var diff = dist(width/2, height/2, mouseX, mouseY);
    if (diff > 25) {
        // more random shifting based on dist from center to mouse
        var chaos = random(-1, 1) * (diff-25)/25;
    } else {
        var chaos = random(-1, 1) * 0.175; // mini shifts for "texture"
    }
    return chaos;
}

function border() { // border ring including seconds hand
    textAlign(CENTER, BOTTOM);
    for (var i = 0; i < 60; i++) {
        push();
        textSize(9);
        if (second() == i) { // if second matches rotation, display sec location
            rotate(radians(6*i+randomizer()));
            textStyle(ITALIC);
            textStyle(BOLD);
            textAlign(LEFT, CENTER);
            rotate(radians(-90)); 
            text(' second ' + second(), 250+randomizer(), 0);
        } else { // say border otherwise
            rotate(radians(6*i+randomizer()));
            text('border', 0, -250+randomizer());
        }
        pop();
    }

}

function face() { // clock face
    push();
    textAlign(CENTER, BOTTOM);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    fill(color(constrain(200-diff, 0, 200)));
    for (var thick = 0; thick < 25; thick++){
        for (var i = 0; i < 60; i++) {
            push();
            rotate(radians(6*i));
            textSize(9);
            text('face', 0, -10*(thick+randomizer()));
            pop();
        }
    }
    pop();
}

function minHand() { // minute hand
    push();
    rotate(radians(6*minute()+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('minute', 30*num+20, 0);
        } else {
            text('minute '+ minute(), 30*num+20, 0);
        }
        pop();
    }
    pop();
}

function hrHand() { // hour hand
    var hr;
    if (hour() > 12) { // convert 24 hr to 12 hr
        hr = hour()-12;
    } else {
        hr = hour();
    }
    push();
    rotate(radians(30*hr+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('hour', 20*num+20, 0);
        } else {
            text('hour '+hr, 20*num+20, 0);
        }
        pop();
    }
    pop();
}

function logo() { // how to operate clock
    push();
    strokeWeight(2);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    ellipse(mouseX, mouseY, 5*diff/10, 2.5*diff/10);
    textStyle(ITALIC);
    textAlign(CENTER, CENTER);
    textSize(8*diff/100);
    text('clock', mouseX, mouseY);
    textSize(3*diff/100);
    textAlign(CENTER, CENTER);
    text('\n(move to stablize)', mouseX, mouseY+7);
    pop();
}

function draw() {
    background(255);
    push();
    translate(width/2+randomizer(), height/2+randomizer()); 
    border();
    face();
    minHand();
    hrHand();
    pop();
    logo();
}