Physical product with geographical extrusions placed over sheet of associated randomized points
Artists Steffen Fielder and Jonas Loh explore user relationships with randomness in their “Known Unknowns” project. One user had the opportunity to interview the artists discovered “the designers explored the importance of randomness in our daily life but also investigated whether randomness actually exists or if it is just a lack of knowledge which makes things appear random to us.” To answer these thoughts, they utilized two different seeds to generate random numbers. The Random Event Harvester collects random numbers in an indicated environment and stores them with corresponding geographical information. The Cosmic Ray Detection Chamber uses the information from the Random Event Harvester to generate random values, which ultimately produce tiles with randomized extrusions extending from one face.
Two seeds (Random Event Harvester and Cosmic Ray Detection Chamber) pictured together
//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//project-06
function setup() {
createCanvas(480, 480);
rectMode(CENTER);
}
function draw() {
clear();
var H = hour(); //Hours
var M = minute(); //Minutes
var S = second(); //Seconds
background(0);
push(); //orbits
translate(width / 2, height / 2);
stroke('white');
strokeWeight(0.5);
noFill();
ellipse(0, 0, 100, 100); //inner orbit (seconds)
ellipse(0, 0, 250, 250); //outer orbit (minutes)
pop();
push(); //Seconds
translate(width / 2, height / 2);
fill(255, 153, 255);
rotate(TWO_PI * (S - 15) / 60); //starts at 0 seconds
ellipse(50, 0, 30, 30);
pop();
push(); //Minutes
translate(width / 2, height / 2);
fill(102, 255, 102);
rotate(TWO_PI * (M - 15) / 60); //starts at 0 minutes
ellipse(125, 0, 45, 45);
pop();
translate(width / 2, height / 2);//Outer planets (Hours)
var hours = H >= 12 ? H - 12 : H; //If H >= 12, subtract 12 from H to make 12hr clock
for (i = 0; i < 12; i++) {
push();
rotate(TWO_PI * (i - 3) / 12);
if (i == hours) {
fill('yellow'); //fill yellow for current time
}
else {
fill(51, 153, 255);
}
ellipse(195, 0, 50, 50);
pop();
}
}
I got my motivation while watching my friend playing a video game, and I designed my clock with space theme. With 12 circles (planets) that represent each hour, I made the planet change to yellow for current hour. Then I made two planets rotating around their orbits according to minutes and seconds.
While not directly involving coding, the project that I chose to look at for this week is Tim Knowles’ Windwalks. Tim Knowles is a British artist based in London, and his project, Windwalks, visualizes a series of walks directed only by the wind using different mechanisms. Each walk is filmed, and then plotted by GPS, with the end product a line drawing of the path the individual took.
One of Tim Knowles’ Windwalks drawingsA close up of the above drawing, revealing glimpses of the city’s structure
I found this project particularly interesting, because it incorporates randomness in the form of the wind. While the wind is biased in the sense that there are trends and currents that the wind follows, this factor combined with the individual’s environment ends up generating a unique and personal piece of art. Not only does this project visualize an activity that we often overlook in our day to day lives, walking, it also reveals the outlines of buildings, cars, and objects in the environment, as individuals, prompted by the direction of the wind, collide with the structures of the city, making them visible in a new light. Thus, Knowles is able to create new, different, and deeper relationships between individuals, their cities, and the wind itself.
This headset, pushed by the wind, guides the individual along a “random” pathA photo taken during 50 simultaneous windwalks
/* Nadia Susanto
nsusanto@andrew.cmu.edu
Section B
Project-06-Abstract Clock */
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(255,255, 255);
translate(200, 200);
var hr = hour();
var min = minute();
var sec = second();
push();
textSize(30);
text(nf(hr%12,2)+":"+nf(min,2)+":"+nf(sec,2) , -50, -20, 50, 100)
pop();
strokeWeight(4);
var b = map(sec, 0, 60, 0, 255);
stroke(color(100, b, 255));
noFill();
var secondAngle = map(sec, 0, 60, 0, 360);
arc(0, 0, 300, 300, 0, 360-secondAngle);
strokeWeight(5);
var c = map(min, 0, 60, 0, 255);
stroke(color(0, 255, c));
noFill();
var minuteAngle = map(min, 0, 60, 0, 360);
arc(0, 0, 280, 280, 0, 360-minuteAngle);
strokeWeight(3);
var d = map(hr, 0, 60, 0, 255);
stroke(color(d, c, b));
noFill();
var hourAngle = map(hr % 12, 0, 12, 0, 360);
arc(0, 0, 260, 260, 0, 360-hourAngle);
}
It was hard thinking of a very abstract concept, so I kept it simple. I wanted to stay simple but add the abstract element. The arc if hours, minutes, or seconds “disappears” to show the time passing by. Even though it looks simple, I think it looks pretty nice and I’m happy with the outcome.
/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 06-- Abstract Clock
*/
function setup() {
createCanvas(500, 500);
var topLayer = color(130, 152, 168);
var bottomLayer = color(109, 83, 117);
setGradient(topLayer, bottomLayer);
textSize(30);
textAlign(CENTER);
textStyle(ITALIC);
text("boba all day every day", 0, 80, width);
}
//--------------------------
function draw() {
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
var X = 180;
b = 0;
//boba cup: will not change
rectMode(CORNER);
noStroke();
fill(255);
rect(175, 200, 150, 250);
ellipseMode(CENTER);
noStroke();
fill(255);
ellipse(250, 200, 150, 30);
ellipseMode(CENTER);
noStroke();
fill(255);
ellipse(250, 450, 150, 30);
//straw: seconds
noStroke();
fill(0);
rectMode(CORNER);
rect(235, 140, 30, S);
//tea: minutes
//tea is draining per minute
//to make draining effect, I created the complete picture and then used background color to "delete" the drawn
ellipseMode(CENTER); //bottom part: doesn't change
noStroke();
fill(209, 207, 171);
ellipse(250, 450, 140, 20);
rectMode(CORNER);
noStroke();
fill(209, 207, 171);
rect(180, 220, 140, 230);
ellipseMode(CENTER);
noStroke();
fill(209, 207, 171);
ellipse(250, 220, 140, 20);
rectMode(CORNER);
noStroke();
fill(255);
rect(180, 200, 140, M);
//boba: hour (12 hours)
b = H % 12;
for (i = 1; i <= b; i+=1){
noStroke();
fill(0);
ellipse(X + 10 * i, 440, 10, 10);
}}
function setGradient(color1, color2) {
for (var a = 0; a <= height; a++) {
var amount = map(a, 0, height, 0, 1);
var back = lerpColor(color1, color2, amount);
stroke(back);
line(0, a, width, a);
}}
When creating this project, I simply looked at the objects on my desk for inspiration and decided to use my cup of Fuku Tea as inspiration. I identified 3 components of the boba cup that I could alter to fit hours, minutes, and seconds. I found it interesting to build my own clock graphically through one of my favorite food items.
Because of the time of year, I decided to make mine about Halloween. I based my design on the Charlie Brown Halloween special “It’s The Great Pumpkin, Charlie Brown”. I looked up a bunch of photos from this special and started taking what I liked from them and mixing them into my sketch. I had my sketch be of the pumpkin patch where the kids would wait for the Great Pumpkin, and would have the sun and moon tell what time of day it was. I also decided to have the sky change color in response to these. I used if statements and the hour() variable in order to accomplish this. I then went about creating the patch, using for loops to create lots of leaves and also the lines dividing a fence. I individually created each pumpkin in the patch, making the main one the kids are behind the largest and bumpiest.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 06, Abstract Clock
var islandX = 240; //starting X coordinate of island center
var islandY = 210; //y coordinate of island center, stays constant
var islandHalfWidth = 75;
var islandH = 100; //tallest height of island mountain
var islandSpeed = 0.001; //controls the lag of island movement
var sheepSpeed = 0.01;
var gearWidth = 12; //the radius of the gear (represents radius of inner "circle")
var gearThick = 2;
var sheepW = 20;
var sheepH = 15;
var sheepHeadW = 8;
var sheepHeadH = 12;
var ear = 4; //size of sheep ear ellipse
var eye = 2; //size of sheep eye ellipse
var sheepX = 0;
function setup() {
createCanvas(480, 480);
rectMode(CENTER);
angleMode(DEGREES);
}
function draw() {
background(220);
var h = hour(); //24 hour clock
var m = minute();
var s = second();
difisland = islandX - mouseX;
islandX = constrain(islandX, islandHalfWidth * 3, width - islandHalfWidth * 3) + difisland * islandSpeed; //causes the island to move slowly to mouse position
//sky, fades as time changes
colorMode(HSB, 100); //change color mode in order to help with darkening/lightening the sky
if (h > 18 & h < 24 || h > -1 && h < 6) {
b = 15;
}if (h > 5 & h < 13) {
b = 15 + (h * 7);
} if (h > 11 & h < 19) {
b = 99 - ((h - 12) * 7);
}
c = color(55, 60, b);
fill(c);
rect(width / 2, height / 2, width, height);
//ground
colorMode(RGB); //switch back to RGB from HSB
fill(92, 147, 13);
rect(width * 0.5, height - 25, width, 50);
//mountain on island
stroke(92, 147, 13);
fill(92, 147, 13);
strokeWeight(14);
strokeJoin(ROUND);
beginShape(); //vertices that form the mountain
vertex(islandX - islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth * 0.3, islandY - islandH * 0.75);
vertex(islandX - islandHalfWidth * 0.1, islandY - islandH * 0.6);
vertex(islandX + islandHalfWidth * 0.2, islandY - islandH);
vertex(islandX + islandHalfWidth * 0.65, islandY - islandH * 0.3);
vertex(islandX + islandHalfWidth * 0.8, islandY - islandH * 0.3);
vertex(islandX + islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth, islandY);
endShape();
//door in mountain
var doorH = 45
noStroke();
fill(58, 109, 29);
rect(islandX - islandHalfWidth * 0.3, islandY - doorH * 0.5, 20, doorH, 15, 15, 0, 0);
noStroke(); //door knob
fill(44, 84, 41);
ellipse(islandX - islandHalfWidth * 0.375, islandY - doorH * 0.5, 3, 3);
//window in mountain
var winHalfLength = 25 * 0.5 //radius of window
if (h > 7 & h < 19) {
fill(58, 109, 29);
ellipse(islandX + islandHalfWidth * 0.2, islandY - islandH * 0.5, 25, 25);
} else { //makes the window glow yellow when it's "dark" outside
fill(255, 197, 68);
ellipse(islandX + islandHalfWidth * 0.2, islandY - islandH * 0.5, 25, 25);
}
stroke(44, 84, 41);
strokeWeight(3); //bars of the window:
line((islandX + islandHalfWidth * 0.2) - winHalfLength, islandY - islandH * 0.5, (islandX + islandHalfWidth * 0.2) + winHalfLength, islandY - islandH * 0.5);
line(islandX + islandHalfWidth * 0.2, (islandY - islandH * 0.5) - winHalfLength, islandX + islandHalfWidth * 0.2, (islandY - islandH * 0.5) + winHalfLength);
//underneath the island
stroke(44, 84, 41);
fill(44, 84, 41);
strokeWeight(18);
beginShape(); //vertices that form the underside
vertex(islandX - islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth * 0.75, islandY + islandH * 0.4);
vertex(islandX - islandHalfWidth * 0.5, islandY + islandH * 0.5);
vertex(islandX - islandHalfWidth * 0.3, islandY + islandH * 0.75);
vertex(islandX - islandHalfWidth * 0.1, islandY + islandH * 0.85);
vertex(islandX + islandHalfWidth * 0.2, islandY + islandH * 0.6);
vertex(islandX + islandHalfWidth * 0.5, islandY + islandH * 0.5);
vertex(islandX + islandHalfWidth * 0.65, islandY + islandH * 0.3);
vertex(islandX + islandHalfWidth * 0.8, islandY + islandH * 0.25);
vertex(islandX + islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth, islandY);
endShape();
//gear, rotates every second
push();
strokeWeight(2);
stroke(255);
translate(islandX + islandHalfWidth * 0.99, islandY + islandH * 0.1);
for (var g = 0; g < 60; g ++) {
if (g > s || g < s) {
push();
rotate(180 + g * 6);
line(0, gearWidth, 0, gearWidth + gearThick);
pop();
} else { //highlights the second hand on the gear
push();
stroke(124, 17, 17);
rotate(180 + g * 6);
gearMiddle(0, 0); //rotates the center cutouts of the gear
line(0, gearWidth, 0, gearWidth + 2 * gearThick); //the second hand
pop();
}
}
pop();
//ladder, increases by one rung each minute
var ladderH = 5;
var ladderW = 15;
var ladderX = islandX - islandHalfWidth;
stroke(153, 124, 232);
strokeWeight(2);
line(ladderX, islandY - 9, ladderX, islandY);
line(ladderX + ladderW, islandY - 9, ladderX + ladderW, islandY);
for (var i = 0; i < m; i += 1) {
var ladderY = (islandY - 3) + 4 * i; //Y coordinate for the start of the ladder
if (i < 9 || i > 9 & i < 19 || i > 19 && i < 29 || i > 29 && i < 39 || i > 39 && i < 49 || i > 49) { //creates everything but the 10's
stroke(255);
line(ladderX, ladderY, ladderX + ladderW, ladderY); //the rungs of the ladder that correspond to everything but the multiples of 10
} else {
stroke(153, 124, 232);
line(ladderX, ladderY, ladderX + ladderW, ladderY); //the rungs of the ladder that correspond to every 10 minutes
}
stroke(153, 124, 232);
line(ladderX, ladderY - ladderH, ladderX, ladderY + ladderH); //left vertical rail of ladder
line(ladderX + ladderW, ladderY - ladderH, ladderX + ladderW, ladderY + ladderH); //right vertical rail of ladder
}
//text: hour, minute, second, colons
noStroke();
textSize(14);
var textX = width * 0.5;
var textY = height - 20;
var coltextdistX = 20;
var coltextdistY = 2; //adds to the Y coordinates for the colons, to visually center them vertically
fill(255);
rect(textX, textY - 5, 100, 25, 30, 30, 30, 30);
fill(255, 197, 68);
textAlign(RIGHT); //hour text
if (h < 10) {
text(nf(h, 1, 0), textX - 1.4 * coltextdistX, textY);
} else {
text(nf(h, 2, 0), textX - 1.4 * coltextdistX, textY);
}
fill(92, 147, 13);
textAlign(CENTER); //colon and minute text
text(':', textX - coltextdistX, textY - coltextdistY); //colon between hour and minute
text(':', textX + coltextdistX, textY - coltextdistY); //colon between minute and second
fill(153, 124, 232);
text(nf(m, 2, 0), textX, textY);
textAlign(LEFT); //second text
fill(124, 17, 17);
if (s < 10) {
text(nf(s, 1, 0), textX + 1.4 * coltextdistX, textY);
} else {
text(nf(s, 2, 0), textX + 1.4 * coltextdistX, textY);
}
//sheep stack
difsheep = mouseX - sheepX;
sheepX = constrain(sheepX, sheepW, (width - sheepW * 1.5)) + difsheep * sheepSpeed; //causes the sheep to move slowly to mouse position
for (var y = 0; y < h; y += 1) {
sheep(sheepX, (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
if ((sheepX - mouseX) > 0) {
sheepHead(- sheepW * 0.25 + (sheepX * 0.5), (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
} else {
sheepHead(sheepW * 0.25 + (sheepX * 0.5), (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
}
}
}
//gear cutouts
function gearMiddle(x, y) { //creates the center cutouts of the gear
for (var d = 0; d < 4; d ++) {
push()
stroke(255);
strokeWeight(2);
rotate(d * 45);
line(x, y - gearWidth - 2 * gearThick, x, y + gearWidth + 2 * gearThick);
pop();
}
}
//sheep
function sheep(x, y) {
push();
translate(x, y);
stroke(0);
strokeWeight(2);
line(-sheepW * 0.25, 0, -sheepW * 0.25, sheepH * 0.6); //sheep leg left
line(sheepW * 0.25, 0, sheepW * 0.25, sheepH * 0.6); //sheep leg right
noStroke();
fill(0);
ellipse(-sheepW * 0.5, 0, ear, ear); //sheep tail left
ellipse(sheepW * 0.5, 0, ear, ear); //sheep tail right
fill(255);
stroke(255, 197, 68)
strokeWeight(1.25);
rect(0, 0, sheepW, sheepH, 15, 15, 15, 15); //sheep body
pop();
}
function sheepHead(x, y) {
push();
translate(x, y);
noStroke();
fill(0);
rect(x, y / 600, sheepHeadW, sheepHeadH, 3, 3, 15, 15); //sheep head
ellipse(x - sheepHeadW * 0.5, (y / 600) - sheepHeadH * 0.2, ear, ear); //left sheep ear
ellipse(x + sheepHeadW * 0.5, (y / 600) - sheepHeadH * 0.2, ear, ear); //right sheep ear
fill(255);
ellipse(x - 2, y / 600, eye, eye); //left sheep eye
ellipse(x + 2, y / 600, eye, eye); //right sheep eye
pop();
}
While I didn’t really explore unconventional ways to read time through this project, I tried to seamlessly embed time into a simple but fun illustration, so that it became more of an artefact, rather than something really practical. I was initially inspired by the concept of cuckoo clocks, but my clock eventually warped into a floating island. I ended up creating a 24 hour clock, where the number of sheep represent the hour, the number of rungs on the ladder represent the minute, and the gear on the island shows the seconds.
Aaron Tobey generated a project that involved the mechanics of brainstorming and coding architecture. In his Vimeo video showing the code running, we see 36 rectangular frames generating a randomized series of shapes drawn in each frame. I admired that while the overall piece looked organized, it also included a factor in which it created a chaotic yet cohesive mood. The boundaries of each rectangular frame created a clean structure that contained the chaotic randomness of the architecture shapes inside. I suppose that Tobey first drew the rectangular frames in the code and then generated loops that drew random architecture shapes within each frame. This algorithm then creates the piece that we observe in Tobey’s Vimeo.
//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_06
var eyeballSize = 180;
var eyeChange = 20;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(230, 194, 152);
frameRate(600);
var h = hour();
var m = minute();
var s = second();
var eyeWidth = 150;
//eyebag
translate(120, 400)
fill(210, 180, 152);
noStroke();
beginShape();
for (var i = - 1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i - 50, sin(0.1 * i * PI) * (110 + m) - 50);
}
endShape();
//drawing the eye shape
translate(-50, - 100);
stroke(0);
strokeWeight(10);
fill(255);
//drawing upper half of the eye
beginShape();
for (var i = -1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI) * (110 + m));
}
endShape();
//drawing lower half of the eye
fill(255);
beginShape();
for (var i = - 1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, sin(0.1 * i * PI) * (110 + m));
}
endShape();
//change of eyeball colors
var r1 = 200 + 25 * sin(millis() / 100.0 );
var g1 = 200 + 25 * sin(millis() / 100.0 + HALF_PI);
var b1 = 200 + 25 * sin(millis() / 100.0 - HALF_PI);
var eyeballX = 5 * h;
var eyeballY = 0;
x = sin(frameCount / 10) * eyeChange;
y = cos(frameCount / 10) * eyeChange;
//drawing eyeball
translate(200, 0);
noStroke();
fill(r1, g1, b1);
ellipse(eyeballX, eyeballY, eyeballSize + x, eyeballSize + y);
if (s % 2 == 0) {
fill(0);
ellipse(eyeballX, eyeballY, 100, 100);
fill(255);
ellipse(eyeballX + 20, eyeballY - 20, 10, 10);
}else {
fill(0);
ellipse(eyeballX, eyeballY, 130, 130);
fill(255);
ellipse(eyeballX + 20, eyeballY -20, 15, 15);
}
//closing lid and eye bag when tired
if (h < 8) {
translate(-200,0);
fill(230, 194, 152);
stroke(0);
strokeWeight(10);
beginShape();
for (var i = -1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI)* (110 + m));
}
endShape();
}
}
This is a project represent a normal student eye in a day. The pupil is changing its size every second, and the eye size is increasing based on minutes. And the entire eyeball is moving from left to right based on hours. during sleeping hours (12:00 – 8:00 am) the top eyelid is closed because of fatigues.
The text-like black and white visualization is a mapping of a ‘Register and Taps” random number generator in action. Rami Hammour is an architect graduated from RISD. Utilizing three integers in the script, Rami Hammour is able to show randomness with limited input values
The definition of randomness is known as “a non-repeating, non-biased, non-patterned sequence of values” . And randomness in computational art is finding a tool to record the irregular pattern.
I think in any form of randomness art. There should be logical representation used to project the randomness. Otherwise, the randomness will just be unable to read and lost its meaning.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
