![[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
Professor Tom Cortina • Fall 2020 • Introduction to Computing for Creative Practice
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
An artist I follow, Geoffrey Bradway, creates computational art that is randomly generated through AI. Most of his work is a series of layered repetitive lines that create dynamic and fluid images, but other works include generated works that are based on other artists.
His process is writing software that utilizes ML to generate the patterns that are then drawn using his plotters.
// Huijun Shen session D
// huijuns@andrew.cmu.edu
var x ;
var y ;
var mx ;
var my ;
var hx ;
var hy ;
var bigR = 200 ;
var mbigR = 100;
var hbigR = 50 ;
var size = 10 ;
var theta = 0;
var theta2 = 30;
var theta3 = 60;
var traceX = [];
var traceY = [];
function setup() {
createCanvas(480,480);
background(180);
frameRate(1) ;
}
function draw() {
background(180);
push();
translate(240,240);
fill(0);
circle(0,0,3);
fill(150,50,30); // for the hour circle
hx = hbigR * cos(radians(theta3));
hy = hbigR * sin(radians(theta3));
circle ( hx,hy,30);
theta3 += 360/60/60;
fill(240,100,80); // for the minutes circle
mx = mbigR * cos(radians(theta2));
my = mbigR * sin(radians(theta2));
circle(mx,my,20);
theta2 += 360/60/60;
print("m"+ theta2);
noStroke();
fill(240,144,105); //for the second circle
x = bigR * cos(radians(theta));
y = bigR * sin(radians(theta));
circle(x,y,size);
theta += 360/60;
if(bigR <= 200){ // the radius is shortening when time passes
bigR = bigR - 200/59;
}
if(bigR<=0){
bigR = 200;
}
//print(bigR);
traceX.push(x); // the doc after the second circle
traceY.push(y);
for(var i =0; i < traceX.length; i++ ){
fill(120,100,30);
circle(traceX[i],traceY[i],3);
}
if (traceX.length > 20){ // the length of the docs
traceX.shift();
traceY.shift();
}
pop();
} 
For this week’s topic, I would like to talk about Julius Horsthuis. He is a fractal artist with a background in special visual effect.
http://www.julius-horsthuis.com/still-gallery
I would like to talk about his short film – Fractal Time.
I am a concept artist and his work inspired me a lot in the direction of combining technical skill with design ideas. He uses abstract geometric shapes to describe some vague and abstract ideas as time and space. I think I can study his work a bit to find a creative way to use basic shapes as my inspiration to do some sci-fi designs.
I think he uses shape, size, depth, color as randomness to generate the final image. I also think he uses perlin noises frequently in his work.
I can see his sense of visual special effect being expressed a lot in his final film. I think he want to use some undefined shapes and even narrative rhythm to express his understanding of time and space.
I would say he is a really innovative artist in terms of film production.
“Mantel Rojo” by Manolo Gamboa Naon
Manolo Gamboa Naon, also known as “Manoloide,” is a digital artist based in Argentina whose work centers around generative algorithms that experiment with visual output. In his piece “Mantel Rojo,” or “Red Tablecloth,” he uses creative code to produce a swirling, mesmerizing composition filled with vivid colors and dynamic shapes. I am drawn to this piece because like many of his other works, there is no clear focal point; rather, viewers engage with the piece as a whole. Oftentimes, the longer one spends examining the work, the more little details and interesting coincidences seem to appear. In his piece specifically, the shapes and colors are generated pseudo-randomly, as the same hues reoccur and no other shapes are present besides circles and organic swirls.
function setup() {
createCanvas(480, 480);
background(46, 27, 61);
}
function draw() {
var sec = second();
var min = minute();
var hr = hour();
background(122, 49, 0);
noStroke();
fill(255, 236, 202, 30);
ellipse(240, 128+sec, 730, 505);
ellipse(240, 200+(2*min), 540, 330);
ellipse(240, 30+(13*hr), 368, 230);
// cast lighting
fill(0, 0, 0, 60);
ellipse(240, 425, 420, 75);
// plate shadow
fill(146, 138, 183);
ellipse(240, 415, 400, 75);
fill(177, 175, 232);
ellipse(240, 410, 320, 45);
// plate
fill(255, 242, 233);
rect(210, 100+(13*hr), 60, 312-(13*hr));
ellipse(240, 412, 60, 15);
stroke(255, 205, 171);
strokeWeight(0.5);
ellipse(240, 100+(13*hr), 60, 15);
// middle candle (takes the whole day to melt)
push();
fill(255, 210, 110);
circle(240, 70+(13*hr), 35);
triangle(225, 61+(13*hr), 255, 61+(13*hr), 240, 30+(13*hr));
fill(255, 237, 202);
circle(240, 73+(13*hr), 26);
pop();
// middle candle flame
var min = minute();
noStroke();
rect(160, 292+(2*min), 30, 120-(2*min));
rect(290, 292+(2*min), 30, 120-(2*min));
ellipse(175, 412, 30, 8);
ellipse(305, 412, 30, 8);
stroke(255, 205, 171);
strokeWeight(0.5);
ellipse(175, 292+(2*min), 30, 8);
ellipse(305, 292+(2*min), 30, 8);
// candles on either side of the middle candle (take an hour to melt)
push();
fill(255, 210, 110);
circle(175, 270+(2*min), 22);
circle(305, 270+(2*min), 22);
triangle(175, 245+(2*min), 166, 264+(2*min), 184, 264+(2*min));
triangle(305, 245+(2*min), 296, 264+(2*min), 314, 264+(2*min));
fill(255, 237, 202);
circle(175, 272+(2*min), 16);
circle(305, 272+(2*min), 16);
pop();
// flames for hour candles
noStroke();
rect(120, 352+sec, 20, 60-sec);
rect(340, 352+sec, 20, 60-sec);
ellipse(130, 412, 20, 5);
ellipse(350, 412, 20, 5);
stroke(255, 205, 171);
strokeWeight(0.5);
ellipse(130, 352+sec, 20, 5);
ellipse(350, 352+sec, 20, 5);
// outermost candles (take 1 min to melt)
push();
fill(255, 210, 110);
circle(130, 339+sec, 13);
circle(350, 339+sec, 13);
triangle(130, 325+sec, 124, 336+sec, 136, 336+sec);
triangle(350, 325+sec, 356, 336+sec, 344, 336+sec);
fill(255, 237, 202);
circle(130, 340+sec, 9);
circle(350, 340+sec, 9);
pop();
// flames for minute candles
}
For my abstract clock, I used a set of candles melting to represent the time. The biggest candle in the middle takes the entire day to “melt,” the ones on either side of it both take one hour to melt, and the smallest candles on the ends each take one minute to melt. The flames and cast lighting move accordingly, and the candles reset with the time.
I began with a preliminary sketch:
For my abstract clock, I chose to create an illustration of chickens in honor of a bunch of chickens I saw sitting in a pine tree the other day. I had a lot of trouble with this project because I’m still not very good at using arrays and loops yet, but I think the end result is pretty cute.
//Maggie Ma
//Section D
var x=0; //x position of walking chicken
var y=140; //y position of walking chicken
var eaty=40; //y position of eating chicken
var h; //hours
var m; //minutes
var s; //seconds
function setup() {
createCanvas(480, 480);
noStroke();
frameRate(1);
}
function draw() {
h=hour();
m=minute();
s=second();
//background changes color every hour and gets darker at night
if(h<12) {
background(80,20*h,50);
} else {
background(80,255-20*(h-12),50);
}
//corn that don't move
fill(255,221,21);
ellipse(115,376,8);
ellipse(280,421,8);
ellipse(422,359,8);
ellipse(138,362,8);
ellipse(73,301,8);
ellipse(108,433,8);
//chicken standing walks across screen every hour
push();
translate(map(m,0,60,-80,width+50), y);
WalkingChicken();
pop();
//pieces of corn pop up every second
fill(255,221,21);
ellipse(random(3,477),random(250,477),8);
ellipse(random(3,477),random(250,477),8);
ellipse(random(3,477),random(250,477),8);
ellipse(random(3,477),random(250,477),8);
ellipse(random(3,477),random(250,477),8);
//chicken eating walks across screen every minute
push();
translate(map(-s, 0,20,200,width-70), eaty);
EatingChicken();
pop();
}
function EatingChicken(x,y) {
push();
translate(x,y);
//beak
fill(254,183,20);
arc(248,354,35.434,36.324,radians(150),radians(310),CHORD);
arc(245,350,20.866,27.618,radians(-90),radians(100),CHORD);
//feet
stroke(254,183,20);
strokeWeight(4);
line(362,334,352,361);
line(379,327,366,361);
line(331,361,381,361);
//crown
noStroke();
fill(198,56,68);
arc(228,296,59,59.358,radians(-4),radians(150),CHORD);
arc(241,295,30.434,33,radians(220),radians(400), CHORD);
arc(252,290,30.434,33,radians(-90),radians(90),CHORD);
//back tail wing
fill(50);
arc(359,167,101.194,111.382,radians(90),radians(270),CHORD);
arc(368,311,43.28,42.284,radians(-40),radians(160),CHORD);
//body
fill(245);
arc(297,247,213,199,radians(320),radians(130),CHORD);
circle(250,335,40);
//front wing
fill(50);
arc(320,253,110.751,111.427,radians(320),radians(130),CHORD);
//front tail wing
fill(245);
arc(391,176,98.952,95.477, radians(135),radians(-45),CHORD);
arc(353,320,43.299,45.877,radians(-20),radians(160),CHORD);
triangle(264,349,264,334,288,341);
//gobbler thing
fill(198,56,68);
ellipse(273,353,15.903,15.903);
triangle(252,354,271,361,271,345);
//eye
fill(0);
circle(244,347,4.771);
pop();
}
function WalkingChicken(x,y) {
push();
translate(x,y);
//crown
fill(198,56,68);
arc(34,-105,46,43,radians(-4),radians(150),CHORD);
arc(29,-93,40,36,radians(100),radians(-80), CHORD);
arc(19,-95,40,37,radians(45),radians(225),CHORD);
//beak
fill(254,183,20);
arc(44,-61,30.1,26.455,radians(180),radians(360),CHORD);
arc(39,-64,30.1,16,radians(0),radians(180),CHORD);
//feet
stroke(254,183,20);
strokeWeight(4);
line(0,90,0,134);
line(-12,134,16,134);
line(15,78,44,78);
line(44,78,45,100);
line(45,100,32,109);
line(32,109,25,103);
//back tail
noStroke();
fill(231,231,233);
arc(-65,-19,105,102.244,radians(225),radians(405),CHORD);
//body
fill(209,210,212);
arc(0,0,156,163,radians(0),radians(180),CHORD); //234,229
arc(2,6,151,150, radians(-90),radians(90),CHORD);
rect(2,-88,45,30,10);
arc(0,76,44,40,radians(-20),radians(190),CHORD);
//tail
arc(-79,6,95.1,91.244,radians(180),radians(360),CHORD);
//front wing
fill(231,231,233);
arc(-3,12,102,102.244,radians(0), radians(180),CHORD);
//gobbler
fill(198,56,68);
ellipse(44,-44,16,16);
triangle(36,-43,43,-64,52,-43);
//eye
fill(0);
ellipse(39,-69,4.771,4.771);
pop();
}
To start, I created some sketches on paper, then created my chickens in Illustrator.
/*
* Eric Zhao
* ezhao2@andrew.cmu.edu
*
* Abstract clock that represents time indirectly
* through proximity to base units (for ex. if a minute
* is close to elapsing). The background color indicates
* the approximate hour and time of day.
*
*/
var x;
var y ;
var thetaSec;
var thetaMin;
var secondRad = 75;
var minuteRad = 175;
var speedMult; //rate of acceleration
var baseSpeed = 2; //speed of circles at [time unit] = 0;
function setup() {
thetaSec = -PI;
thetaMin = -PI;
thetaHour = -PI;
createCanvas(600, 600);
background(220);
frameRate(60);
}
function draw() {
//draws the revolving circles and background
push();
translate(300, 300);
BG();
secondHand();
minuteHand();
pop();
}
function secondHand(){
/*the "hand" is the inner circle that exponentially
revolves faster as the seconds count grows
closer to a minute exactly, then resets to the
base speed when the seconds count goes back to zero. */
speedMult = pow(second(), 1.75) / 150;
x = secondRad * cos(radians(thetaSec));
y = secondRad * sin(radians(thetaSec));
circle(x, y, 50);
thetaSec += baseSpeed + speedMult;
print(speedMult + baseSpeed);
}
function minuteHand(){
//see comment in secondHand(), works the same but by min/hour.
speedMult = pow(minute(), 1.75) / 200;
x = minuteRad * cos(radians(thetaMin));
y = minuteRad * sin(radians(thetaMin));
circle(x, y, 50);
thetaMin += baseSpeed + speedMult;
print(speedMult + baseSpeed);
}
function BG(){
//draws a background with a fill color proportional to time.
let fillR = map(hour(), 0, 11, 30, 255);
let fillG = map(hour(), 0, 11, 45, 235);
let fillB = map(hour(), 0, 11, 70, 150);
if(hour() >= 12){
fillR = map(24-hour(), 1, 12, 30, 255);
fillG = map(24-hour(), 1, 12, 45, 235);
fillB = map(24-hour(), 1, 12, 70, 150);
}
background(fillR, fillG, fillB);
/*Fill conditions:
*Goes from dark blue to pale yellow if 0 < hour < 12
*Goes from pale yellow to dark blue if 12 >= hour > 24
*/
if(fillR > 190) {
stroke(39, 58, 115);
fill(39, 58, 115, 65);
} else {
stroke(255);
fill(255, 65);
}
//changes stroke to dark/light based on brightness of background
circle(0, 0, secondRad*2);
circle(0, 0, minuteRad*2);
}
I was inspired by mob spawners in Minecraft when making this clock. The mob models in spawners spin faster and faster until a mob spawns from it, then it slows down and starts speeding up again until the next mob spawns.
This clock shows how close the next minute is to passing and how soon the next hour will pass, rather than displaying the exact time. The circles rotating the center speed up exponentially as the time nears the next unit. The outer circle represents minutes/hour and the inner one represents seconds/minute. The background also changes color across a gradient every hour (see code comments).
Last year, I was browsing Reddit when I stumbled on a post that took me to a little website: https://nopaint.art/. It’s the work of Jeffrey Alan Scudder, a digital artist who teaches Emerging Digital Practices as a professor in Oregon currently. No Paint is a pseudo-random artwork in the sense that the algorithm contributes randomness, but the user can determine how to utilize it.
No Paint is an online painting game / program. However, the user is presented with only two buttons to interact with the canvas: “No” and “Paint”. Within the program, a vast array of brushes, stickers, and effects are programmed in. Each round of painting, the program presents the user with a brush, sticker, or effect: for example, a two-tone brush that snakes in a random direction continuously, or an effect that continuously changes the saturation the entire canvas. When the user clicks “Paint”, the element or effect is applied in its current state. For example, if a user was presented with a randomly snaking brush, they could wait a long time for the brush to cover most of the canvas before pressing “Paint”, or press it shortly after for a short stroke. Pressing “No” cycles onto the next element or effect.
This project stuck with me because of its unique take on drawing programs. Since the brushes are randomly chosen and most never cohere well with your existing artwork, you have very little control over what you can draw on the canvas and have to be creative with using randomly selected elements to form a cohesive artwork.
I recently saw a tv show that talked about fish. It reminded me of my goldfish I used to take care of for 7 years, but died just a few months before I graduated high school. In memories of my goldfish, I wanted to create an abstract clock of a fish tank in space on an unknown planet. Each tank represents hours, minutes, and seconds as the water fills up the tank.
//Stefanie Suk
//ssuk@andrew.cmu.edu
//15-104 Section D
var fishx = 15; //width of fish
var fishy = 10; //height of fish
function setup() {
createCanvas(600, 400);
}
function draw() {
var h = hour();
var m = minute();
var s = second();
var starx = random(0, 600); //random x position of stars
var stary = random(0, 250); //randolm y position of stars
background(50); //background color
//moon and stars
fill("yellow");
ellipse(70, 70, 100, 100); //moon at top left
ellipse(starx, stary, 5, 5); //stars randomly placed
//light brown base of planet
fill(184, 165, 162)
rect(0, 250, width, 200);
//darker brown oval holes on planet, left to right
fill(158, 142, 140);
strokeWeight(6);
stroke(0);
ellipse(30, 300, 100, 40);
ellipse(100, 380, 100, 40);
ellipse(300, 290, 100, 40);
ellipse(400, 350, 100, 40);
ellipse(600, 280, 100, 40);
//mapping time to fit in the fish tank
mS = map(s, 0, 70, 0, 110);
mM = map(m, 0, 70, 0, 110);
mH = map(h, 0, 30, 0, 110);
//hour tank on left, dark blue
strokeWeight(5);
stroke(255);
fill(31, 56, 240);
rect(120, 150, 100, 100);
//minute tank in middle, dark blue
stroke(255);
fill(31, 56, 240);
rect(260, 150, 100, 100);
//second tank on right, dark blue
stroke(255);
fill(31, 56, 240);
rect(400, 150, 100, 100);
//three fish in each tank right to left
strokeWeight(1);
stroke(0);
fill(255, 169, 157);
ellipse(420, 230, fishx, fishy);
triangle(427, 230, 435, 225, 435, 235);
ellipse(320, 200, fishx, fishy);
triangle(313, 200, 305, 195, 305, 205);
ellipse(190, 215, fishx, fishy);
triangle(197, 215, 205, 210, 205, 220);
//time rect in tank changing upwards, light blue
noStroke();
fill(157, 185, 255);
rect(122.5, 152, 95, 95 - mH); //hour
fill(157, 185, 255);
rect(262.5, 152, 95, 95 - mM); //minute
fill(157, 185, 255);
rect(402.5, 152, 95, 95 - mS); //second
}
Daniel Kim (2015)
Daniel Kim’s Randomness in Time is a featured project from RISD’s spring Coding Architecture course taught by Carl Lostritto. The artwork has an array of random numbers on the left side along with a spider web of randomly interconnected lines on the right side. Kim explains that the project examines “data from the running time of a particular algorithm.” This running time data is then stored, placed in a list, then evaluated. As the algorithm continues to run, the values deviate further and further away from the initial starting point, thereby creating more randomness and unpredictability. I found this piece particularly interesting because the idea of using an algorithm to create randomness seems paradoxical, and begs the question if the values generated can truly be considered “random.” It also makes me wonder if it is possible to create truly “random” computational art; it seems as if there always needs to be a set of rules, restrictions, algorithms, etc. to create the starting foundation for the piece.
