The following work is titled ‘e4708‘ by Mark Wilson. Throughout the 80s, it was challenging to create artwork involving a machine. Wilson started to learn programming in 1980, after he bought himself a microcomputer. He then began using this computer to create artwork. His work generally consists of repetition in order to create complex layers that result in very intricate art pieces. Some of the aspects of his art are specifically chosen by him, while some other aspects are left to chance and chosen randomly by the computer.
Wilson’s work has also been exhibited all across the world. His distinct technological style and geometric imagery have made him famous in computer art. I admire the color and style that Wilson uses in his work. It makes the piece very complex and interesting to look at. He also includes many geometric pieces in his work, giving it a very distinct look.
//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project 06: Abstract Clock
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(300, 480);
millisRolloverTime = 0;
}
function draw() {
background('BLACK');
// Current time
var H = hour();
var M = minute();
var S = second();
var D = day();
var M = month();
var SecondColor = 100
var Flicker = 255
// Current millisecond if the second has rolled over
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
var hourBarYPosition = map(H, 0, 23, 0, height); //mapped to fit y postion of hours
var minuteBarYPosition = map(M, 0, 59, 0, width); //mapped to fit y postion of minutes
var secondBarWidth = map(S, 0, 59, 30, width); //mapped to fit width postion of seconds
var secondsWithFraction = S + (mils / 1000.0); //creates fraction to interpolate smooth transition
var secondBarWidthSmooth = map(secondsWithFraction, 0, 60, 6.5, width/2 - 6.5); //mapping seconds to allow them to fit within desired bounds
var dayXPosition = map(D, 0, 31, 7, width - 7) //mapped to fit x postion of days
var monthXPosition = map(M, 0, 12, 7, width - 7) //mapped to fit x postion of month
fill(126, 168, 130, 200)
rect(dayXPosition, 7, 5, 15); //represents day
rect(monthXPosition, 7, 5, height - 14) //represents month
rectMode(CENTER)
noStroke();
fill('#a87f7e');
rect(width/2, hourBarYPosition,width - 13, 20); //represents hour
rectMode(CORNER)
if (S > 58) { // once the two second bars come together, it turns white to signal one minute
SecondColor = 255
}
push() //reverses the canvas for the second rectangle to mirror it on canvas
rotate(PI)
fill(SecondColor)
rect(-width + 6.5, -minuteBarYPosition, secondBarWidthSmooth, -10); //represents seconds on right
pop()
fill(SecondColor)
rect(6.5, minuteBarYPosition, secondBarWidthSmooth, 10) //represents seconds on left
if (S % 2 != 0){ //if it is not odd numbered second, it will turn off
Flicker = 0
}
fill(Flicker)
rect(2, height - 7, width - 4, 5) //represents second flashes
rect(width-7, 2, 5, height - 4)
}
I was trying to decide what to make my abstract clock about, and I read into Rietveld Shroder; his designs included a lot of different proportioned rectangles. I decided to use this as inspiration. For this project, I wanted to use rectangles to create a succession of movements, creating a dynamic, truly abstract clock
/*
* 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.
Matt Deslauriers, a creative director, designed a real-time rendered randomly generative art piece. He uses Node.js to quickly render output the program’s results. Simplex noise is utilized to drive the particles, with each particle affected directly by the noise to curl a lot or move straight. Photographs were also used as distortion maps to further refine the end result. According to Deslauriers, photographs of snails, flowers, architecture, and geometry seemed to work the best. For instance, this photo of a rose window at Notre-Dame (rip). Check out more real-time renderings here
/*
Hyejo Seo
SectionA
hyejos@andrew.cmu.edu
Project-06-Abstract Clock
*/
var balloonW;
function setup() {
createCanvas(400, 400);
}
function draw() {
var secs = second();
var mins = minute();
var hr = hour();
var balloonY = 250;
// mapping
var secsM = map(secs, 0, 59, 0, 150);
var minsM = map(mins, 0, 59, 0, 220);
var hrM = map(hr, 0, 23, 10, 100);
background(234, 239, 211);
// balloon pump
fill(0);
rect(345, 170, 10, 70);
quad(330, 240, 370, 240, 360, 300, 340, 300);
quad(343, 300, 358, 300, 354, 350, 347, 350);
fill(47, 41, 99);
noStroke();
rect(320, 20 + secs, 60, 150);
// pipe
fill(147, 181, 198);
rect(347, 350, 7, 30);
rect(100, 373, 250, 7);
rect(93, 350, 7, 30);
ellipse(335 - minsM, 376, 40, 20); // circle representing the air movement
//Balloon
balloonW = 90;
fill('#CEEC97');
stroke(0);
strokeWeight(2);
rect(92, balloonY + 70, 10, 28);
ellipse(97, balloonY + 98, 10, 5);
ellipse(95, balloonY, balloonW + hrM/2, 150); // increases size by the hour
// showing the hour on the balloon
fill(0);
noStroke();
textSize(50);
textFont('Avenir');
text(int(hr), 68, balloonY + 15);
}
sketching my idea for this project
It took me awhile to think of something fun to represent time. I focused on the increasing factor of time, which led me to think of a balloon inflating. I decided to control the movement of the balloon pumper with seconds, and the air bubble moving through the wire with minutes. Then, the balloon inflates every hour.
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.
Flight Patterns is a time-lapse animation made by Aaron Koblin, a digital media artist and entrepreneur, in 2011. This project displays American air-traffic patterns and densities over a 24-hour time period, by following the routes of around 140,000 American planes crossing the United States. I found this project interesting because of the way it visualizes this information. The artist uses a variety of color and patterns to illustrate a wide range of data including aircraft type, no-fly zones, weather patterns and alteration to routes.
Flight Patterns, 2007
As the animation reveals iterations of flight patterns during the cycle, the viewer experiences a changing, phantom geography of the country with airline hubs appearing as bright points of diffusion within a complex web.This project employs data visualization and processing, an open-source computer programming environment. FAA (Federal Aviation Administration) data was all parsed and plotted using Processing. Koblin’s use of aggregate data to reflect on life and our systems is a reflection on the relationship between humans and technology.
The paths of air traffic over North America visualized in color and form
Another version of Flight Patterns visualizing planes in monochrome
Siebren Versteeg is a digital artist who uses algorithmic code to generate his pieces. He observes existing abstract paintings and then writes code based on his perceived understandings of those paintings. His works are a result of layers and layers of algorithmic generated strokes, which are then captured at a random point in time. Since Versteeg’s works are so complex and layer-based, the varying times at which they are captured can drastically change the end result.
Truisms, 2018. Images based on Jenny Holzer’s text were googled and compiled in real-time before being refreshed every 3 minutes and disappearing forever.
Before painting, Versteeg chooses the different variables he uses to create his art. These variables range from the color of the paint, the type of binder used, the way the paint sticks, and the way the paint drips, as well as more. Versteeg’s artistic sensibility is definitely visible in the way he chooses to compile his pieces, with a combination of dream-like strokes and more image-based cutouts. His pieces range dramatically, from abstract fractals to more collage inspired pieces.
Imploder, 2013. A slightly older piece of Versteeg’s.
//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 06 - Abstract Clock
function setup(){
createCanvas(400,600);
}
function draw(){
background(0);
//variables for time
var s = second();
var m = minute();
var hr = hour();
//Shining stars and black night background
for (var i = 0; i < 100; i ++) {
frameRate(2);
fill(225);
var eSize = random(1, 5);
var x = random(0, width);
var y = random(0, height);
ellipse(x, y, eSize, eSize);
}
//Mapping time to shape components
var secIncrease = map(s, 0,59, 0, height);
var minIncrease = map(m,0, 59, 50, height/2);
var hrIncrease = map(hr, 0, 23, 100, height * 3/4);
//Every minute, the blue sky background will decrease, slowly revealing the space
fill(102, 153, 255);
rect(0, 0, width, height - minIncrease);
//Rocket flies upwards every second
fill(78, 78, 252);
triangle(225, 525 - secIncrease, 190, 570 - secIncrease, 260, 570 -secIncrease);
fill(252, 84, 78)
rect(190, 570 - secIncrease, 70, 100);
stroke(0);
strokeWeight(10);
fill(255);
ellipse(225, 600 - secIncrease, 30, 30);
noStroke();
fill(252, 153, 78);
triangle(190, 670 - secIncrease, 225, 730 - secIncrease, 260, 670 - secIncrease);
fill(170, 110, 196);
triangle(190, 670 - secIncrease, 190, 710 - secIncrease, 230, 670 - secIncrease);
//Pink circle is the sun, which is changing color every hour
//The sun also goes down every hour
noStroke();
fill(hrIncrease, 180, 220);
ellipse(100, hrIncrease, 60, 60);
}
This project was challenging as I had to analyze how to incorporate the time concept into my canvas, letting each element pace by a specific rate of time. I imagined a rocket flying up by each second, and the sky slowly disappearing along as the rocket goes further up. The sun would also go down at the same time by every hour. With this, I got to review the map function once more, as I got to think about the range that is needed to limit the movement of the rocket. Also it took some time figuring out how to move the rocket in second increments up, which I eventually did by subtracting “secIncrease,” since the coordinates get smaller as it gets nearer to the top.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
one of many real-time generations
