For the clock I wanted to create something that had a gradient, and where the time could not always be seen at every second, to get people to focus a bit more on the changing condition. Eventually I settled on a clock which had a gradient of boxes which changed every two seconds, and slowly revealed the time in the middle of the smallest box, with circles. I also liked the idea of using the same shape for both the minutes and hours, with only the size to differentiate the two.
var theta = [];
var side = [];
var c = [];
var s;
var h;
var mx = [];
var my = [];
function setup() {
createCanvas(480, 480);
background(220);
h = hour();
for (let i = 0; i <= 29; i++) {
theta[i] += 2;
c[i] = ((8.5*i));
if (i == 0) {
side[i] = 480
} else if (i > 0) {
side[i] = (side[i-1])-((side[i-1])/40);
}
}
for (let i = 0; i < 60; i++) {
if (i %6 == 0) {
mx[i] = -5;
} else {
mx[i] = mx[i-1]+20;
}
if (i < 6) {
my[i] = -90;
} else {
my[i] = my[i-6]+20;
}
}
}
function draw() {
s = floor((second())/2);
translate(240,240);
rectMode(CENTER);
for (let i = 0; i <= s; i++) {
noStroke();
rotate(radians(theta[i]));
fill(c[i]);
rect(0,0,side[i],side[i]);
}
if (h > 12) {
h = h-12;
}
if (h < 7) {
for (let i = 1; i <= h; i ++) {
fill(0);
circle(-80,-122+(i*35),30);
}
} else {
for (let i = 1; i <= 6; i ++) {
circle(-80,-122+(i*35),30);
}
for (let i = 1; i <= h-6; i++) {
circle(-45,-122+(i*35),30);
}
}
for (let i = 0; i < minute(); i++) {
circle(mx[i],my[i],17);
}
}
//Shruti Prasanth
//Section C
//Project 6 - Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
push();
background(175, 298, 173); //mint green
translate(width / 2, height / 2); //origin now center canvas
pop();
var s = second();
var m = minute();
var h = hour();
let sAngle = map(s, 0, 60, 0, 360);
let mAngle = map(m, 0, 60, 0, 360);
let hAngle = map(h, 0, 24, 0, 360);
translate(width / 2, height / 2);
//drawing the second hand ring
fill(255);
noStroke();
push();
for (var i = 0; i < s; i ++){
rotate(radians(sAngle)); //creates a pattern based on current second
ellipse(0, -200, 20, 20);
}
pop();
//drawing the minute hand ring
push();
fill(207, 187, 208); //purple
for (var j = 0; j < m; j ++){
rotate(radians(mAngle)); // pattern based on what minute it is
ellipse(0, -130, 30, 30);
}
pop();
//the hour hand ring
push();
fill(43, 97, 109);
for (var k = 0; k < h; k ++){
rotate(radians(hAngle)); // pattern based on hour
ellipse(0, -50, 40, 40);
}
pop();
// drawing the middle clover
circle(0,0,20);
circle(0,15,20);
circle(0,-15,20);
circle(15,0,20);
circle(-15,0,20);
}
Examples of Pound’s randomly generated comic pages.
The program used to create this comic pulls from a database of random words, colors, shapes, figures, objects and scenes in order to create these comic pages. Playing off the “Sunday Comic” aesthetic and subject matter, Pound wanted to explore the parameters we set for ourselves as comic-writers and comic-readers. What are the minimum requirements needed to deem something a comic? To what extent can we abstract and randomize something yet have it remain fully recognizable (in this case a page of comic panels)?
This piece makes me think about the purpose of randomness in the ways we conduct our lives; to what extent are we truly in control of our lives? If a randomly computer-generated sequence of elements can register as an everyday comic, how much of our everyday lives are in fact random and out of control? We may, in fact, subconsciously prompt ourselves to recognize these occurrences as something intentional that we have crafted.
After looking at a couple of articles on randomness in the computation of art, I came across the work of Rami Hammour. The project presented is called “A Text of Random Meanings”. The art piece was completed during Hammour through the usage of python script as well as the “registers and taps” method of random number generator. From afar, the project simply looks like lines of texts which are created with various types of strokes in each column. It’s very interesting to see that from a distance, it resembles lines of texts. This causes the viewer to be curious and want to take a closer look at the text. However, because it is “random text”, there is no actual definition or meaning to the text. It represents randomness. If it was a regular piece of text, the natural reaction that humans would have is to read it because it would have meaning. If all the letters of each word were to be shuffled, each word would lose its meaning. For that reason, the “text” would also lose meaning. To add on, it is also interesting to see how numbers can be represented in an artistic way. Through the mapping of a random number generator, Rami Hammour combines computation and art in a very simple way while creating an intriguing outcome.
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 06
function setup() {
createCanvas(400, 480);
frameRate(15);
}
function draw() {
//time variables
var h = hour();
var m = minute();
var s = second();
//mapping the seconds so it fits width of...
var mapS = map(s, 0, 59, 0, 108); //glass of pink lemonade
var mapM = map(m, 0, 59, 0, 129); //coaster
background(255, 181, 101);
//blue table
noStroke();
fill(63, 85, 157);
rect(1, 335, 320, 146);
//window frame
noStroke();
fill(215, 126, 31);
rect(31, 31, 305, 233);
//sky during certain hours
noStroke();
fill(193, 210, 246);
rect(40, 38, 287, 219);
for (var i=1; i<=h; i++) {
if (i>=8 & i<=12) {
noStroke();
fill(255, 196, 137);
rect(40, 38, 287, 219);
}
if (i>12 & i<=18) {
noStroke();
fill(193, 210, 246);
rect(40, 38, 287, 219);
}
if (i>18 & i<=24) {
noStroke();
fill(29, 42, 117);
rect(40, 38, 287, 219);
}
}
//sun & moon (changes during certain hours)
for (var i=1; i<=h; i++) {
if (i>=7 & i<=12) { //morning sun
noStroke();
fill(253, 241, 142); //color of layer1
ellipse(116, 112, 83, 83);
fill(251, 243, 175); //color of layer2
ellipse(116, 112, 69, 69);
fill(249, 245, 215); //color of layer3
ellipse(116, 112, 53, 53);
}
if (i>12 & i<=18) { //afternoon sun
noStroke();
fill(255, 152, 68);
ellipse(116, 112, 83, 83);
fill(255, 205, 68);
ellipse(116, 112, 69, 69);
fill(252, 228, 108);
ellipse(116, 112, 53, 53);
}
if (i>18 & i<=24) { //moon -- night time
noStroke();
fill(119, 119, 119); //color of layer 1
ellipse(116, 112, 83, 83);
fill(170, 170, 170); //color of layer 2
ellipse(116, 112, 69, 69);
fill(209, 209, 209); //color of layer 3
ellipse(116, 112, 53, 53);
}
if (i>=1 & i<8) { //night to dawn
noStroke();
fill(119, 119, 119); //color of layer 1
ellipse(116, 112, 83, 83);
fill(170, 170, 170); //color of layer 2
ellipse(116, 112, 69, 69);
fill(209, 209, 209); //color of layer 3
ellipse(116, 112, 53, 53);
}
}
//cloud 1
noStroke();
fill(255);
ellipse(230, 96, 36, 18);
ellipse(248, 87, 36, 18);
ellipse(279, 87, 36, 18);
ellipse(261, 99, 36, 18);
//cloud 2
noStroke();
fill(255);
ellipse(248, 186, 36, 18);
ellipse(230, 198, 36, 18);
ellipse(217, 186, 36, 18);
ellipse(199, 195, 36, 18);
//cloud 3
noStroke();
fill(255);
ellipse(117, 154, 36, 18);
ellipse(99, 166, 36, 18);
ellipse(86, 154, 36, 18);
ellipse(68, 163, 36, 18);
//head
noStroke();
fill(249, 245, 215);
ellipse(370, 222, 160, 221);
//eyes
stroke(0);
strokeWeight(1);
fill(0);
beginShape();
curveVertex(301, 347);
curveVertex(309, 245);
curveVertex(316, 241);
endShape();
//shirtAndarms
noStroke();
fill(155, 178, 145);
ellipse(370, 448, 100, 240);
//hair
noStroke();
fill(88, 72, 72);
ellipse(376, 174, 171, 151);
ellipse(397, 305, 65, 255);
//coaster changes color by minutes(0, 15, 30, 45)
for (var i=0; i<=m; i++) {
if (i>=0 & i<15) { //blue coaster
noStroke();
fill(108, 121, 164);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=15 & i<30) { //pink coaster
noStroke();
fill(226, 61, 110);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=30 & i<45) { //green coaster
noStroke();
fill(63, 255, 86);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=45 & i<=59) { //purple coaster
noStroke();
fill(201, 147, 255);
ellipse(145, 413, 120+mapM, 35+mapM);
}
}
//bottomAndmiddleOfcup
stroke(0);
strokeWeight(1);
fill(237, 244, 181);
rect(105, 284, 80, 131);
ellipse(145, 413, 80, 23);
//topOfcup
stroke(0);
strokeWeight(1);
fill(239, 244, 201);
ellipse(145, 285, 80, 23);
//drink
noStroke();
fill(255, 175, 175); //pink lemonade
ellipse(145, 413, 60, 13);
rect(115, 414, 60, -mapS); //fills up each second
}
For this project, I wanted to show the different times during the day through the setting of my working area and my favorite beverage to drink. During the day, the window would show the sun and blue sky. During the evening, the window would show the moon and dark sky. Therefore, it changes depending on the hour. As for minutes, I decided to change the size and color of the coaster whenever the time hits 00, 15, 30, or 45. Lastly, the seconds are shown through the increasing amount of pink lemonade within the glass. Below is a drawing I made in photoshop to help me create this project.
My idea is to represent time through the growth of an Equinox Flower. This kind of flower is associated with final goodbyes, and legend has it that these flowers grow wherever people part ways for good. In old Buddhist writings, the Equinox Flower is said to guide the dead through samsara, the cycle of rebirth.
The size of the pedals is associated with the unit of time they represent. For example, the inner circle of pedals change their size according to seconds went by.
var x;
var y;
//r represent how far each pedal is from the center
var r=80;
var l=r/2*3;
var angle=0;
var size;
function setup() {
createCanvas(400, 600);
angleMode(DEGREES);
}
function draw() {
background(0,19,30);
var s=second();
var m=minute();
var h=hour();
//draw the stem first;
stem();
//move the center of the flower to the center;
translate(width/2,height/2-50);
push();
//the size of this set of Equinox pedal represents the hour
if(!h%24==0){
r=120;
size=map(hour(),0,60,2,3.5);
for(var i=0;i<=5;i++){
angle+=60;
Equinox(r*cos(angle),r*sin(angle),l,size,132);
}
}
//the size of this set of Equinox pedal represents the second
if(!s%60==0){
r=60;
size=map(second(),1,60,0.2,1.5);
for(var i=0;i<=5;i++){
angle+=60;
Equinox(r*cos(angle),r*sin(angle),l,size,236);
}
}
//the size of this set of Equinox pedal represents the mintue
if(!m%60==0){
r=80;
size=map(minute(),0,60,1.5,2.0);
for(var i=0;i<=5;i++){
angle+=60;
Equinox(r*cos(angle),r*sin(angle),l,size,181);
}
pop();
}
}
function stem(){
push();
fill(88,122,72,60);
translate(width/2,250);
noStroke();
//this for loop draws the growing calyx at the center
for (var r = 0; r < 10; r++) {
if (frameCount <= 180) {
ellipse(0, 6 + frameCount / 20, 6 + frameCount / 40, 12 + frameCount / 20);
}
if (frameCount > 180) {
frameCount=0;
}
rotate(360 / 5);
}
pop();
//main stem
stroke(88,122,72,120);
strokeWeight(5);
line(width/2-20,600,width/2,250);
}
//x and y represent the location; l is the distance to the center; s is the size; c is the color
function Equinox(x,y,l,s,c){
var w=105;
var h=50;
var start=135;
var end=225;
push();
//locate each unit's position
translate(x,y);
scale(size);
//c is the shade of red each layer has
stroke(c,50,50);
strokeWeight(0.5);
noFill();
//move each unit further from the center
translate(-l,-105/2);
rotate(-90);
for(var i=0;i<7;i++){
arc(0,l, w,h,start,end);
w=w*Math.pow( 1.001, 10 );
h+=8;
start-=5;
end+=5;
}
pop();
}
The project I want to talk about is a Perlin Noise project created by Victor Vergara. I admire how the outcome is leveraged on different factors, which gives some level of rationale for the arbitrary.
The code is consist of four functions: createPrimitive(); createGUI(); and animation(). The motion graphic started with a primitive setup, whereas the graphic user interface on the left allows the user to manipulate the input. The contribution of the creator is more about the rules, logic, and coded relationships rather than the output of that process. Indeed, when playing with randomness, the algorithm is more emphasized than the result.
I took inspiration from cuckoo clocks to make an abstract clock based on a face. The clock gets increasingly fatigued as its tongue inches out with every minute– its cheeks flush and the background also becomes redder with every hour. Saliva drip documents seconds.
var c; //color
var hourcolor; //color of the hour flower
var mincolor; //color of the minute flower
var seccolor; //color of the second flower
var wintercolor = '#ffffff'; //color of the winter ground
var springcolor = '#c6ed4c'; //color of the spring ground
var summercolor = '#29d359'; //color of the summer ground
var fallcolor = '#f26f16'; //color fo the fall ground
function setup() {
createCanvas(480, 480);
hourcolor = color(255,72,72,200); //red
mincolor = color(255,46,131,200); //pink
seccolor = color(123,52,214,200); //purple
}
function draw() {
background('#5e99ef'); //blue sky
push();
flower(110,320-10*hour(),hourcolor); //hour flower
pop();
push();
flower(230,320-4*minute(),mincolor); //minute flower
pop();
push();
flower(350,320-4*second(),seccolor); //second flower
pop();
noStroke();
if (month() > 2 & month() <= 5) { //when it is spring--March, April, May
fill(springcolor);
rect(0,width-70,width,70);
} else if (month() > 5 & month() <= 8 ) { //when it is summer--June, July, August
fill(summercolor);
rect(0,width-70,width,70);
} else if (month() > 8 & month() <= 11) { //when it is fall--September, October, November
fill(fallcolor);
rect(0,width-70,width,70);
} else { //when it is winter--December, January, February
fill(wintercolor);
rect(0,width-70,width,70);
}
}
function flower(x,y,c) { //flower structure
translate(x,y);
noStroke();
fill('#86e55a'); //green
rect(-2,0,5,500); //flower stem
ellipse(-10,100,20,10); //stem leaf
ellipse(10,150,20,10); //stem leaf
ellipse(-10,200,20,10); //stem leaf
ellipse(10,250,20,10); //stem leaf
fill(c);
for (var i = 0; i < 5; i ++) { //flower petals
ellipse(0, 0, 20, 70);
rotate(PI/5);
}
fill('#ffd961'); //yellow
ellipse(0,0,30,30); //flower middle circle
}
I found Marius Watz’s “Abstract01.js” interesting. Using processing.js, he created this piece of computational art. I think it might be “pseudo-random” because of the composition. The composition/visual of the shape when mouse clicked is random yet has somewhat consistent shape. To make it complicated and random but organized at the same time, I think Watz has used probability distributions to bias randomness to get this kind of composition. I admire the randomness and organized system that coexist in this artwork. I like the interactivity of it, too. It draws the shape when I click the mouse, and I like how interactive input and randomness are both present in this artwork.
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
