Perlin Noise is a visual representation of what “natural” texture and surfaces that were created to contrast with the “machine – like” look of graphics at the time. Although the algorithm is simple, the components of it are kept simple. The images are produced off of a box – grid system with random gradient vectors, computation of the dot products of the distance and gradient vectors, and an interpolation between these. Random number generators can be used and by the altering of the algorithm, different images can appear every time.
Ken Perlin invented this algorithm in 1983 because he wanted there to be a way for something natural to appear even on a screen. After creating this algorithm he was awarded an Academy Award for Technical Achievement and continued to use the algorithm for texture synthesis and 3D implecations.
//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-06-Abstract Clock
var h;
var m;
var s;
var start;
function setup(){
createCanvas(480, 250);
}
function draw(){
h = hour();
m = minute();
s = second();
start = 270;
var cloudX = s * 8;
//determines if day-sky or night-sky
if (h > 6 & h < 19){
background(156, 224, 229);
} else{
background(31, 47, 71);
}
angleMode(DEGREES);
//minute-cloud
if (cloudX > width){
cloudX = 0;
} else{
cloudX = cloudX + width / 60 / 60;
}
noStroke();
fill(255, 255, 255, 240);
ellipse(cloudX, 130, 100, 40);
ellipse(cloudX + 20, 105, 40, 40);
ellipse(cloudX - 10, 110, 60, 40);
//rainbow
noFill();
strokeWeight(20);
//red-hours-clock
stroke(255, 89, 74, 100);
arc(240, 125, 200, 200, start, start + h * 15);
//yellow-minutes-clock
stroke(255, 234, 74, 100);
arc(240, 125, 180, 180, start, start + m * 6);
//blue-seconds-clock
stroke(74, 146, 255, 100);
arc(240, 125, 160, 160, start, start + s * 6);
//lens-flares
strokeWeight(1);
stroke(255, 255, 255);
ellipse(240, 125, 280, 280);
strokeWeight(3);
stroke(255, 255, 255, 100);
ellipse(240, 125, 295, 295);
noStroke();
fill(255, 255, 255, 50);
ellipse(120, 225, 60, 60);
ellipse(150, 200, 30, 30);
ellipse(320, 70, 10, 10);
ellipse(350, 50, 40, 40);
//determines whether sun or moon is in center
if (h > 6 & h < 19){
//sun
fill(255, 234, 74);
ellipse(240, 125, 100, 100);
//sun-rays
push();
noStroke();
translate(240, 125);
triangle(-10, 0, 10, 0, 0, 70 * (s % 2));
triangle(-10, 0, 10, 0, 0, -70 * (s % 2));
triangle(-70 * (s % 2), 0, 0, 10, 0, -10);
triangle(70 * (s % 2), 0, 0, 10, 0, -10);
pop();
} else{
//moon
noStroke();
fill(189, 201, 219, 240);
ellipse(240, 125, 130, 130);
ellipse(270, 110, 10, 10);
ellipse(235, 105, 30, 30);
ellipse(210, 80, 20, 20);
ellipse(270, 150, 40, 40);
ellipse(270, 80, 10, 10);
ellipse(290, 95, 5, 5);
ellipse(230, 175, 20, 20);
ellipse(205, 140, 40, 40);
//lower-left-star
push();
noStroke();
fill(229, 241, 255);
translate(120, 225);
triangle(-5, 0, 5, 0, 0, 20 * (s % 2));
triangle(-5, 0, 5, 0, 0, -20 * (s % 2));
triangle(-20 * (s % 2), 0, 0, 5, 0, -5);
triangle(20 * (s % 2), 0, 0, 5, 0, -5);
pop();
//upper-right-star
push();
noStroke();
fill(229, 241, 255);
translate(350, 50);
triangle(-5, 0, 5, 0, 0, 30 * (s % 2));
triangle(-5, 0, 5, 0, 0, -30 * (s % 2));
triangle(-30 * (s % 2), 0, 0, 5, 0, -5);
triangle(30 * (s % 2), 0, 0, 5, 0, -5);
}
}
Preliminary Sketch of my Abstract Clock.
I decided to use the sun and moon symbols in my abstract clock because I felt they were both universal symbols for representing time. I also experimented with transparency and movement when I created the cloud and stars moving in the sky. I was able to use modulus as a way to make the stars twinkle. With this exercise, I was able to learn a lot about using rotation, push, and pop.It was a bit frustrating getting everything to move in order with each other, but in the end I managed to make it work.
// Timothy Liu
// 15-104 Section C
// tcliu@andrew.cmu.edu
// OpenEnded-06
// variables defining the sapling + base characteristics
var leaf = 12;
var stem = 50;
var stemW = 4;
var base = 30;
var leafMax = 16;
var leafMin = 11;
var leafChange = 0.1;
var leafH;
function setup() {
createCanvas(480, 200);
frameRate(20);
}
function draw() {
noStroke();
// time variables; militaryH uses a 24 hr scale, and H uses a 12 hr scale with the modular
var militaryH = hour();
var H = hour() % 12;
var M = minute();
var S = second();
var mM = map(M, 0, 59, 0, 50); // mapping mM so it's constrained between 0 and 50, the height of each sapling
// these variables are used later when determining sky color and when it should change
var mH1 = militaryH + 1;
var H3 = H - 3;
// defining where leafH is
leafH = height / 2;
// the following if statements make the sky change color based on the time, indicating am vs. pm:
// ex: if there are 2.5 saplings grown, and the sky is dark blue, it must be 2.5am because it's still dark outside.
// if it's from 12am - 8am, the sky slowly gets brighter every hour
if (militaryH < 8) {
fill(0 + (15 * mH1), 15 + (20 * mH1), 100 + (15 * mH1));
rect(0, 0, width, 2 * height / 3);
// if it's 8am - 4pm, the sky stays consistently bright out
} else if (militaryH >= 8 & militaryH < 16) {
fill(120, 175, 220);
rect(0, 0, width, 2 * height / 3);
// if it's 4pm - 12pm, the sky slowly gets darker every hour
} else {
fill(120 - (15 * H3), 171 - (20 * H3), 220 - (15 * H3));
rect(0, 0, width, 2 * height / 3);
}
// base ground color
fill(191, 148, 115);
rect(0, 2 * height / 3, width, height / 3);
// this for loop draws all of the 12 saplings and the mounds of dirt they grow out of
for (var a = 0; a < 12; a++) {
// dirt mounds around base of saplings
fill(171, 125, 91);
ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, base, base / 2);
// this if statement draws all the saplings that are already fully grown
if (a < H) {
fill(84, 61, 40);
ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, 8, 4); // shadow at base of sapling
fill(63, 209, 0); // sapling color
rect((a + 1) * width / 13, height / 2, stemW, stem);
arc(((a + 1) * width / 13) - (stemW), leafH, leaf, leaf / 2, 0, 5 * PI / 4, CHORD);
arc(((a + 1) * width / 13) + (2 * stemW), leafH, leaf, leaf / 2, 7 * PI / 4, PI, CHORD);
}
// this if statement draws the sapling that is currently growing
if (a == H) {
fill(84, 61, 40);
ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, 8, 4); // shadow at base of sapling
fill(63, 209, 0); // sapling color
rect((a + 1) * width / 13, leafH + stem, stemW, -mM);
arc(((a + 1) * width / 13) - (stemW), leafH + stem - mM, leaf, leaf / 2, 0, 5 * PI / 4, CHORD);
arc(((a + 1) * width / 13) + (2 * stemW), leafH + stem - mM, leaf, leaf / 2, 7 * PI / 4, PI, CHORD);
}
// this if statement makes the leaves flutter/pulsate once every second, serving as a measure of S (seconds)
if (S % 2 == 0) {
leaf = min(leaf + leafChange, leafMax);
} else {
leaf = max(leaf - leafChange, leafMin);
}
}
}
I really enjoyed the concept of envisioning an abstract clock. Time in itself is such an abstract construct, so it was a fun challenge trying to represent it in an unconventional way. One of my first ideas about showing time was through plants, like bamboo, that grow at a rapid rate. I realized that I could play with this concept using plant saplings, so my abstract clock portrays a series of 12 saplings that grow and sway in the wind with the seconds, minutes, and hours in the day.
A few key things to note about my clock:
I decided to only show 12 saplings to represent the two 12-hour halves in the day because I felt that 24 saplings would cause my clock to lose meaning and groundedness. To help represent AM vs. PM time, I made the sky change color as a function of what hour is. From 12AM — 8AM, the sky slowly changes from dark blue to light blue each hour. At 8AM, the sky is light blue, and it stays that way until 4PM. Then, from 4PM — 12AM, the sky slowly gets darker again every hour. Using this logic, the user can deduce what time it is in the day; for example, if I see that there are 3.5 saplings and the sky is dark, that means it must be 3:30AM and it’s not light out yet. If there are 3.5 saplings and it’s light out, it must be 3:30PM in the early afternoon.
My program has the leaves of the saplings pulsating/fluttering once every second. They serve as a good way to track the number of seconds in my clock, as even though there’s no counter, it’s an easy metric to count and follow.
Below are some sketches from my ideation phase.
Some of the sketches from my notebook. I started with a two-row concept, but switched to one because it was easier to follow.
The Mediated Matter group at the MIT Media Lab created the Silk Pavilion. This project explores the relationship between digital and biological fabrication. What makes this structure so unique is that the overall geometry was created using an algorithm that would assign threads across the patches providing various degrees of density.
Mediated Matter was inspired by the amazing silkworm and their ability to generate their own version of “3D art” out of only a single multi-property silk thread. The silkworms also create the unique randomness aspect of this as over 6500 silkworms were utilized, and this will definitely generate the random threads and patterns shown in the final product.
What I admire most about this project is that it had computation involved as the researchers did use the silkworms as a computational schema for determining shape and optimization of fiber-based surface structures. However, I am just so amazed how they brought in real-life insects to perform the art for them, not a computer that randomly generated it.
A wholistic view of the final product.
Video demonstrating the process from start to finish including the actual silkworms’ contribution to this entire process. A closer look into how the researchers had to be up close and personal with the silkworms.
To read more about this amazing project, click the link below:
screen shot of a possible iterationgeometric shape iterations
I thought this piece was very interesting in its simplicity. This work is by Robert Krawczyk and is part of a series called “Summer Diversions”. This work is manifested as a website that creates a series of repeating shapes that create different mandalas. The interactivity and randomness of the project is where one can input more or less shapes, altering their repetition, shape and rotation.
I thought it was really lovely because the article even mentioned these were made with p5.js! It also reminds me very much of our line art project. I would guess this project was programed much the same way: variables are set and correlated to the number of mouse clicks on the “=” and “-“. These variables alter the looping of a repeated form, which is also translated in order to create the mandala effect.
I admire how something so simple could be so beautiful. I love that uncertainty exists within any structure.
“My overall interest is to investigate methods which can develop forms that are in one sense predictable, but have the element to generate the unexpected; the unexpected in a predictable way. The custom software becomes the instructions for producing the work itself.” Robert Krawczyk
These values of predictability and unpredictability are very well communicated in the work. Making the mechanisms of the mandalas so transparent and allowing for interaction gives a sense of structure and predictability, whereas the results are often much more beautiful and complex than one might have imagined.
//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-06
function setup(){
createCanvas(300,300);
}
function draw(){
background(233,217,120);
noStroke();
var s = second();
var m = minute();
var h = hour();
//background circle
fill(62,124,208);
circle(150, 150, 270);
//arc of second
strokeWeight(10);
stroke(180,230,255);
arc(width/2, height/2, 230, 220, PI + HALF_PI, PI + HALF_PI + 2 * PI * (s/60));
//arc of minute
strokeWeight(20);
stroke(147,193,255);
arc(width/2, height/2, 170, 170, PI + HALF_PI, PI + HALF_PI + 2 * PI * (m/60));
//arc of hour
strokeWeight(30);
stroke(110,148,255);
fill(71,93,137);
arc(width/2, height/2, 90, 90, PI + HALF_PI, PI + HALF_PI + 2 * PI * (h/12));
//center circle
fill(233,217,120);
noStroke();
circle(width/2, height/2, 15);
//marks on the sides
fill(255);
noStroke();
rect(width/2 - 20/2, 0, 20, 50);
rect(width/2 - 20/2, height - 50, 20, 50);
rect(0, height/2 - 20/2, 50, 20);
rect(width - 50, height/2 - 20/2, 50, 20);
}
For this project, I thought about the more modern design of watches that is designed nowadays. So I tried to keep the way of representing the time simple and easy to understand. I also tries to use some pop of color to make the image visually pleasing.
/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-06 */
function setup() {
createCanvas(480, 300);
}
function draw() {
noStroke();
var h = hour();
var m = minute();
var s = second();
var hr = h % 12
var sec = map(s, 0, 59, 0, width);
background(hr + hr * 20);
//cloud
fill(230);
ellipse(sec, 45, 70, 55);
ellipse(sec + 35, 50, 70, 55);
ellipse(sec + 65, 45, 60, 45);
ellipse(sec + 25, 25, 50, 35);
ellipse(sec + 52, 25, 50, 35);
//buildings
fill(0);
rect(0, 100, 60, 300);
rect(65, 150, 45, 250);
rect(110, 75, 75, 325);
rect(185, 110, 50, 300);
rect(235, 200, 35, 100);
rect(275, 50, 80, 250);
rect(355, 125, 40, 175);
rect(400, 80, 80, 220);
//window1
var a = 115
for (var y = 0; y < 8; y++) {
var wa = a + y * 25
fill(255);
rect(15, wa, 10, 10);
rect(35, wa, 10, 10);
};
//window2
var bx = 122
var by = 85
var count = 0
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 3; x++) {
var wbx = bx + x * 20
var wby = by + y * 28
if (count == m & count < 24) {
fill(255, 255, 0);
rect(wbx, wby, 10, 10);
} else {
fill(100);
rect(wbx, wby, 10, 10);
}
count += 1
};
};
//window3
var c = 120
for (var y = 0; y < 12; y++) {
var wc = c + y * 15
fill(230);
rect(192, wc, 30, 5);
};
//window4
var d = 65
for (var y = 0; y < 7; y++) {
var wd = d + y * 35
fill(255);
rect(290, wd, 10, 20);
rect(310, wd, 10, 20);
rect(330, wd, 10, 20);
};
//window5
var ex = 412
var ey = 90
for (var y = 0; y < 9; y++) {
for (var x = 0; x < 4; x++) {
var wex = ex + x * 15
var wey = ey + y * 24
if (count == m & count > 23) {
fill(255, 255, 0);
rect(wex, wey, 10, 10);
} else {
fill(100);
rect(wex, wey, 10, 10);
}
count += 1
};
};
};
I was inspired by the night view of my home, NYC. The lights in some of the buildings light up according to the minutes to represent how the city is never really dead. The clouds move by the second and the background color changes a different shade of gray based on the hour. I went through different iterations in the input parameters for the time through my sketches.
///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 06
function setup(){
createCanvas(600, 600);
}
function draw() {
strokeWeight(0);
background(255);
//time variables
var s = second();
var m = minute();
var h = hour();
//diameter variables
var sd = 200;
var md = 400;
var hd = 550;
//angles of arcs
c = 2 * PI;
var sa = s * c;
var ma = m * c;
var ha = h * c;
//seconds
angleMode(DEGREES);
noFill();
stroke(255, 0, 0);
strokeWeight(50);
arc(width/2, height/2, sd, sd, 0, sa);
//minutes
angleMode(DEGREES);
noFill();
stroke(0, 255, 0);
strokeWeight(50);
arc(width/2, height/2, md, md, 0, ma);
//hours
angleMode(DEGREES);
noFill();
stroke(0, 0, 255);
strokeWeight(49);
arc(width/2, height/2, hd, hd, 0, ha);
}
Inspired by Apple Watch rings:
Each ring represents a different aspect of time. Red is seconds, Green is minutes, and blue is hours.
At first I didn’t really know how to approach this project, so I started looking at what kind of shapes I wanted to use for my clock. I ultimately found inspiration from a picture of hanging frames online. I started by sketching the shapes using magic numbers and then I tried to figure out how to use the hour, minute, and second functions to manipulate the time. I used the map function to manipulate the time increments to fit the box height. I decided to use primary colors for the boxes and secondary colors for the small rectangles connecting the boxes. Time is indicated by the increasing darker hues in the lighter hue background. Overall, I had a lot of fun creating this abstract clock.
inspiration from dreamstime
/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-06
*/
function setup() {
createCanvas(350, 480);
}
function draw() {
var h = hour();
var m = minute();
var s = second();
background(0); //map time to fit the boxes
mS = map(s, 0, 59, 0, 110);
mM = map(m, 0, 59, 0, 110);
mH = map(h, 0, 23, 0, 110);
//purple rectangle
noStroke();
fill('#804FB3');
rect(150, 140, 20, 40);
//yellow rectangle
fill('#edd011');
rect(190, 300, 20, 40);
//blue hour
strokeWeight(10);
stroke('#e3edff');
fill('#0058ff');
rect(60, 20, 120, 120);
//red minute
stroke('#ffdbdb');
fill('#ff3333');
rect(140, 180, 120, 120);
//green second
stroke('#d7ffcf');
fill('#2bcf2b');
rect(105, 340, 120, 120);
//changing the box color inside to match time
noStroke();
fill('#82adff');
rect(65, 25, 110, 110 - mH); //hour
fill('#ff9696'); //minute
rect(145, 185, 110, 110 - mM);
fill('#a2fc90'); //second
rect(110, 345, 110, 110 - mS);
//display time on top
noStroke();
fill(255);
text(nf(h, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 270, 30);
textSize(18);
}
Nicolas Ménard directed a television commercial for a brand called “Habito”, produced at Nexus Studios. This commercial contains multiples images of different randomized algorithms. This series is a “metaphorical visualization of the brand’s powerful mortgage matching algorithm”. I really admire the audio and the narrative that harmonizes with the series of algorithms. These visuals becomes more like scenes that informs the audience about Habito and what the brand does.
Using variable.io for coding, the artist created instructions that were then translated into versatile Web apps by Marcin Ignac and Nick Nikolov, in order to change and play around with the visuals and speed of algorithms. Additionally, sound was also incorporated in the same way.
By collaborating with David Kamp, the sound designer, and many others to finalize this commercial at the end, I think Nicolas Ménard was very successful in creating those layers of algorithms that build up a storyline for viewers to understand about easy mortgage. Although the algorithms started off randomized in the process, they look to be very orderly and organized in the commercial overall. And with all these random, colored algorithms, along with the narrative, it shows how complex and confusing figuring out mortgage can be in the beginning of the commercial. This is very crucial for Nicolas Ménard’s goal of getting the message across that unlike these generated algorithms, the people at Habito can help simplify the mortgage process.
Nicolas Ménard (Nexus Studios), “Habito” commercial, 201
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
