Artist Manolo Gamboa Naon from Argentina creates art from the randomness of computational algorithm he creates. His art looks very intentional and involves lots of hard shapes and geometry, yet the idea of randomness is very fluid, so its interesting to see these two styles intersecting. I enjoy how the art itself is very reminiscent of mid-century art and feels as it could fit right in place with the 60s style art that relied so heavily on paint and traditional materials. His abstract and random work is grounded through shapes and color. By using just a circle and triangle, Naon is able create a piece of art by color changing and object placement.
/* Charmaine Qiu
charmaiq@andrew.cmu.edu
section E
project 06, Abstract Clock */
function setup() {
createCanvas(300, 300);
}
function draw() {
background(255,200,200);
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
//variables that fits the time into certain coundaries
var poolW = map(M, 0, 59, 70, width);
var eyesH = map(H, 0, 23, 30, 1);
noStroke();
//creating the elements of the girl that does not change over time
//body
fill(252, 73, 3);
ellipse(width / 2, height, 130, 200);
//face
fill(255, 238, 227);
ellipse(width / 2 - 40, height / 2 + 20, 30, 30);
ellipse(width / 2 + 40, height / 2 + 20, 30, 30);
ellipse(width / 2, height / 2, 100, 120);
angleMode(DEGREES);
//hair
fill(245, 108, 66);
arc(width / 2, height / 2, 110, 140, -180, 360);
ellipse(100, 90, 50, 50);
ellipse(200, 90, 50, 50);
//mouth
arc(width / 2, height / 2 + 50, 40, 50, -180, 360);
//table
fill(201, 150, 113);
rect(0, 250, width, 70);
//HANGRY
fill(255, 238, 227);
//("HANGRY", width / 2 - 23, 140);
text("When is my FOOD coming?", width / 2 - 70, 40);
//when it is midnight, "HANGRY" appears on the head
if (H == 59){
text("HANGRY", width / 2 - 23, 140);
}
//drooling drops that falls down every second
push();
translate(160, 200);
m = floor(millis()) % 1000;
m = map(m, 0, 1000, 0, 200);
fill(147, 206, 237);
ellipse(0, m, 7, 7 + m * 7 / 200);
pop();
//the pool gets gets larger as a minute goes by
fill(147, 206, 237);
ellipse(width / 2, height, poolW, 50);
//the eyes becomes smaller as hours in a day pass by
fill(80);
ellipse(width / 2 - 20, height / 2 + 15, 10, eyesH);
ellipse(width / 2 + 20, height / 2 + 15, 10, eyesH);
}
This project is very interesting since I was able to design and compute a graphic that evolves around time. I took the idea of creating a literal clock further by creating a narrative to my work.
I have always wanted to try living without knowing what the time is. How can I make a clock that doesn’t tell me the time? The way I started brainstorming for this was quite simple. Time would be represented through a greyscale spectrum. I wanted to go as abstract and clean as possible, which was at first, just three squares.
First iteration: three squares.
Through this, I wanted to represent time in color, simply by changing the shade of the squares every second minute and hour.
I liked this solution because it was as clean, modern, and abstract as possible. You can’t actually know what second it is in any way; it is only dictated by a spectrum.
I began to further develop this solution by adding the factor of length so that the rectangle grows as time passes.
Finally, I added the concept of “time is a social construct”. “Time is” is always there in black, but the answer changes as time passes. In the beginning of the hour and minute, the shades of the second and minute are the darkest, and as time passes, they fade away. Inversely, the answer “a social construct” becomes darker as time passes.
//alcai@andrew.cmu.edu
//project6 abstract clock
//section E week 6
function setup(){
createCanvas(500,500);
}
function draw() {
strokeWeight(0);
background('white');
//variables for time
var s = second();
var m = minute();
var h = hour();
//second rectangle grows per second and gets lighter, at 60 seconds it is white
fill(255/60 * s);
rect(width/4, height/2 - 50, 40,40 + 3 * s);
//minute rectangle grows per minute and gets lighter at the pace of the second rectangle
fill(255/60 * s);
rect(width/2, height/2 - 50, 40, 40 + 3 * m);
//hour rectangle grows per hour and gets lighter at the pace of the minute rectangle
fill(255/60 * m);
rect(width/4 * 3, height/2 - 50,40,40 + 3 *h);
//time is... is always black, but "a social construct" gets darker by the second, inverse to the actual time rectangles.
textSize(32);
fill(0);
text('TIME IS...', width/4, height/2 - 100);
fill(255 - 255 / 60 * s);
text('A SOCIAL CONSTRUCT', width/4, height/2 - 75);
}
/*
* Angela Lee
* Section E
* ahl2@andrew.cmu.edu
* Project 6 Abstract Clock
*/
function setup() {
createCanvas(400, 400);
}
function draw() {
// background
var top = color(249, 237, 201); // pale yellow color
var bottom = color(237, 165, 117); // peach color
setGradient(top, bottom); // background gradient
// time
var hours = hour();
var minutes = minute();
var seconds = second();
var milli = millis();
// halo changes color with milliseconds
halo(milli);
// the shadow grows longer with hours
setting(hours);
// the drink color changes with minutes
behindGls(minutes);
// the foam bubbles move with milliseconds
foam(milli);
// the drink color changes with minutes
frontGls(minutes);
// the straw moves with the seconds
straw(seconds);
}
// BACKGROUND GRADIENT
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);
}
}
// ----------BELOW THIS LINE ARE PIECES OF THE DRAWING -----------
// HALO AROUND LATTE
function halo(milli) {
big = 300; // big circle size
med = 245; // medium circle size
small = 185; // small circle size
x = width/2 // x position
y = height/2 - 30; // y position
r = 15 * sin(milli / 1000.0);
g = 15 * sin(milli / 1000.0 + HALF_PI);
b = 30 * sin(milli / 1000.0 - HALF_PI);
stroke("white");
strokeWeight(1);
fill(249 + r, 240 + g, 155 + b);
ellipse(x, y, big, big);
strokeWeight(2);
fill(250 + r, 237 + g, 130 + b);
ellipse(x, y, med, med);
strokeWeight(3);
fill(252 + r, 240 + g, 84 + b);
ellipse(x, y, small, small);
}
// TABLE, SHADOW
function setting(hours) {
// table
noStroke();
fill(133, 88, 51);
rect(0, 2/3 * height, width, height/3);
// shadow
fill(112, 67, 34);
shadowW = map(hours, 0, 24, 160, 240);
ellipse(240, 321, shadowW, 65);
}
// FIRST LAYERS OF LATTE
function behindGls(minutes) {
// glass
glsX = 119.799; // glass x-coordinate
glsY = 148.193; // glass y-coordinate
glsW = 160.403; // glass width
glsH = 169.456; // glass height
glsEllipseH = 50.513; // glass ellipse height
fill(231, 239, 242);
rect(glsX, glsY, glsW, glsH);
ellipse(glsX + glsW / 2, glsY + glsH, glsW, glsEllipseH);
// drink
var clrChange = map(minutes, 0, 60, 0, 40);
Green = color(197 - clrChange, 201 - clrChange, 125 - clrChange);
drnkX = 128.906; // drink x-coordinate
drnkY = 148.193; // drink y-coordinate
drnkW = 142.071; // drink width
drnkH = 165.456; // drink height
drnkEllipseY = 313.65; // bottom of glass ellipse y-coordinate
drnkEllipseH = 40.477; // bottom of glass ellipse height
fill(Green);
rect(drnkX, drnkY, drnkW, drnkH);
ellipse(drnkX + drnkW / 2, drnkEllipseY,
drnkW, drnkEllipseH);
}
// FRONT LAYERS OF LATTE
function frontGls(minutes) {
clrChange = map(minutes, 0, 60, 0, 50);
// TOP GLASS ELLIPSE
fill(231, 239, 242);
ellipse(glsX + glsW / 2, glsY, glsW, glsEllipseH);
// GREEN TOP ELLIPSE
fill(166 - clrChange, 180 - clrChange, 76 - clrChange);
ellipse(glsX + glsW / 2, glsY, drnkW, drnkEllipseH);
}
// FOAM
function foam(milli) {
foamH = 41.592;
// body of the foam
fill(246, 249, 220);
rect(drnkX, drnkY, drnkW, foamH);
ellipse(drnkX + drnkW/2, drnkY + foamH, drnkW, drnkEllipseH);
ellipse(164.455, 203.479, 34.55, 25.72);
ellipse(206.343, 210.407, 62.807, 26.791);
ellipse(239.538, 202.514, 34.55, 25.72);
// big bubbles
fill(197, 201, 125);
bigBbl = 5; // size of big bubbles
bigBblX = [143, 163, 180, 216, 219, 245, 253]; // big bubble x values
bigBblY = [174, 195, 194, 208, 190, 200, 183]; // big bubble y values
change = sin(map(milli, 0, 60, 0, 1));
// the big bubbles move left and right depending on milliseconds
for (var i = 0; i < bigBblX.length; i++) {
ellipse(bigBblX[i] + change, bigBblY[i] + change, bigBbl, bigBbl);
}
// small bubbles
fill(216, 216, 160);
smlBbl = 5; // size of big bubbles
smlBblX = [156, 170, 212, 239, 245]; // small bubble x values
smlBblY = [203, 181, 194, 203, 177]; // small ubble y values
// the small bubbles move left and right depending on milliseconds
for (var i = 0; i < smlBblX.length; i++) {
ellipse(smlBblX[i] - change, smlBblY[i] - change, smlBbl, smlBbl);
}
}
// STRAW
function straw(seconds) {
strX = map(seconds, 0, 60, 141, 218.587); // straw x-coordinate
strY = 210.407; // straw y-coordinate
strW = 12.49; // straw width
strH = 94.115; // straw height
strEllipseH = 4.065; // ellipse straw height
fill("white");
rect(strX, strY - 150, strW, strH);
ellipse(strX + strW/2, strY - 150 + strH, strW, strEllipseH);
ellipse(strX + strW/2, strY - 150, strW, strEllipseH);
// shadow within the straw
fill(232, 232, 232);
ellipse(strX + strW/2, strY - 150, strW - 2, strEllipseH - 1);
}
As I was sitting down to plan out my abstract clock, I was craving a matcha latte so I decided to make that the main visual of my clock. I wanted to create a piece that represented time in a more abstract manner, so I decided to make parts of my matcha latte move or change in accordance to different time variables. To plan out my piece, I first sketched out my matcha latte.
As I began to code the composition, I realized that I wanted more contrast between the latte and the background. So, I added a couple of halo-like ellipses to establish a focal point around the latte.
For this week, I stumbled upon Random Braids. This was created by Dan Gries. I thought this project was interesting because of the process the designer went through to create his work. He has a blog that shows different types of generated artworks. Random Braids stood out the most to me, because when you think about braids, they are very systematic. By generating random braids, it is interesting to see how they intertwine with each other.
In order to create this design, he used JavaScript and HTML5 canvas. There are two versions of fixed images of the braids and two versions of the braids scrolling endlessly. Before getting to his final iterations, he did a lot of research. The braids show the intersection of the mathematical areas of abstract algebra, topology, and knot theory. The braids were made by a set of simple braids which have a single crossing of strings. If the top braid is attached to its inverse, the strings can become untangled.
What I admire about the work is how simple yet aesthetically pleasing the end product ended up being. My understanding of randomness in algorithms is mostly limited to what I have been learning in p5.js. In order for Gries to code this, he had to draw the strings row by row. He would randomly select positive or negative crossings. Through the arrays, the colors were chosen. More information about how the algorithm work can be found on his blog post about random braids.
// Yoshi Torralva
// yrt@andrew.cmu.edu
// Section E
// Project-06-Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
background(255, 188, 0);
var H = hour();
var M = minute();
var S = second();
noStroke();
//grass
fill(0, 104, 47);
rect(0,405,480, 75);
// tree
fill(107, 38, 0);
rect(376,50, 63, 300);
fill(5, 73, 39);
ellipse(410, 50, 300, 300);
//Sun for Hour
fill(255, 211, 26);
ellipse(125, 200, 200, 200);
fill(249, 206, 0);
ellipse(125, 200, H * 5, H * 5);
// plants
fill(5, 73, 39);
rect(0,260,480, 145);
//fence backing
fill(173, 66, 11);
rect(0, 280, 480, 20);
rect(0, 350, 480, 20);
//horizon line grass
fill(7, 63, 31);
rect(0,400,480, 10);
//fence for loop
for(var i = 0; i < 59; i++) {
fill(173, 66, 11);
rect(i * 8.2, 250, 7, 155);
ellipse(i * 8.2 + 3.4, 250, 7, 7);
}
//filled in fence for variable M
for(var i = 0; i < M; i++) {
fill(137, 42, 0);
rect(i * 8.2, 250, 7, 155);
ellipse(i * 8.2 + 3.4, 250, 7, 7);
}
//calling dog into canvas
dachshund(S * 1, 0);
//clock in the tree
fill(0, 104, 47);
textSize(32);
text(H, 300, 40);
text(M, 320, 120);
text(S, 390, 150);
}
//dog
function dachshund (x, y) {
push();
translate(x, y);
//tail
strokeWeight(5);
stroke(5);
line(46, 360, 20, 385);
noStroke();
fill(255);
//body
rect(50, 357, 80, 32);
//back
ellipse(50, 373, 32, 32);
//chest
ellipse(130, 373, 32, 32);
//back leg
rect(34, 370, 13, 35);
//front leg
rect(120, 370, 10, 35);
//paws
ellipse(130, 402, 6, 6);
ellipse(47, 402, 6, 6);
//black fur front chest
fill(0);
arc(130, 373, 32, 32, 3 * PI / 2, PI/2, CHORD);
//ear
fill(73, 33, 7);
rect(130, 340, 16, 30);
ellipse(138,370, 16, 16);
//head
fill(0);
quad(145, 340, 180, 350, 175, 365, 145, 370);
//eyes
fill(255);
ellipse(155,350,6, 6);
fill(0);
ellipse(156,349, 4, 4);
//spots
fill(0);
arc(100, 357, 40, 40, 2 * PI, PI, CHORD);
arc(70, 389, 30, 30, PI, 2 * PI, CHORD);
ellipse(48,370, 15, 15);
pop();
}
Initial Sketch
With this project, I wanted to create an abstract clock set in a scene with my dog. Planning was important before I could start making this scene with p5.js as I would need to know what shapes I would use to create my dog. In the sketch, I illustrate the shapes I will have to create. In my editor, I made my dog a function I could call to free up space in the function draw(). In terms of inserting time-based motion, the dog moves by seconds, the fence changes color to minutes, and the sun increases in size to hours. I used a loop to replicate the base fence and another for the minutes’ fence to fill in.
/* Youie Cho
Section E
minyounc@andrew.cmu.edu
Project-06-Abstract-Clock*/
function setup() {
createCanvas(300, 480);
}
function draw() {
background(0);
// Current time
var M = minute(); // MIN: face width
var S = second(); // SEC: face color, mouth curve, sparkling background
var H = hour(); // HR: eyebrow angle, white bar progression
noStroke();
// SEC background sparkles as one frame is displayed per second
for (var i = 0; i < 60; i ++) {
frameRate(1);
var x = random(0, width);
var y = random(0, height);
var diam = random(0.1, 2);
ellipse(x, y, diam, diam);
}
// MIN face changes from narrow to wide from 0 to 59 minutes
var face = map(M, 0, 59, 120, 230);
// SEC face color gets redder from 0 to 59 seconds
var g = map(S, 0, 59, 197, 21);
var b = map(S, 0, 59, 143, 0);
fill(225, g, b);
ellipse(150, 150, face, 195);
//SEC mouth changes from a downward to an upward curve from 0 to 59 seconds
fill(255, 116, 74);
var mouth = map(S, 0, 59, 0, width);
bezier(110, 180, 130, 220 - mouth / 3, 170, 220 - mouth / 3, 190, 180);
//HR eyebrows move from horizontal lines to angled lines from 0 to 23 hours
stroke(255);
strokeWeight(7);
var brow = map (H, 0, 23, 95, 75);
line(105, 95, 130, brow);
line(170, brow, 195, 95);
//HR white bar progresses from left until the flame icon from 0 to 23 hours
noStroke();
fill(30);
rect(67, 350, 176, 20);
fill(255);
var HBar = map(H, 0, 23, 0, 176);
rect(67, 350, HBar, 20);
//static elements:
//eyes
stroke(0);
fill(0);
ellipse(120, 120, 8, 8);
ellipse(180, 120, 8, 8);
//flame icon
ellipseMode(CENTER);
noStroke();
//outer flame
fill(168, 45, 0);
ellipse(238, 364, 31, 31);
triangle(223, 359, 238, 329, 253, 359);
//inner flame
fill("yellow");
ellipse(238, 369, 21, 21);
triangle(228.5, 364, 238, 349, 247, 364);
}
The idea I had for this project was showing stress level throughout the day in a comical way, because I was particularly very tired and frustrated when I began working on this. The face shows a sad expression, redder color, etc. as the time passes, and the bar at the bottom shows how much you are through the day. I could really understand how a clock can work by starting with the base code. I think it was a good opportunity for me to clarify what different variables can mean. For instance, if I make a “second” variable, I have to know if I am referring to the exact number, or a variable that somewhat represents the change of numbers. Overall, it was fun.
//Caroline Song
//Section E
//chsong@andrew.cmu.edu
//Project 06 - Abstract Clock
function setup (){
createCanvas(480, 480);
}
function draw(){
background(127, 227, 250);
//calling current time values
var S = second();
var M = minute();
var H = hour();
var arcSize = 200;
//fitting time values to arcs
var mappedS = map(S, 0, 59, 180, 360);
var mappedM = map(M, 0, 59, 180, 360);
var mappedH = map(H, 0, 23, 180, 360);
//outer ring for seconds
angleMode(DEGREES);
noFill();
stroke(252, 177, 228);
strokeWeight(30);
arc(width/2, height/2, arcSize + 120, arcSize + 120, 180, mappedS);
//middle ring for minutes
noFill();
stroke(250, 247, 100);
strokeWeight(30);
arc(width/2, height/2, arcSize + 60, arcSize + 60, 180, mappedM);
//inner ring for hours
noFill();
stroke(0, 209, 24);
strokeWeight(30);
arc(width/2, height/2, arcSize, arcSize, 180, mappedH);
//draw clouds
fill("white");
noStroke();
//cloud1
ellipse(45, height/2 + 75, 60, 60);
ellipse(95, height/2 + 65, 95, 95);
ellipse(130, height/2 + 60, 80, 80);
ellipse(165, height/2 + 80, 60, 60);
//cloud2
ellipse(width/2 + 50, height/2 + 70, 75, 75);
ellipse(width/2 + 100, height/2 + 70, 100, 100);
ellipse(width/2 + 150, height/2 + 70, 85, 85);
ellipse(width/2 + 175, height/2 + 95, 50, 50);
}
Initial sketch of clock design
For this project, I wanted to communicate time in a lighthearted manner. For all those times that people are stressed or in a bad mood when looking at time, I wanted to combat those feelings with an engaging and colorful depiction of time.
*the pink seconds arc makes a full 360 arc each time it reaches 60 seconds, but it’s only supposed to return back to 180 degrees and repeat, which it does in Sublime but not when I embed it into WordPress.
For my abstract clock, I first wanted to use words to go about my design, but I felt that it would be a bit too complicated. I felt the purpose of this project was to make it easy to still tell time while making it more interesting to do so. I really enjoyed making this project because I went through a lot of trial and error models until I found something I really liked. I also like the different sized in the boxes just to make it vary a bit more. When the Hour Box is full, that represents 24 hours. When the Minute Box is full that represents 60 minutes. When the Second Box is full, that represents 60 seconds.
For this abstract clock, I really wanted to do something that grow out radially and moves in proportion to its time sequencing. I wanted to build something that gives the resemblance of a clock but doesn’t necessarily function entirely as one. This prompted me to utilize ellipses and to move them around the screen depending on their associated time measurement.
The wider you move out the ring, the more micro the time gets. The innermost ring represents hour while the black circle on the outside represents milliseconds. As you move from innermost ring to outermost ring, the opacity getter lighter and lighter until it becomes black (millisecond).
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
