![[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)
Although artificial intelligence is not based entirely on randomness, from my understanding there is still an aspect of randomness that will aid the algorithm in its learning process. This song, “Blue Jeans and Bloody Tears,” is a song that has been generated after analyzing hundreds of Eurovision songs. I know that the randomness of this algorithm is not the main focus, but I believe that it is what led to the creation of this specific song. Most evolutionary algorithms randomly generate their first generation and if this is the case for Sweaty Machines’ AI, then I think that the song was formed in this direction due to the output of the AI. There must have been thousands of other ways this song could have been generated, but it just so happened to form in this manner. I find that complete randomness, while at times interesting, is much better when incorporated into the creation of less abstract works. Using randomness to generate something that anybody can parse and enjoy is truly impressive. For that reason, I appreciate this AI generated Eurovision song.
Category: SectionD
LO6: Randomness
<50 RANDOM> by Linyi Dai
In her work, Linyi Dai uses randomness to generate the value of each register to generate the rungs of the sphere. Her work is not based on “truly” random numbers but rather on “pseudo-random” numbers. The work uses a complex repeated algorithm to emulate the effect of randomness. I really enjoy her work as her work provides a good balance between the result of randomness and the creator’s agency; although she uses randomness to generate aspects of the work–the rungs of the sphere–she is in full control of the general outcome–the spherical shape of her work. I also enjoy the simplicity of her work. The use of dull colors is very successful in making this piece of work relaxing and satisfying to look at.
Link: http://lostritto.com/risd2015spring-seminar/?p=275
Title: <50 Random>
Creator: Linyi Dai
Year: 2015
Project 6: Abstract Clock
abstract clock cb
function setup() {
createCanvas(480, 480);
angleMode(DEGREES);
}
function draw() {
background(241, 225, 174);
//background elements art
stroke(0);
noFill();
ellipse(300, 360, 90); //minute ellipse outline
triangle(350, 30, 430, 90, 410, 105); //top r corner triangle
fill(41, 72, 108, 220); //blue quad
quad(170, 100, 190, 270, 290, 320, 60, 450);
fill(41, 72, 108, 180); //blue circle
ellipse(300, 160, 40);
fill(120, 79, 58, 220); //brown quad
quad(50, 160, 130, 370, 340, 465, 180, 350);
fill(226, 170, 56, 150); //yellow circles
ellipse(110, 300, 130);
ellipse(180, 30, 30);
push();
noStroke();
fill(192, 50, 47, 220); //red triangle and ellipse
triangle(80, 35, 135, 90, 20, 130);
ellipse(230, 450, 25);
fill(120, 79, 58, 200); //brown triangle
triangle(270, 240, 430, 380, 240, 350);
fill(0); //black triangle
triangle(380, 350, 440, 400, 370, 390);
pop();
//hours red arc
push();
translate(300, 200);
rotate(-135);
hr();
pop();
//wavy lines
push();
noFill();
strokeWeight(2);
strokeCap(SQUARE);
translate(370, 200);
rotate(30);
bezier(40, -40, -40, -40, 40, 40, -40, 45);
translate(10, 10);
bezier(35, -35, -40, -40, 35, 35, -20, 35);
pop();
//minutes yellow arc
push();
translate(300, 360);
rotate(-90);
scale(.5);
mins();
pop();
//seconds black line
push();
translate(240, 240);
rotate(-135);
sec();
pop();
}
//hours, minutes, seconds functions
function hr() {
var h = hour();
noFill();
strokeCap(SQUARE);
strokeWeight(10);
stroke(192, 50, 47);
var hourHand = map(h % 24, 0, 24, 0, 360);
arc(0, 0, 200, 200, 0, hourHand);
}
function mins() {
push();
var m = minute();
noFill();
strokeCap(SQUARE);
strokeWeight(80);
stroke(226, 170, 56, 200);
var minHand = map(m, 0, 60, 0, 360);
arc(0, 0, 100, 100, 0, minHand);
pop();
push();
fill(0);
ellipse(0, 0, 50);
pop();
}
function sec() {
var s = second();
strokeCap(SQUARE);
strokeWeight(10);
stroke(0);
var secHand = map(s, 0, 60, 0, 360);
rotate(secHand);
line(0, 0, 150, 150);
}For my project, I was inspired by Bauhaus art and design and decided to make an abstract clock based on abstract artwork. When I started the project, I knew I wanted to use a combination of basic graphic elements to represent time instead of making a representational scene. After looking through some Bauhaus work, I found Kandinsky’s “Arch and Point” (1923). I think that the composition and interaction of shapes is really pleasing in this painting.
I did some quick sketches to think about what elements could represent elements of time. I simplified the composition to capture the most prominent elements of the piece and used the red arc to represent hours, the yellow arc to represent minutes, and the black line to represent seconds for a 24-hour clock.
Project 06: Abstract Clock
For this project I wanted to play with circles and colors.
sketch
//Jessie Chen
//D
//jessiech@andrew.cmu.edu
//Project 06
//Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
//background(255, 234, 204);
background(255)
var hr = hour();
var min = minute();
var sec = second();
translate(240, 240);
rotate(radians(-90));
noStroke();
//blue minute circle
let minAngle = map(min, 0, 60, 0, 360);
fill(0, 200, 255, 190);
var xmin = 65 * cos(radians(minAngle));
var ymin = 65 * sin(radians(minAngle));
ellipse(xmin, ymin, 180, 180);
//tick inside circle
push();
strokeWeight(5);
stroke(255);
line(xmin * 2.35, ymin * 2.35, xmin * 2.23, ymin * 2.23);
pop();
//yellow seconds circle
let secAngle = map(sec, 0, 60, 0, 360);
fill(255, 213, 0, 220);
var xsec = 50 * cos(radians(secAngle));
var ysec = 50 * sin(radians(secAngle));
ellipse(xsec, ysec, 150, 150);
//tick inside circle
push();
strokeWeight(5);
stroke(255);
line(xsec * 2.45, ysec * 2.45, xsec * 2.3, ysec * 2.3);
pop();
//pink hour circle
let hrAngle = map(hr % 12, 0, 12, 0, 360);
var xhr = 85 * cos(radians(hrAngle));
var yhr = 85 * sin(radians(hrAngle));
fill(255, 0, 119, 190);
ellipse(xhr, yhr, 220, 220);
//tick inside circle
push();
strokeWeight(5);
stroke(255);
line(xhr * 2.17, yhr * 2.17, xhr * 2.26, yhr * 2.26);
pop();
//centerdot
fill(255);
ellipse(0, 0, 10, 10);
//ticks
tick(255, 153, 201); //pink
push();
rotate(radians(30));
tick(255, 234, 125) //yellow
pop();
push();
rotate(radians(60));
tick(182, 237, 252); //blue
}
function tick(r, g, b) {
radius = 225;
for (angle = 0; angle < 360; angle = angle + 90) {
var x = radius * cos(radians(angle));
var y = radius * sin(radians(angle));
fill(r, g, b);
ellipse(x, y, 25, 25);
}
}
LO 6 – Randomness
Kenneth Martin was an English artist who mainly created non-representational/abstract art using geometric shapes. Martin drew inspiration from the work of Kasimir Malevich and Alexander Calder, interested in exploring spatial relationships between simple structural elements.
“Chance and Order” (1971) is one of my favorite pieces by Martin, and I think that his process of creating this artwork is quite fascinating. Randomness played a significant role in producing the final work, yet his approach was very organized and systematic, hence the name “Chance and Order” which describes his process and method. I found the following explanation regarding his process for the “Chance and Order” series of work: “The points of intersection on a grid of squares are numbered and the numbers are written on small cards and picked at random…A line is made between each successive pair of numbers as they are picked out” (Understanding Uncertainty).
I admire the simplicity of Martin’s work and find that while his pieces only utilize basic graphic/geometric elements, they are still very visually intriguing.
More about Martin’s process
Project 06 – clock
Hi friends!! For those that don’t know me very well, I spend a lot of time talking about astrology. Instead of making a clock that tells the time per say, I made a clock that tells the current astrological sign in the ascendant, which changes every two hours. I know it’s not exactly the same goal as the project but look at my symbols for each sign! I spent so long making them!!
sketchDownload
//To quickly explain, I'm making a clock for astrological rising signs in the Libra season (right now)
//Rising signs change every 2 hours
var x;
var y;
var h;
function setup() {
createCanvas(100, 650);
background(255);
text("p5.js vers 0.9.0 test.", 10, 15);
}
//symbols for eahc of the signs
function aries(x, y) {
strokeWeight(3);
beginShape();
curveVertex(x, y);
curveVertex(x, y);
curveVertex(x + 10, y - 16);
curveVertex(x + 25, y + 32);
curveVertex(x + 40, y - 16);
curveVertex(x + 50, y);
curveVertex(x + 50, y);
endShape();
}
function taurus(x, y) {
strokeWeight(3);
beginShape();
curveVertex(x, y);
curveVertex(x, y);
curveVertex(x + 25, y + 16);
curveVertex(x + 50, y);
curveVertex(x + 50, y);
endShape();
noFill();
circle(x + 25, y + 32, 32);
}
function gemini(x, y) {
strokeWeight(3);
line(x, y, x + 50, y);
line(x + 15, y, x + 15, y + 40);
line(x + 35, y, x + 35, y + 40);
line(x, y + 40, x + 50, y + 40);
}
function cancer(x, y) {
strokeWeight(3);
beginShape();
curveVertex(x, y);
curveVertex(x, y);
curveVertex(x + 25, y - 5);
curveVertex(x + 50, y);
curveVertex(x + 50, y);
endShape();
beginShape();
curveVertex(x, y + 35);
curveVertex(x, y + 35);
curveVertex(x + 25, y + 40);
curveVertex(x + 50, y + 35);
curveVertex(x + 50, y + 35);
endShape();
circle(x + 10, y + 7, 20);
circle(x + 40, y + 28, 20);
}
function leo(x, y) {
strokeWeight(3);
beginShape();
curveVertex(x, y);
curveVertex(x, y);
curveVertex(x - 10, y - 20);
curveVertex(x + 10, y - 24);
curveVertex(x + 20, y - 20);
curveVertex(x + 10, y + 20);
curveVertex(x + 20, y + 18);
curveVertex(x + 20, y + 18);
endShape();
circle(x - 10, y, 20);
}
function virgo(x, y){
strokeWeight(3);
line(x, y, x, y + 40);
beginShape();
curveVertex(x, y + 5);
curveVertex(x, y + 5);
curveVertex(x + 10, y);
curveVertex(x + 10, y + 40);
curveVertex(x + 10, y + 40);
endShape();
beginShape();
curveVertex(x + 10, y + 5);
curveVertex(x + 10, y + 5);
curveVertex(x + 20, y);
curveVertex(x + 20, y + 40);
curveVertex(x + 25, y + 45);
curveVertex(x + 25, y + 45);
endShape();
beginShape();
curveVertex(x + 20, y + 15);
curveVertex(x + 20, y + 15);
curveVertex(x + 35, y + 10);
curveVertex(x + 15, y + 45);
curveVertex(x + 15, y + 45);
endShape();
}
function libra(x, y) {
strokeWeight(3);
line(x, y, x + 50, y);
beginShape();
curveVertex(x, y - 10);
curveVertex(x, y - 10);
curveVertex(x + 15, y - 10);
curveVertex(x + 10, y - 30);
curveVertex(x + 25, y - 40);
curveVertex(x + 40, y - 30);
curveVertex(x + 35, y - 10);
curveVertex(x + 50, y - 10);
curveVertex(x + 50, y - 10);
endShape();
}
function scorpio(x, y) {
strokeWeight(3);
line(x, y, x, y + 40);
beginShape();
curveVertex(x, y + 5);
curveVertex(x, y + 5);
curveVertex(x + 10, y);
curveVertex(x + 10, y + 40);
curveVertex(x + 10, y + 40);
endShape();
beginShape();
curveVertex(x + 10, y + 5);
curveVertex(x + 10, y + 5);
curveVertex(x + 20, y);
curveVertex(x + 20, y + 40);
curveVertex(x + 25, y + 45);
curveVertex(x + 30, y + 40);
curveVertex(x + 30, y + 40);
endShape();
triangle(x + 28, y + 38, x + 32, y + 42, x + 31, y + 36);
}
function sag(x, y) {
strokeWeight(3);
line(x, y, x + 30, y - 40);
line(x + 5, y - 30, x + 30, y - 10);
line(x + 15, y - 40, x + 30, y - 40);
line(x + 30, y - 40, x + 40, y - 25);
}
function cap(x, y) {
strokeWeight(3);
beginShape();
curveVertex(x, y);
curveVertex(x, y);
curveVertex(x + 5, y + 20);
curveVertex(x + 10, y);
curveVertex(x + 15, y - 5);
curveVertex(x + 20, y);
curveVertex(x + 20, y + 35);
curveVertex(x + 15, y + 40);
curveVertex(x + 15, y + 40);
endShape();
circle(x + 30, y + 30, 20);
}
function aqua(x, y) {
strokeWeight(3);
line(x, y, x + 10, y - 5);
line(x + 10, y - 5, x + 15, y);
line(x + 15, y, x + 25, y - 5);
line(x + 25, y - 5, x + 30, y);
line(x + 30, y, x + 40, y - 5);
line(x + 40, y - 5, x + 45, y);
line(x, y + 20, x + 10, y + 15);
line(x + 10, y + 15, x + 15, y + 20);
line(x + 15, y + 20, x + 25, y + 15);
line(x + 25, y + 15, x + 30, y + 20);
line(x + 30, y + 20, x + 40, y + 15);
line(x + 40, y + 15, x + 45, y + 20);
}
function pisces(x, y) {
strokeWeight(3);
line(x, y, x + 50, y);
beginShape();
curveVertex(x, y - 20);
curveVertex(x, y - 20);
curveVertex(x + 15, y);
curveVertex(x, y + 20);
curveVertex(x, y + 20);
endShape();
beginShape();
curveVertex(x + 50, y - 20);
curveVertex(x + 50, y - 20);
curveVertex(x + 35, y);
curveVertex(x + 50, y + 20);
curveVertex(x + 50, y + 20);
endShape();
}
function draw() {
//aries(25, 18);
//taurus(25, 50);
//gemini(25, 105);
//cancer(25, 160);
//leo(50, 235);
//virgo(33, 260);
//libra(25, 350);
//scorpio(35, 360);
//sag(33, 460);
//cap(35, 470);
//aqua(27, 530);
//pisces(25, 580);
//when we are in the range of this ascendant, the color of the symbol and the background reflects the element of that sign
h = hour();
if (h >= 0 & h < 2) {
background(255, 54, 54);
stroke(175, 0, 0); //fire is red
leo(50, 235);
} else if (h >= 2 & h < 4) {
background(54, 255, 54);
stroke(0, 175, 0); //earth is green
virgo(33, 260);
} else if (h >= 4 & h < 6) {
background(150, 255, 255);
stroke(0, 222, 222); //air is crystal blue
libra(25, 350);
} else if (h >= 6 & h < 8) {
background(107, 107, 255);
stroke(0, 0, 212); //water is royal blue
scorpio(35, 360);
} else if (h >= 8 & h < 10) {
background(255, 54, 54);
stroke(175, 0, 0);
sag(33, 460);
} else if (h >= 10 & h < 12) {
background(54, 255, 54);
stroke(0, 175, 0);
cap(35, 470);
} else if (h >= 12 & h < 14) {
background(150, 255, 255);
stroke(0, 222, 222);
aqua(27, 530);
} else if (h >= 14 & h < 16) {
background(107, 107, 255);
stroke(0, 0, 212);
pisces(25, 580);
} else if (h >= 16 & h < 18) {
background(255, 54, 54);
stroke(175, 0, 0);
aries(25, 18);
} else if (h >= 18 & h < 20) {
background(54, 255, 54);
stroke(0, 175, 0);
taurus(25, 50);
} else if (h >= 20 & h < 22) {
background(150, 255, 255);
stroke(0, 222, 222);
gemini(25, 105);
} else {
background(107, 107, 255);
stroke(0, 0, 212);
cancer(25, 160);
}
}
LO Randomness
The randomness artist I will be talking about is Merce Cunningham. Merce Cunningham was a 20th century choreographer who devised his pieces through chance alone. Some of his techniques included prescibing numbers on a die to certain dance moves and created sequences by rolling the die an amount of times. He also often would teach his dances without any music, to allow that to be a random variable separate from the performers’ abilities to do the dance. The dancers would only hear the music for the first time on the day of the performance. Merce Cunningham was wild, I loved how his work centered making dance accessible for all. I see his techniques of chance and randomness as avenues for anyone to choreograph, which I admire greatly. As you can see in the piece that I am linking, “Beach Birds for Camera,” from 1993, the way he devised his pieces allowed for asynchronous and repeated movement from the performers, contributing to his unusual but distinctive style.
Project-06-Abstract-Clock
sketch
//Jasmin Kim
//Section D
var x =[];
var y = [];
var dy = [];
function setup(){
createCanvas(480,480);
for(var i=0; i<100; i ++){
x[i] = random(0,width);
y[i] = random(0,height);
dy[i] = random(1,4);
frameRate(10);
}
}
function draw(){
background(43,40,41);
var hr = hour();
var min = minute();
var sec = second();
push();
fill(0);
stroke(255);
text(hr + ':' + min + ':' + sec,width/2-20,20); //written clock
rectMode(CORNER); //snow on the floor (seconds)
noStroke();
fill(255);
rect(0,480,width,-(sec));
fill(244,234,77); //moon on the sky (minutes)
circle(96,81,109);
fill(43,40,41);
circle(145+min,81,112);
if(hr>=19){
fill(142,98,50);
rect(404,480, 16, -hr*15); //tree trunk growing (hours)
push();
translate(390,340); //tree branch 1
rotate(PI /4);
rect(0,0,45,18,20);
pop();
push();
translate(404,340); //tree branch 2
rotate(-PI /4);
rect(0,0,45,18,20);
pop();
push();
translate(390,246); //tree branch 3
rotate(PI /4);
rect(0,0,45,18,20);
pop();
push(); //tree branch 4
translate(404,210);
rotate(-PI /4);
rect(0,0,45,18,20);
pop();
} else{
fill(142,98,50);
rect(404,480, 16, -hr*15); //tree trunk growing (hours)
push();
translate(390,340); //tree branch 1
rotate(PI /4);
rect(0,0,45,18,20);
pop();
push();
translate(404,340); //tree branch 2
rotate(-PI /4);
rect(0,0,45,18,20);
pop();
push();
translate(390,246); //tree branch 3
rotate(PI /4);
rect(0,0,45,18,20);
pop();
}
pop();
snow(); //snow fall
for(var i=0; i<height; i ++){
snowfall(x[i], y[i], dy[i]);
y[i] += dy[i];
if (y[i]> height){
y[i] =0;
} else if(y[i]<0){
y[i]=height;
}
}
push();
noFill(); //outline of the canvas
strokeWeight(2);
stroke(176,197,226);
rect(0,0,width,height);
pop();
}
function snow(){
var b1;
var b2;
b1=color(183,195,206);
b2=color(205,218,239)
push();
noStroke();
fill(b1); //3rd snowman body
circle(245,374,145);
fill(b2);
circle(242,368,149);
fill(b1); //2nd snowman body
circle(245,279,109);
fill(b2);
circle(242, 273,116);
fill(b1); //1st snowman body
circle(243,196,79);
fill(b2);
circle(242,192,82);
fill(112,119,127); //snowman eyes
circle(222,185,11);
circle(260,185,11);
fill(222,168,108); //snowman nose
triangle(215,200,242,194,242,204);
fill(182,137,92);
triangle(215,200,242,202,242,204);
}
function snowfall(x,y,dy){
fill(255);
circle(x,y,8);
}
For this project, I tried to draw a season Winter, to my canvas. Depending on the second, the snow gets piled up on the floor as the moon slowly appears referring to the minutes. Trees next to the snowman grows depending on hours.
Paper Sketch 
Illustrator Sketch
LO: Randomness
Tyler Hobbs is an artist who acknowledges that randomness and spontaneity play a role in great works. I admire that this artist believes studying/experimenting/controlling randomness is useful for artistic purposes. In this “Continuity No. 8” art piece, I was able to see his attempt to explain his thoughts on one aspect of randomness here. His “Continuity series begins by generating semi-random quadrilaterals.” The overlapping intersections of the quadrilaterals become the negative space(black-colored area). The proximity to a randomly chosen focal point draws the brightness, transparency, sharpness, and other aspects of the positive space. The combined contents of the first layer takes a role in the generation of the next layer and created a harmonious art piece at the end.
Project-06-Abstract-Clock
function setup() {
createCanvas(480, 480, WEBGL);
angleMode(DEGREES);
}
function draw() {
background(204,207,235);
directionalLight(250, 250, 250, 0, 0, -45);
rotateX(135);
noStroke();
//midplane circles
push();
rotateX(90);
ellipse(0,30,100);
ellipse(160,-40,100);
ellipse(80,0,100);
ellipse(-160,-40,100);
ellipse(-80,0,100);
stroke(255);
strokeWeight(1);
noFill();
for(let i=0; i<2000;i+=20){
ellipse(0,30,120+i);
ellipse(160,-40,120+i);
ellipse(80,0,120+i);
ellipse(-160,-40,120+i);
ellipse(-80,0,120+i);
}
noStroke();
pop();
//millisecond cylinder
push();
translate(160,0,-40);
fill(255,20);
cylinder(40, 240);
fill(40, 106, 167);
cylinder(40, (millis()%1000)*0.24);
cylinder(36, ((millis()+75)%1000)*0.24);
cylinder(32, ((millis()+150)%1000)*0.24);
cylinder(28, ((millis()+225)%1000)*0.24);
cylinder(24, ((millis()+300)%1000)*0.24);
pop();
//second cylinder
push();
translate(80,0);
fill(255,20);
cylinder(40, 240);
fill(40, 159, 167);
cylinder(40, (second()%60)*4);
cylinder(36, ((second()+4.5)%60)*4);
cylinder(32, ((second()+9)%60)*4);
cylinder(28, ((second()+13.5)%60)*4);
pop();
//minute cylinder
push();
translate(0,0,30);
fill(255,20);
cylinder(40, 240);
fill(121,94,199);
cylinder(40, (minute()%60)*4);
cylinder(36, ((minute()+4.5)%60)*4);
cylinder(32, ((minute()+9)%60)*4);
pop();
//hour cylinder
push();
translate(-80,0);
fill(255,20);
cylinder(40, 240);
fill(94,199,173);
cylinder(40, (hour()%24)*10);
cylinder(36, ((hour()+1.8)%24)*10);
pop();
//day cylinder
push();
translate(-160,0,-40);
fill(255,20);
cylinder(40, 240);
fill(190,94,199);
cylinder(40, (day()/31)*240);
pop();
}I used abstract filling 3D cylinders to represent the passing of time at different scales. From left to right the scales are- Days/Month, Hours/Day, Minutes/Hour, Seconds/Minute, Milliseconds/Second.
I drew out the overall structure and my initial spacing plan for the 3D geometry.