Composition in Line by Piet Mondrian and Computer Composition With Lines by IBM 7094
I found this piece through a really interesting article about how an IBM 7094 computer generated a drawing that was very similar to a painting done by Piet Mondrian. The two images were prompted with this questionnaire—”One of the pictures is of a photograph of a painting by Piet Mondrian while the other is a photograph of a drawing made by an IBM 7094 digital computer. Which of the two do you think was done by a computer?” According to the article, few people, including those who claim to like abstract art, were unable to identify the painting.
I admire the thought and intentions behind this project and how it questions the nature of art, how one was made traditionally, with hours of an artists’ time spent in front of a canvas with oil and paint, while the other was generated by an algorithm, specifically and deliberately designed to emulate Mondrian’s original work. It challenges people’s ideas on what traditional art is, and introduces randomness and computational practices to abstract art.
I used circles for time indicators. The circles “tick” larger as time passes and slowly fill the max size they could be. The background color also changes according to the time of day (morning, afternoon, evening).
// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 06
function setup() {
createCanvas(480, 480);
}
//--------------------------
function draw() {
background(255, 200, 200);
noStroke();
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
// Compute the widths of the rectangles
var mappedH = map(H, 0,23, 0,width - 50);
var mappedM = map(M, 0,59, 0,width - 50);
var mappedS = map(S, 0,59, 0,width - 50);
if (H >= 6 & H <= 14) { //Change color of the background depending on time of day. (Morning, Afternoon, Evening)
background('#87CEEB'); //morning sky blue
} else if (H > 14 & H <= 17) {
background('#fd5e53'); //afternoon sunset orange
} else {
background('black') //evening black
}
// Display the minutes and hours.
fill('#2e2e2e');
ellipse(width/2, height/2, mappedH, mappedH);
fill('#ED2B33');
ellipse(width/2, height/2, mappedM, mappedM);
noFill(); //Second "hand"
stroke(255);
ellipse(width/2, height/2, mappedS, mappedS);
}
For this week I found this really fun project done by a man named Larry Cotton. He was is a power-tool designer and part-time community college math instructor. He was inspired by an article written by Charles Platt and Aaron Logue about a how to make a random number generator out of simple hardware that creates an unlimited amount of generated noises that could then be converted to high and low digital states. Larry Cotton, was inspired by this project and decided to use it to create abstract art. He took the RNG and made a drawing machine that used two motors to randomly control a pen.
Drawing machine with pen hooked up.
drawing machine
I love this project because of the hybrid digital and physical nature. It is so cool that the project came from a digital RGN, to physical hardware, to another machine (drawing robot) which makes physical mark making. In the final images, he also scanned them in digitally again to color and finish.
More drawings from Larry Cottons project
scanned in and colored
The other great part about this project is Larry lays out all the steps he did in an article so others can also do it.
/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-06-Abstract Clock
*/
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw(){
var H = hour();
var M = minute();
var S = second();
for (H = 0; H < 23; H++) {
noStroke();
let z = map(H, 0, 23, 255, 0);// mapping background day and night
let m = map(H, 0, 23, 0, 240); //mapping moon and sun
background(0, z, 255); //druing the day it is light blue, during night it is dark blue
fill (252, m, 3); //during the day it is red(sun) during night it is yellow (moon)
ellipse(width / 2, height / 2, 200, 200);
stroke(255);//satellite that represents seconds
noFill();
let sec1 = map (S, 0, 60, 360, 0);
arc (200, 200, 300, 300, sec1, 0);
stroke(0, z, 255)
let sec2 = map (S-1, 0, 60, 360, 0);
arc (200, 200, 300, 300, sec2, 0);
stroke(255);//satellite that represents minutes
noFill();
let min1 = map (M, 0, 60, 0, 360);
arc (200, 200, 250, 250, 0, min1);
stroke(0, z, 255);
let min2 = map (M-1, 0, 60, 0, 360);
arc (200, 200, 250, 250, 0, min2);
stroke(255);//satellite that represents hours
noFill();
let hr1 = map (H, 0, 24, 0, 360);
arc (200, 200, 350, 350, 0, hr1);
stroke(0, z, 255);
let hr2 = map (H-1, 0, 24, 0, 360);
arc (200, 200, 350, 350, 0, hr2);
}
}
sketch
Color of the background and the sphere changes in order to indicate time. The movement of the satellites that orbit around each represent hr, min and sec.
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.
For my abstract clock, I initially started with an idea revolving around an outer space theme. I wanted to use ellipses to form loophole-like forms and a harmonious shape overalls that move in rhythm to a ticking clock. It was really difficult figuring out how to implement time and speed with these shapes I wanted to incorporate. However, it was really enjoyable to experiment and finally create an artwork that changes depending on how much time has passed, and that the image will not stay the same.
//Margot Gersing - Project 06 - mgersing@andrew.cmu.edu - Section E
function setup(){
createCanvas(480, 480);
angleMode(DEGREES);
}
function draw() {
background(255, 237, 233);
translate(width/1000, height);
rotate(270); // to start at top of screen
//time variables
var s = second();
var m = minute();
var h = hour() % 12;
//outline of ellipse - mapped to reflect time
var ah = map(h, 0, 12, 0, 360);
var am = map(m, 0, 60, 0, 360);
var as = map(s, 0, 60, 0, 360);
//ellipse size - mapped to reflect time
var eh = map(h, 0, 12, 300, 400);
var em = map(m, 0, 60, 150, 250);
var es = map(s, 0, 60, 10, 100);
// ellipse - radius increase to reflect time
noStroke();
fill(255, 192, 44); //hour circle
ellipse(width/2, height/2, eh, eh);
fill(111, 163, 118); //minute circle
ellipse(width/2, height/2, em, em);
fill(246, 195, 203); //second circle
ellipse(width/2, height/2, es, es);
//outlines
//seconds
noFill();
stroke(229, 56, 26);
strokeWeight(5);
arc(width/2, height/2, es, es, 0, as); //outline to reflect seconds passing
//minutes
noFill();
stroke(14, 94, 67);
strokeWeight(10);
arc(width/2, height/2, em, em, 0, am); //outline to reflect minutes passing
//hours
noFill();
stroke(255, 233, 105);
strokeWeight(15);
arc(width/2, height/2, eh, eh, 0, ah); //outline to reflect hour passing
}
For this project I wanted to create a bullseye shape that reflected the time in two ways, the outline and the size. I tried to make each circle proportionally sized so that the hour is largest, and second is the smallest. The outline is a more obvious way of showing the time and the size of the circle is much more subtle especially when it comes to the minute and hours.
Randomly Generated art constrained by normalized frames
I have always been interested in random and/or procedural generation, but for me, I also like to exhibit a certain amount of control over my work, not allowing for the randomly generated aspects to exist entirely on their own. For this reason, when I found the art of a group who calls themselves “Painting By Code” I was most interested in their work which had some elements of deliberate touch alongside the randomly generated geometries.
Seemingly random pattern can be generated by a comprehensive computational logarithms. This multi story public parking space in Sheffield city centre has natural anodized aluminum panels on its external envelope. Each of the aluminum panel is manufactured from a single sheet of folded aluminum hung in four different orientations with a seemingly random rhythm. The gaps between the panels in four direction provides natural ventilation and creates a sense of sculpture for a box.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
