// Yash Mittal
// Section D
var r1; // road 1
var r2; // road 2
var r3; // road 3
var secondscarwidth;
var minutecarwidth;
var hourcarwidth;
function setup() {
createCanvas(480, 480);
background (200);
}
function road1 (r1) {
noStroke();
fill (50);
rect (0, (height / 2 - 30), width, (height / 2 - 160)); // road 1
fill (250);
rect (40, (height / 2 + 3), 50, 10); // white stripe 1
rect (150, (height / 2 + 3), 50, 10); // white stripe 2
rect (260, (height / 2 + 3), 50, 10); // white stripe 3
rect (370, (height / 2 + 3), 50, 10); // white stripe 4
fill ("yellow");
rect (0, (height / 2 - 30), width, 5); // yellow stripe 1
rect (0, (height / 2 + 45), width, 5); // yellow stripe 2
}
function road2 (r2) {
fill (50);
rect (0, (height / 2 + 140), width, (height / 2 - 160)); // road 1
fill (250);
rect (40, (height / 2 + 173), 50, 10); // white stripe 1
rect (150, (height / 2 + 173), 50, 10); // white stripe 2
rect (260, (height / 2 + 173), 50, 10); // white stripe 3
rect (370, (height / 2 + 173), 50, 10); // white stripe 4
fill ("yellow");
rect (0, (height / 2 + 140), width, 5); // yellow stripe 1
rect (0, (height / 2 + 215), width, 5); // yellow stripe 2
}
function road3 (r3) {
fill (50);
rect (0, (height / 2 - 200), width, (height / 2 - 160)); // road 1
fill (250);
rect (40, (height / 2 - 167), 50, 10); // white stripe 1
rect (150, (height / 2 - 167), 50, 10); // white stripe 2
rect (260, (height / 2 - 167), 50, 10); // white stripe 3
rect (370, (height / 2 - 167), 50, 10); // white stripe 4
fill ("yellow");
rect (0, (height / 2 - 200), width, 5); // yellow stripe 1
rect (0, (height / 2 - 125), width, 5); // yellow stripe 2
}
function draw() {
background (10);
var sc = second(); // seconds
var mt = minute(); // minutes
var hr = hour(); // hours
road1 (r1);
road2 (r2);
road3 (r3);
var secondscarwidth = map (sc, 0, 59, -5, width - 3); // variable for seconds
var minutecarwidth = map (mt, 0, 59, -5, width - 3); // variable for minutes
var hourcarwidth = map (hr, 0, 23, -5, width - 3); // variable for hours
// car 1 - seconds car
fill (150, 0, 0);
rect (secondscarwidth, 60, 70, 40); // base of car
fill (100, 0, 0);
triangle (secondscarwidth + 35, 80, secondscarwidth + 70, 60, secondscarwidth + 70, 100); // window highlight
fill (250, 0, 0);
rect (secondscarwidth + 18, 70, 35, 20); // roof of car
fill (255, 255, 0);
rect (secondscarwidth + 70, 65, 2, 10); // headlight 1
rect (secondscarwidth + 70, 85, 2, 10); // headlight 2
fill (200, 0, 0);
rect (secondscarwidth + 50, 57, 10, 3); // side mirror 1
rect (secondscarwidth + 50, 100, 10, 3); // side mirror 2
// car 2 - minutes car
fill (173, 216, 230);
rect (minutecarwidth, 230, 70, 40); // base of car
fill (30, 144, 255);
triangle (minutecarwidth + 35, 250, minutecarwidth + 70, 230, minutecarwidth + 70, 270); // window highlight
fill (70, 130, 180);
rect (minutecarwidth + 18, 240, 35, 20); // roof of car
fill (255, 255, 0);
rect (minutecarwidth + 70, 235, 2, 10); // headlight 1
rect (minutecarwidth + 70, 255, 2, 10); // headlight 2
fill (135, 206, 255);
rect (minutecarwidth + 50, 227, 10, 3); // side mirror 1
rect (minutecarwidth + 50, 270, 10, 3); // side mirror 2
// car 3 - hours car
fill (0, 255, 127);
rect (hourcarwidth, 400, 70, 40); // base of car
fill (150, 205, 50);
triangle (hourcarwidth + 35, 420, hourcarwidth + 70, 400, hourcarwidth + 70, 440); // window highlight
fill (0, 165, 0);
rect (hourcarwidth + 18, 410, 35, 20); // roof of car
fill (255, 255, 0);
rect (hourcarwidth + 70, 405, 2, 10); // headlight 1
rect (hourcarwidth + 70, 425, 2, 10); // headlight 2
fill (152, 251, 152);
rect (hourcarwidth + 50, 397, 10, 3); // side mirror 1
rect (hourcarwidth + 50, 440, 10, 3); // side mirror 2
}
I wanted to keep my idea simple yet creative so I decided to make three roads with each car assigned to seconds, minutes, and hours respectively. The concept is very basic but I am happy with how the execution turned out because I was afraid that the car wouldn’t actually represent a car but I think it turned out well.
For this weeks blog, I chose to analyze Bogdan Soban’s artwork, which is generated through random generative processes. Each art pieces, although follows a similar workflow, look very unique and different compared to each other. His overall art style can be seen as a common theme in all his work but the way he depicts this theme is differed by elements like color palette and level of abstraction. Soban uses complex mathematical formulas to develop these highly abstract and complicated pieces. He also uses a programming language called Visual Basic for most of his abstract work and then uses a random number generator to calculate the seed start time for the generative process. On his website, you can see some of the programs he has used to create these art pieces.
//Emilio Bustamante
//ebustama@andrew.cmu.edu
//Section D
//Project-06-Abstract clock
function setup() {
createCanvas(415, 415);
}
function draw() {
//variables for the time
var seconds = second();
var minutes = minute();
var hours= hour();
background(0)
push();
stroke(255);
strokeWeight(1);
// hours
line(hours*2,0,0,hours*2);
line(hours*4,0,0,hours*4);
line(hours*6,0,0,hours*6);
line(hours*8,0,0,hours*8);
line(hours*10,0,0,hours*10);
line(hours*12,0,0,hours*12);
line(hours*14,0,0,hours*14);
line(hours*16,0,0,hours*16);
line(hours*18,0,0,hours*18);
line(hours*20,0,0,hours*20);
line(hours*22,0,0,hours*22);
line(hours*24,0,0,hours*24);
line(hours*26,0,0,hours*26);
line(hours*28,0,0,hours*28);
line(hours*30,0,0,hours*30);
line(hours*32,0,0,hours*32);
// hours real time line
stroke(0,255,0);
strokeWeight(3);
line(hours*34,0,0,hours*34);
stroke(255);
strokeWeight(1);
line(hours*36,0,0,hours*36);
line(hours*38,0,0,hours*38);
line(hours*40,0,0,hours*40);
line(hours*42,0,0,hours*42);
line(hours*44,0,0,hours*44);
line(hours*46,0,0,hours*46);
line(hours*48,0,0,hours*48);
line(hours*50,0,0,hours*50);
// minutes
line(0,minutes,415,minutes);
line(0,minutes*2,415,minutes*2);
line(0,minutes*3,415,minutes*3);
line(0,minutes*4,415,minutes*4);
line(0,minutes*5,415,minutes*5);
// minutes real time line
stroke(0,255,0);
strokeWeight(3);
line(0,minutes*6,415,minutes*6);
stroke(255);
strokeWeight(1);
line(0,minutes*7,415,minutes*7);
line(0,minutes*8,415,minutes*8);
line(0,minutes*9,415,minutes*9);
line(0,minutes*10,415,minutes*10);
line(0,minutes*11,415,minutes*11);
line(0,minutes*12,415,minutes*12);
line(0,minutes*13,415,minutes*13);
line(0,minutes*14,415,minutes*14);
line(0,minutes*15,415,minutes*15);
line(0,minutes*16,415,minutes*16);
line(0,minutes*17,415,minutes*17);
line(0,minutes*18,415,minutes*18);
line(0,minutes*19,415,minutes*19);
line(0,minutes*20,415,minutes*20);
line(0,minutes*21,415,minutes*21);
line(0,minutes*22,415,minutes*22);
line(0,minutes*23,415,minutes*23);
line(0,minutes*24,415,minutes*24);
line(0,minutes*25,415,minutes*25);
line(0,minutes*26,415,minutes*26);
line(0,minutes*27,415,minutes*27);
line(0,minutes*28,415,minutes*28);
line(0,minutes*29,415,minutes*29);
line(0,minutes*30,415,minutes*30);
line(0,minutes*31,415,minutes*31);
line(0,minutes*32,415,minutes*32);
line(0,minutes*33,415,minutes*33);
line(0,minutes*34,415,minutes*34);
line(0,minutes*35,415,minutes*35);
line(0,minutes*36,415,minutes*36);
line(0,minutes*37,415,minutes*37);
line(0,minutes*38,415,minutes*38);
line(0,minutes*39,415,minutes*39);
line(0,minutes*40,415,minutes*40);
line(0,minutes*41,415,minutes*41);
line(0,minutes*42,415,minutes*42);
line(0,minutes*43,415,minutes*43);
line(0,minutes*44,415,minutes*44);
line(0,minutes*45,415,minutes*45);
line(0,minutes*46,415,minutes*46);
line(0,minutes*47,415,minutes*47);
line(0,minutes*48,415,minutes*48);
line(0,minutes*49,415,minutes*49);
line(0,minutes*50,415,minutes*50);
//seconds
line(seconds,0,seconds,415);
line(seconds*2,0,seconds*2,415);
line(seconds*3,0,seconds*3,415);
line(seconds*4,0,seconds*4,415);
line(seconds*5,0,seconds*5,415);
line(seconds*6,0,seconds*6,415);
// seconds real time line
stroke(0,255,0);
strokeWeight(3);
line(seconds*7,0,seconds*7,415);
stroke(255);
strokeWeight(1);
line(seconds*8,0,seconds*8,415);
line(seconds*9,0,seconds*9,415);
line(seconds*10,0,seconds*10,415);
line(seconds*11,0,seconds*11,415);
line(seconds*12,0,seconds*12,415);
line(seconds*13,0,seconds*13,415);
line(seconds*14,0,seconds*14,415);
line(seconds*15,0,seconds*15,415);
line(seconds*16,0,seconds*16,415);
line(seconds*17,0,seconds*17,415);
line(seconds*18,0,seconds*18,415);
line(seconds*19,0,seconds*19,415);
line(seconds*20,0,seconds*20,415);
line(seconds*21,0,seconds*21,415);
line(seconds*22,0,seconds*22,415);
line(seconds*23,0,seconds*23,415);
line(seconds*24,0,seconds*24,415);
line(seconds*25,0,seconds*25,415);
line(seconds*26,0,seconds*26,415);
line(seconds*27,0,seconds*27,415);
line(seconds*28,0,seconds*28,415);
line(seconds*29,0,seconds*29,415);
line(seconds*30,0,seconds*30,415);
line(seconds*31,0,seconds*31,415);
line(seconds*32,0,seconds*32,415);
line(seconds*33,0,seconds*33,415);
line(seconds*34,0,seconds*34,415);
line(seconds*35,0,seconds*35,415);
line(seconds*36,0,seconds*36,415);
line(seconds*37,0,seconds*37,415);
line(seconds*38,0,seconds*38,415);
line(seconds*39,0,seconds*39,415);
line(seconds*40,0,seconds*40,415);
line(seconds*41,0,seconds*41,415);
line(seconds*42,0,seconds*42,415);
line(seconds*43,0,seconds*43,415);
line(seconds*44,0,seconds*44,415);
line(seconds*45,0,seconds*45,415);
line(seconds*46,0,seconds*46,415);
line(seconds*47,0,seconds*47,415);
line(seconds*48,0,seconds*48,415);
line(seconds*49,0,seconds*49,415);
line(seconds*50,0,seconds*50,415);
pop();
// red reference lines
stroke(255,0,0);
strokeWeight(3);
var y = 0;
var spacing = 7;
var len= 7;
//seconds red lines
for (var x = 0; x <= 415; x += spacing) {
line(x, y, x, y + len);
}
//minutes red lines
for (var y = 0; y <= 415; y += 7) {
for (var x = 0; x <=0; x += 7) {
line(x, y, x + len, y );
}
}
//hours red lines
var w = width/24;
var h = height/24;
var y = 0;
for (var x = 0; x < width; x += w) {
line(x, y, x + len, y );
y += h;
}
}
This clock intends to create different forms depending on the time of the day by overlapping different groups of lines oriented by seconds, minutes and hours. Each group of lines would have multiple lines to create a grid but the green lines will determine the time it is.
//Emilio Bustamante
//ebustama@andrew.cmu.edu
//Section D
//Project-06-Abstract clock
function setup() {
createCanvas(415, 415);
}
function draw() {
//variables for the time
var seconds = second();
var minutes = minute();
var hours= hour();
background(0)
push();
stroke(255);
strokeWeight(1);
// hours
line(hours*2,0,0,hours*2);
line(hours*4,0,0,hours*4);
line(hours*6,0,0,hours*6);
line(hours*8,0,0,hours*8);
line(hours*10,0,0,hours*10);
line(hours*12,0,0,hours*12);
line(hours*14,0,0,hours*14);
line(hours*16,0,0,hours*16);
line(hours*18,0,0,hours*18);
line(hours*20,0,0,hours*20);
line(hours*22,0,0,hours*22);
line(hours*24,0,0,hours*24);
line(hours*26,0,0,hours*26);
line(hours*28,0,0,hours*28);
line(hours*30,0,0,hours*30);
line(hours*32,0,0,hours*32);
// hours real time line
stroke(0,255,0);
strokeWeight(3);
line(hours*34,0,0,hours*34);
stroke(255);
strokeWeight(1);
line(hours*36,0,0,hours*36);
line(hours*38,0,0,hours*38);
line(hours*40,0,0,hours*40);
line(hours*42,0,0,hours*42);
line(hours*44,0,0,hours*44);
line(hours*46,0,0,hours*46);
line(hours*48,0,0,hours*48);
line(hours*50,0,0,hours*50);
// minutes
line(0,minutes,415,minutes);
line(0,minutes*2,415,minutes*2);
line(0,minutes*3,415,minutes*3);
line(0,minutes*4,415,minutes*4);
line(0,minutes*5,415,minutes*5);
// minutes real time line
stroke(0,255,0);
strokeWeight(3);
line(0,minutes*6,415,minutes*6);
stroke(255);
strokeWeight(1);
line(0,minutes*7,415,minutes*7);
line(0,minutes*8,415,minutes*8);
line(0,minutes*9,415,minutes*9);
line(0,minutes*10,415,minutes*10);
line(0,minutes*11,415,minutes*11);
line(0,minutes*12,415,minutes*12);
line(0,minutes*13,415,minutes*13);
line(0,minutes*14,415,minutes*14);
line(0,minutes*15,415,minutes*15);
line(0,minutes*16,415,minutes*16);
line(0,minutes*17,415,minutes*17);
line(0,minutes*18,415,minutes*18);
line(0,minutes*19,415,minutes*19);
line(0,minutes*20,415,minutes*20);
line(0,minutes*21,415,minutes*21);
line(0,minutes*22,415,minutes*22);
line(0,minutes*23,415,minutes*23);
line(0,minutes*24,415,minutes*24);
line(0,minutes*25,415,minutes*25);
line(0,minutes*26,415,minutes*26);
line(0,minutes*27,415,minutes*27);
line(0,minutes*28,415,minutes*28);
line(0,minutes*29,415,minutes*29);
line(0,minutes*30,415,minutes*30);
line(0,minutes*31,415,minutes*31);
line(0,minutes*32,415,minutes*32);
line(0,minutes*33,415,minutes*33);
line(0,minutes*34,415,minutes*34);
line(0,minutes*35,415,minutes*35);
line(0,minutes*36,415,minutes*36);
line(0,minutes*37,415,minutes*37);
line(0,minutes*38,415,minutes*38);
line(0,minutes*39,415,minutes*39);
line(0,minutes*40,415,minutes*40);
line(0,minutes*41,415,minutes*41);
line(0,minutes*42,415,minutes*42);
line(0,minutes*43,415,minutes*43);
line(0,minutes*44,415,minutes*44);
line(0,minutes*45,415,minutes*45);
line(0,minutes*46,415,minutes*46);
line(0,minutes*47,415,minutes*47);
line(0,minutes*48,415,minutes*48);
line(0,minutes*49,415,minutes*49);
line(0,minutes*50,415,minutes*50);
//seconds
line(seconds,0,seconds,415);
line(seconds*2,0,seconds*2,415);
line(seconds*3,0,seconds*3,415);
line(seconds*4,0,seconds*4,415);
line(seconds*5,0,seconds*5,415);
line(seconds*6,0,seconds*6,415);
// seconds real time line
stroke(0,255,0);
strokeWeight(3);
line(seconds*7,0,seconds*7,415);
stroke(255);
strokeWeight(1);
line(seconds*8,0,seconds*8,415);
line(seconds*9,0,seconds*9,415);
line(seconds*10,0,seconds*10,415);
line(seconds*11,0,seconds*11,415);
line(seconds*12,0,seconds*12,415);
line(seconds*13,0,seconds*13,415);
line(seconds*14,0,seconds*14,415);
line(seconds*15,0,seconds*15,415);
line(seconds*16,0,seconds*16,415);
line(seconds*17,0,seconds*17,415);
line(seconds*18,0,seconds*18,415);
line(seconds*19,0,seconds*19,415);
line(seconds*20,0,seconds*20,415);
line(seconds*21,0,seconds*21,415);
line(seconds*22,0,seconds*22,415);
line(seconds*23,0,seconds*23,415);
line(seconds*24,0,seconds*24,415);
line(seconds*25,0,seconds*25,415);
line(seconds*26,0,seconds*26,415);
line(seconds*27,0,seconds*27,415);
line(seconds*28,0,seconds*28,415);
line(seconds*29,0,seconds*29,415);
line(seconds*30,0,seconds*30,415);
line(seconds*31,0,seconds*31,415);
line(seconds*32,0,seconds*32,415);
line(seconds*33,0,seconds*33,415);
line(seconds*34,0,seconds*34,415);
line(seconds*35,0,seconds*35,415);
line(seconds*36,0,seconds*36,415);
line(seconds*37,0,seconds*37,415);
line(seconds*38,0,seconds*38,415);
line(seconds*39,0,seconds*39,415);
line(seconds*40,0,seconds*40,415);
line(seconds*41,0,seconds*41,415);
line(seconds*42,0,seconds*42,415);
line(seconds*43,0,seconds*43,415);
line(seconds*44,0,seconds*44,415);
line(seconds*45,0,seconds*45,415);
line(seconds*46,0,seconds*46,415);
line(seconds*47,0,seconds*47,415);
line(seconds*48,0,seconds*48,415);
line(seconds*49,0,seconds*49,415);
line(seconds*50,0,seconds*50,415);
pop();
// red reference lines
stroke(255,0,0);
strokeWeight(3);
var y = 0;
var spacing = 7;
var len= 7;
//seconds red lines
for (var x = 0; x <= 415; x += spacing) {
line(x, y, x, y + len);
}
//minutes red lines
for (var y = 0; y <= 415; y += 7) {
for (var x = 0; x <=0; x += 7) {
line(x, y, x + len, y );
}
}
//hours red lines
var w = width/24;
var h = height/24;
var y = 0;
for (var x = 0; x < width; x += w) {
line(x, y, x + len, y );
y += h;
}
}
// project 06
// gnmarino@andrew.cmu.edu
// Gia Marino
// Section D
var theta = 0; // references theta in draw function only
var m; // current minute
var h; // current hour
function setup() {
createCanvas(480, 480);
background(255);
}
function draw() {
translate(width/2, height/2);
// rotates whole clock
rotate(radians(theta));
// draws the whole clock
NightAndDay(); // draws the night and day sides of the circle
sun(0, height/2 - 80);
moon(0, -height/2 + 80);
clouds(width/2 - 25, 0);
diamonds(-width/2 + 25, 0);
// takes current time and calculates how much to rotate the clock
// every minute the clock should turn .25 degrees
// every hour the clock should have rotated 15 more degrees
m = minute();
h = hour();
theta = (h * 15) + (m * .25);
}
function sun(sunX, sunY) {
push();
// orangey yellow color for sun
fill(253, 208, 25);
// moves sun to coordinates stated in draw function
translate(sunX, sunY);
circle(0, 0, 50); // middle of sun
// strokeWeight and loop makes the sun rays
strokeWeight(2);
for (theta = 0; theta < 360; theta += 45) {
rotate(radians(theta));
line(30, 0, 37, 0);
}
pop();
}
function moon(moonX, moonY) {
push();
fill(220); // light grey
// moves moon to coordinates stated in draw function
translate(moonX, moonY);
circle(0, 0, 50);
pop();
}
function diamonds(diamondX, diamondY) {
push();
noFill();
strokeWeight(5);
// counter keeps track how many times the for-loop loops
// needs to start at 12 so the diamonds don't fill in when it's before noon
var counter = 12;
// loop rotates and draws diamonds
for (theta = 7; theta < 177; theta += 15) {
push();
rotate(radians(theta));
// moves diamonds to coordinates stated in draw function
translate(diamondX, diamondY)
// scale & rotate are used to make diamonds look better along the border
scale(.25);
rotate(radians(90));
// if statement says the diamonds should be filled in based on the hour
// diamond fills in after every hour passes
// if clock hasn't passed that hour yet then diamond stays unfilled
// diamonds fill in for 1pm to 12 am
if (counter < h) {
fill(255);
} else {
noFill();
}
// draws 1 diamond every time
beginShape();
vertex(-20, 0);
quadraticVertex(-10, -5, 0, -30);
quadraticVertex(10, -5, 20, 0);
quadraticVertex(10, 5, 0, 30);
quadraticVertex(-10, 5, -20, 0);
endShape();
pop();
counter += 1; // adds 1 everytime loop ends
}
pop();
}
function clouds(cloudX, cloudY) {
push();
strokeWeight(5);
noFill();
// counter keeps track how many times the for-loop loops
// counter starts at zero so clouds starts filling after 1st hour has passed
var counter = 0;
// loop rotates and draws clouds
for (theta = 7; theta < 177; theta += 15) {
push();
rotate(radians(theta));
// moves clouds to coordinates stated in draw function
translate(cloudX, cloudY);
// scale & rotate are used to make clouds look better along the border
scale(.25);
rotate(radians(90));
// if statement says the clouds should be filled in based on the hour
// cloud fills in after every hour passes
// if clock hasn't passed that hour yet then cloud stays unfilled
// clouds fill in for 1 am to 12 pm
if (counter <= h) {
fill(255);
} else {
noFill();
}
// draws 1 cloud every time
beginShape();
vertex(0, 0);
quadraticVertex(-45, 5, -40, -10);
quadraticVertex(-35, -30, -15, -20);
quadraticVertex(-20, -40, 0, -40);
quadraticVertex(20, -40, 15, -20);
quadraticVertex(35, -30, 40, -10);
quadraticVertex(45, 5, 0, 0);
endShape();
pop();
counter += 1; // adds 1 everytime loop ends
}
pop();
}
function NightAndDay() {
push();
// yellow half circle represents day time
fill(255, 238, 127); // yellow
arc(0, 0, width, height, radians(0), radians(180));
// navy half circle represents night time
fill(60, 67, 129); // navy
arc(0, 0, width, height, radians(180), radians(360));
pop();
}
For this assignment I actually got inspiration from the Minecraft clock because it is the first example I could think of for a non-western standard clock.
I started off by deciding that I wanted the daylight half circle to be fully on the top and vice versa with the night side.
My Sketch
I ended up deciding that I wanted the clock to emulate how the sky typically looks if you are at a reasonable latitude on earth. So, when it is noon and the sun is highest in the sky then I want the clock’s yellow side to be fully on top so it looks like what you’d see if you’d looked outside at noon. It also kinda shows when the sun rises and sets too.
Lastly, I decided that I wanted someone to be looking at my clock and know what time it is and not completely guess. So, I made little hour symbols (the clouds and diamonds) light up every time an hour passes. This makes it when you look at the clock you can count how many clouds or diamonds are white and know it’s been x amount of hours.
The project I am looking at this week is called “Random Walk with Pi #1” It is created by Cristian Vasile and was uploaded February 26th, 2014.
“Random Walk With Pi #1”
I really like this artist’s work overall because he uses random functions and manipulates them with these complex algorithms to make these amazing and methodical pieces.
In this piece specifically he utilized random walk (just like the one we learned in class) on pi’s first 10,000 digits which he then converted it to a geographic coordinate on earth’s surface. Clearly, he had to use very sophisticated formulas to take these random walk paths and then proportion them to coordinates on a geographical map.
What I really like about this piece is comparing it with other pieces from the same artist. He also used random walk with “E” and the golden ration. It is very cool to see how the 3 pieces are different, but also very similar in randomness because they all used random walk.
Overall, I think it is a really cool and artistic way to use random walk and complex algorithms. I never thought random walk and math would look so pretty.
During my career I have never seen randomness in architecture. A group of fourth year students created a project which uses randomness in their design process. By combining controls and randomness they are able to create forms which have a lot of variations but still have a logical composition. The script does something similar to what we are learning in p5js. They created parameters which the random values needed to follow like how far away can an object be from its origin. Multiple random boxes were stacked to create different megastructures and analyze different compositions. This allowed for fast form making and manipulation.
function setup() {
createCanvas(350, 350);
}
function draw() {
background(225, 213, 197);
var s = second();
var h = hour();
var m = minute();
mini(m); //blue circles (minute)
horse(h); // black rectangle (hour)
circ(s); // yellow circle (seconds)
}
//yellow circle grows according to seconds and red rectangle gets longer
function circ(s) {
noStroke();
fill("orange")
ellipse(175, 175, s * 3, s * 3);
fill(209, 54, 48)
rect(50, 0, 30, s * 6)
//rect(300, 0, 30, s * 6)
}
//blue circles grow according to the minute
function mini(m) {
noStroke();
fill(37, 105, 193)
ellipse(0, 175, m * 6, m * 6)
ellipse(350, 175, m * 6, m * 6)
//triangle(0, 350, m * 5, m * 5, 0, 0)
}
//hour is represented by black rectangle, width and height grow every hour
function horse(h) {
noStroke();
rectMode(CENTER);
fill("black")
rect(175, 80, h * 5, h * 5)
}
This project was a doozy. I decided to make it in the style of Bauhaus because to me that it was abstract design encompasses. With this design that I made, the circle in the middle and the reed line correspond to the seconds, the square in the center corresponds to the hour, and the blue circles represent the minutes.
Letterfield by Judson Rosebush was created in 1978. It was created by using a random number generator that had numbers that corresponded to the letter size, color, and position of the type that appeared. It was then outputted to a plotter and then physically printed. I think what intrigues me most about this piece is how it played with randomness computationally, and then a tangible item was produced from it. This allows the artist to use randomness and their creativity to not only have art exist in a digital format, but also in a physical way that could be used as a piece for historical study years to come which is almost exactly what I am doing right now. I think how this was done computationally was that variables were assigned to different things such as size, color, and position and then when calling that variable, a random function was used, generating very different compositions every single time.
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Assignment 06-A: Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
var minu = minute();
//sky darkens by the hour
background(hour()*5);
//scoop slowly falls by the minute
for (var col = 0; col <= 5 * minu; col+=1) {
fill("pink");
push();
translate(225, 40);
circle(0, col, 20);
pop();
}
//arm waves for each second
if (second()%2 == 0){
line(150, 350, 100, 325);
} else if (second()%2 != 0){
line(150, 350, 100, 375);
}
//stick figure man
fill("white");
circle(150, 300, 50); //head
fill("black");
circle(140, 298, 5);
circle(160, 298, 5);
line(150, 325, 150, 400); //back
line(150, 400, 125, 450); //left leg
line(150, 400, 175, 450); //right leg
line(150, 350, 225, 350); //arm with ice cream
fill(250, 215, 160);
triangle(225, 365, 215, 345, 235, 345); //ice cream cone
}
Drawing of what I wanted to make.8:59PM.
I really wanted the program to have ice cream scoops stacking, but I couldn’t figure out a way to do it without my code crashing (since the y of the circle would have to be -=, but you can’t have negative minutes). Instead it is falling very slowly until it falls onto the cone at 59 minutes.
For this week’s LO, I looked back on a game I used to play a lot as a kid: Minecraft created in 2011 by Mojang. It is interesting how despite its simple graphics, Minecraft encourages creativity and worldbuilding. This shows that games do not need the most sophisticated or detailed assets to still be fun and addicting. One of the main defining aspects of Minecraft is its terrains that are regenerated with every game and are virtually infinite, allowing the player to explore and build however they wish.
I was curious about how the terrains were generated, as they seemed to spawn randomly, sometimes even creating floating islands. Apparently, Minecraft terrains are generated based on Perline noise functions. When the game starts, it generates a Seed (a random 64-bit number) which is used to generate noise functions. So the game starts on a broad level by creating simple topographical maps, then goes into smaller random details like bushes, animals, lakes, etc. However, these random environments and objects still have a consistent logic and constraints they have to follow to make them believable terrains. This random generation allows for a different world each time, giving the player new ideas and possibilities to define their own gameplay.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
