Interruptions (1968) by Vera Molnar is a series of drawings of computer graphics generated by Molnar, herself. Molnar introduced randomness into her practice when she began to use computers because she realized humans could not produce pure randomness without it looking repetitive. From what I’ve gathered through research, Interruptions was made using an iterative process. With each new work, she modified her algorithm to build upon the last, exploring a range of possibilities. This implies that her earliest images in the series can be defined as the most random. As she continued to alter her code, adding new structures, her algorithm generated images more specific to what she desired. Molnar’s meticulousness is apparent upon viewing her work: Viewers can see that Molnar used a grid to structure the placement of a line. There is obviously a set of rules that predetermine how the lines shift. I admire the generative process that Molnar placed her code under. Her use of programming to explore ranges of possibilities is an interesting use of computers. She understood the limitations of humans, and thereby employed computers to do the work for her. She was a pioneer and Interruptions is a manifestation of her ability to think outside of the box.
/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-06
*/
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(300, 300);
}
function draw() {
background(154,191,219);
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
// Reckon the current millisecond,
// particularly if the second has rolled over.
// Note that this is more correct than using millis()%1000;
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
// print current time next to corresponding colors
noStroke();
fill(0);
text("Hour: " + H, 30, 22);
text("Minute: " + M, 30, 42);
text("Second: " + S, 30, 62);
text("Millis: " + mils, 30, 82);
fill(0);
ellipse(15,18,12,12);
fill(255/3);
ellipse(15,38,12,12);
fill(255*(2/3));
ellipse(15,58,12,12);
fill(255);
ellipse(15,78,12,12);
//Hours
var hStart = 0 - HALF_PI //first arc always starts at 0
var hRadius = 100+(200/24) //first arc radius
//loop creates individual wedges, the number of wedges corresponding to current hour
for (var a = 0; a < H; a ++){
stroke(255);
fill(0);
//creates arc from point of 'start' to 'start' plus the 'i'th wedge
arc(50 + width / 2, 10 + height / 2, hRadius, hRadius, hStart, hStart + (TWO_PI/24), PIE);
//reassigns start with the addition of 'i'th wedge
hStart += (TWO_PI/24)
hRadius += (200/24)
}
//Minutes
var mStart = 0 - HALF_PI
var mRadius = 75+(200/60) //first arc radius
//loop creates individual wedges, the number of wedges corresponding to current minute
for (var a = 0; a < M; a ++){
fill(255/3);
stroke(255);
//creates arc from point of 'start' to 'start' plus the 'i'th wedge
arc(50 + width / 2, 10 + height / 2, mRadius, mRadius, mStart, mStart + (TWO_PI/60), PIE);
//reassigns start with the addition of 'i'th wedge
mStart += (TWO_PI/60)
//reassigns radius of next wedge to
mRadius += (200/60)
}
var sStart = 0 - HALF_PI
var sRadius = 25+(200/60) //first arc radius
//loop creates individual wedges, the number of wedges corresponding to number of values in array
for (var a = 0; a < S; a ++){
//loop generates shades of grey, value increasing in accordance to number of values in array
fill(255*(2/3));
stroke(255);
//creates arc from point of 'start' to 'start' plus the 'i'th wedge
arc(50 + width / 2, 10 + height / 2, sRadius, sRadius, sStart, sStart + (TWO_PI/60), PIE);
//reassigns start with the addition of 'i'th wedge
sStart += (TWO_PI/60)
sRadius += (200/60)
}
var msStart = 0 - HALF_PI
var msRadius = 0 //first arc radius
//loop creates individual wedges, the number of wedges corresponding to number of values in array
for (var a = 0; a < mils; a ++){
//loop generates shades of grey, value increasing in accordance to number of values in array
fill(255);
//creates arc from point of 'start' to 'start' plus the 'i'th wedge
arc(50 + width / 2, 10 + height / 2, msRadius, msRadius, msStart, msStart + (TWO_PI/1000), PIE);
//reassigns start with the addition of 'i'th wedge
msStart += (TWO_PI/1000)
msRadius += (200/1000)
}
}
This was a really fun project. I found it interesting thinking of a new way to display time. My project isn’t very abstract, in fact, I think it’s much more literal than a normal clock, seeing as it counts for every increase in every hour, minute and second of time. My code references the tally assignment we had to do the week prior, so it was a great way of implementing old knowledge.
This is a link to the artists page, and below is a piece that he randomly formulated.
This project was executed by a student at Harvey Mudd College named Christopher Stone. He generated a program that makes randomly generated arithmetic expressions that are translated into intricate pieces. The artist uses the traversal of an abstract syntax tree as an algorithm to generate the intricate works, as well as functions like reverse and append in various programming languages to get the desired looks, but all of the arithmetic inside the functions are totally randomized. By using sin and cos functions along with pi, the results are beautifully colorful abstract works. The resulting images are representative of ‘glitch’ artwork and are simple and complex at the same time.
//Name: Alessandra Fleck
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-06
function setup() {
createCanvas(480, 480);
noStroke();
}
function draw() {
background(255);
//set for for hour,minutes and seconds
var h = hour();
var m = minute();
var s = second();
//blue waves going down
for (var i = 0; i < (s*10); i ++) { //increments at x10 the distance
stroke(179,223,222);
strokeWeight(0.3);
line(i*4, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*4, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 20);
line(i*4, 0, height * 0.6, i + 20);
line(i*2, 0, height * 0.5, i + 100);
}
//brown waves going down
for (var i = 0; i < (s*20); i +=5) { //increments at x20 the distance
stroke(255);
strokeWeight(0.5);
line(i*2, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*2, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 200);
line(i*2, 0, height * 0.6, i + 200);
line(i*2, 0, height * 0.5, i + 600);
}
//black waves going down for the minutes
for (var i = 0; i < m; i +=5) { //strings will slowly branch out black for every minute
stroke(0);
strokeWeight(0.3);
line(i*2, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*2, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 200);
line(i*2, 0, height * 0.6, i + 200);
line(i*2, 0, height * 0.5, i + 600);
}
//white circle_01
fill(100,10+(s*50),255);
noStroke();
ellipse(50,s*10,30,30);
//white circle_01_hour
fill(255);
stroke(0);
strokeWeight(1);
ellipse(50,h*10,30,30);
}
For this project I wanted the abstraction of the clock to be something that is completed as time passes. Instead of the long skinny arms of a clock being the seconds passing, I instead made them the minute hands and had the seconds move down in a parametric curve to create a wave in the background.
The sketch above shows a bit of the process in the form of the clock.
This is a collection of work of a course happened during 2015 spring in RISD led by Carl Lostritto who is a Graduate Program Director and Assistant Professor of Architecture at RISD.
Aaron Tobey
Rami Hammour: A text of random meaning!
Matthew Solomon
These work are inspired by the most reliable source of randomness universally available on the computer, random.org, which samples natural phenomena and digitally records and processes it to achieve “true” randomness, many students are inclined to operate physically, and experiment with material media to generate random values. Students find themselves facing the same quandary raised by Bishop Derry. Something like a splatter of paint may be unpredictable at first, but as the mechanism for splattering paint becomes more controlled–and less contingent, it becomes clear that randomness can be rarely achieved by physical means–at least on the scale of paint. But it can certainly be done. Lavarand is one example in which the behavior of Lava Lites helps to generate random numbers. Another related example entails creating a manually-operated random machine with geometry. In a course I once taught, Matthew Solomon created a random number generator with a triangle as a seed. A line bounces within the triangle based on a set of rules. Numbers are generated based on where the line intersects the edge of the triangle. Aaron Tobey wrote a script to execute a similar though slightly more complex series of geometric operations and logical rules to build a random sequence.
The work suggests that computing may serve as a medium for art rather than a tool to make art. Because randomness so inhuman, to wield might mean to undermine our humanity, but it also might function as a foil in our efforts to better understand the nature of our own creative instincts.
function setup() {
createCanvas(480, 480);
}
function draw() {
//create background color
background(13, 0, 76);
fill(255, 245, 104);
rect(0,0, width, height/4);
fill(255, 245, 104);
rect(0, 4 * height / 5, width, height/5);
//set up speed of time
var H = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
var M = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
var S = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
//declare variables for the centers of ellipses
var cxH = width / 5;
var cyH = height / 2;
var cxM = width / 2;
var cyM = height / 2;
var cxS = 4 * width / 5;
var cyS = height / 2;
//create three ellipses that represent hour, minute, and second
fill(255, 255, 255, 90);
stroke(255);
strokeWeight(5);
ellipse(cxH, cyH, 100, 100);
ellipse(cxM, cyM, 100, 100);
ellipse(cxS, cyS, 100, 100);
//print text for colon
fill(255);
textSize(40);
strokeWeight(5);
text(':', 160, height / 2 + 10);
text(':', 305, height / 2 + 10);
//print ellipses for hour, minute, and second based on the speed of time and angle using radians
fill(255);
strokeWeight(5);
stroke(255, 245, 104);
line(cxH - cos(H) * 50, cyH - sin(H) * 50, cxH + cos(H) * 50, cyH + sin(H) * 50);
/*
//trial and error
fill(200);
line(cxH, cyH, cxH+cos(H/2)*25, cyH+sin(H/2)*25);
var startX = cxH+cos(H/2)*25
var startY = cyH+sin(H/2)*25
line(startX-cos(H)*40, startY-sin(H)*40, startX+cos(H)*40, startY+sin(H)*40)
*/
stroke(255, 245, 104);
fill(255, 245, 104);
ellipse(cxH + cos(H) * 50, cyH + sin(H) * 50, 10, 10);
strokeWeight(5);
fill(255);
line(cxM - cos(M) * 50, cyM - sin(M) * 50, cxM + cos(M) * 50, cyM + sin(M) * 50);
stroke(255, 245, 104);
fill(255, 245, 104);
ellipse(cxM + cos(M) * 50, cyM + sin(M) * 50, 10, 10);
strokeWeight(5);
fill(255);
line(cxS - cos(S) * 50, cyS - sin(S) * 50, cxS + cos(S) * 50, cyS + sin(S) * 50);
stroke(255, 245, 104);
fill(255, 245, 104);
ellipse(cxS + cos(S) * 50, cyS + sin(S) * 50, 10, 10);
//print time in text form
fill(255);
noStroke();
textFont('didot');
textSize(15);
translate(-40,30);
text("Hour: " + nfc(H, 0), cxH + 10, 300);
text("Minute: " + nfc(minute(), 0), cxM + 5, 300);
text("Second: " + nfc(second(), 0), cxS, 300);
}
As usual, I learned a lot from coding this project. For me, figuring out the specific angles to set it to the speed of the time was the most challenging part. My first attempt was to make the sticks indicating the time the letters, H, M, and S. However, figuring out the angle of each letter based on the center point of the ellipses were challenging since the letters were not symmetrical. I ended up creating this golden clock to visually represent the hour, minute, and second just like how many digital clocks are these days.
This is my abstract clock. It was challenging to get the fingers to tap and I ended up using a modulus to determine if the number values were even or odd. Pretty proud of myself to be honest. The index finger taps every other second, the middle finger every other minute, and lastly the thumb every other hour.
The creative agency Chaotic Atmospheres has a series of randomly generated polygonal insects. They were created in Cinema 4D using random values restricted by size parameters to generate the polygonal insect species.
It’s really interesting to me that they can take these randomly generated values and translate them into points. Afterwards, Chaotic Atmosphere will throw them into Photoshop to finish the render, taking the project to an entirely new level.
/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 06: Abstract Clock */
var tx = []; // flower x position array
var ty = []; // flower y position array
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
var sec = second();
var min = minute();
var hr = hour();
// randomize position of flowers
for (i = 0; i < 60; i ++) {
tx[i] = random(85, 270);
ty[i] = random(65, 260);
}
}
function draw() {
background(160, 190, 105);
noStroke();
var sec = second();
var min = minute();
var hr = hour();
// pond
fill(160, 155, 160);
ellipse(180, 170, 305, 305);
// color of pond water changes according to minute time bracket
if (min >= 0 & min <= 20) {
fill(65, 150, 150);
ellipse(180, 170, 270, 270);
} else if (min > 20 & min <= 40) {
fill(65, 130, 180);
ellipse(180, 170, 270, 270);
} else if (min > 40 & min <= 60) {
fill(65, 170, 130);
ellipse(180, 170, 270, 270);
}
// pebbles
fill(145, 140, 145);
ellipse(285, 285, 50, 60);
fill(105, 100, 105);
ellipse(310, 245, 35, 30);
fill(200);
ellipse(270, 285, 35, 30);
fill(150);
ellipse(245, 300, 35, 35);
fill(220);
ellipse(290, 255, 20, 20);
// tiny flowers: corresponds to seconds
for (i = 0; i < sec; i ++) {
fill(235, 105, 45);
ellipse(tx[i], ty[i], 5, 5);
}
// lilypads
fill(100, 140, 55);
ellipse(95, 183, 55, 40);
ellipse(155, 253, 55, 50);
ellipse(205, 100, 70, 60);
fill(125, 160, 60);
ellipse(95, 180, 55, 40);
ellipse(155, 250, 55, 50);
ellipse(205, 95, 70, 60);
fill(65, 150, 150);
// changing little lilypad wedge color according to pond water color
if (min >= 0 & min <= 20) {
fill(65, 150, 150);
triangle(125, 170, 95, 180, 125, 180);
triangle(175, 230, 145, 260, 205, 230);
triangle(215, 90, 240, 70, 245, 90);
} else if (min > 20 & min <= 40) {
fill(65, 130, 180);
triangle(125, 170, 95, 180, 125, 180);
triangle(175, 230, 145, 260, 205, 230);
triangle(215, 90, 240, 70, 245, 90);
} else if (min > 40 & min <= 60) {
fill(65, 170, 130);
triangle(125, 170, 95, 180, 125, 180);
triangle(175, 230, 145, 260, 205, 230);
triangle(215, 90, 240, 70, 245, 90);
}
// firefly: moves according to hour
push();
noStroke();
translate(width / 2.3, height / 2.5);
rotate(360 / 60 * hr);
fill(242);
ellipse(-20, -40, 55, 20);
ellipse(20, -40, 55, 20);
fill(255);
ellipse(-20, -45, 55, 20);
ellipse(20, -45, 55, 20);
stroke(240, 215, 70);
strokeCap(ROUND);
strokeWeight(20);
line(0, 0, 0, -65);
fill(0);
noStroke();
ellipse(-10, -60, 7, 7);
ellipse(10, -60, 7, 7);
pop();
}
I really enjoy being in nature, so for my project wanted to imitate a scene I saw during a hike this summer. On my abstract clock, the dragonfly’s position represents the hour, the color of the pond water changes based on a particular range of minutes, and the number of orange ‘flowers’ represent seconds. This project was a little challenging, but rewarding to complete. I am very happy with how it turned out.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
