![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/09/stop-banner.png)
For this LO, I scoured the internet for randomness projects and I ultimately came upon this random script generator. Although the creation date and author is unknown, it is quite a robust software. After generating multiple scripts using a variation of around 30 inputs to generate the script, it was pretty clear that the results had enough variation to deem it to be sufficiently random. However, just how random is this script exactly? Assuming all 30 inputs each change a small part of the script then there could be theoretically be up to 30^30*the available words in the dictionary versions of scripts generated. This isn’t the case though, as after reading a couple scripts, I noticed that many themes and sentences were in fact being repurposed and reused, thus this program utilizes “pseudo” randomness.
Author: sean!
PROJECT-06 (clock)
move your mouse around to stabilize the clock!
sketch
// SEAN CHEN
// 15-104 A
function setup() {
createCanvas(600, 600);
background(255);
}
function randomizer() { // giving the design "chaos"
var diff = dist(width/2, height/2, mouseX, mouseY);
if (diff > 25) {
// more random shifting based on dist from center to mouse
var chaos = random(-1, 1) * (diff-25)/25;
} else {
var chaos = random(-1, 1) * 0.175; // mini shifts for "texture"
}
return chaos;
}
function border() { // border ring including seconds hand
textAlign(CENTER, BOTTOM);
for (var i = 0; i < 60; i++) {
push();
textSize(9);
if (second() == i) { // if second matches rotation, display sec location
rotate(radians(6*i+randomizer()));
textStyle(ITALIC);
textStyle(BOLD);
textAlign(LEFT, CENTER);
rotate(radians(-90));
text(' second ' + second(), 250+randomizer(), 0);
} else { // say border otherwise
rotate(radians(6*i+randomizer()));
text('border', 0, -250+randomizer());
}
pop();
}
}
function face() { // clock face
push();
textAlign(CENTER, BOTTOM);
var diff = dist(width/2, height/2, mouseX, mouseY);
fill(color(constrain(200-diff, 0, 200)));
for (var thick = 0; thick < 25; thick++){
for (var i = 0; i < 60; i++) {
push();
rotate(radians(6*i));
textSize(9);
text('face', 0, -10*(thick+randomizer()));
pop();
}
}
pop();
}
function minHand() { // minute hand
push();
rotate(radians(6*minute()+randomizer()));
textSize(9);
textStyle(ITALIC);
textStyle(BOLD);
textAlign(LEFT, CENTER);
for (var num = 0; num < 7; num++) { // length of hand
push();
rotate(radians(-90+randomizer()));
if (num < 6) {
text('minute', 30*num+20, 0);
} else {
text('minute '+ minute(), 30*num+20, 0);
}
pop();
}
pop();
}
function hrHand() { // hour hand
var hr;
if (hour() > 12) { // convert 24 hr to 12 hr
hr = hour()-12;
} else {
hr = hour();
}
push();
rotate(radians(30*hr+randomizer()));
textSize(9);
textStyle(ITALIC);
textStyle(BOLD);
textAlign(LEFT, CENTER);
for (var num = 0; num < 7; num++) { // length of hand
push();
rotate(radians(-90+randomizer()));
if (num < 6) {
text('hour', 20*num+20, 0);
} else {
text('hour '+hr, 20*num+20, 0);
}
pop();
}
pop();
}
function logo() { // how to operate clock
push();
strokeWeight(2);
var diff = dist(width/2, height/2, mouseX, mouseY);
ellipse(mouseX, mouseY, 5*diff/10, 2.5*diff/10);
textStyle(ITALIC);
textAlign(CENTER, CENTER);
textSize(8*diff/100);
text('clock', mouseX, mouseY);
textSize(3*diff/100);
textAlign(CENTER, CENTER);
text('\n(move to stablize)', mouseX, mouseY+7);
pop();
}
function draw() {
background(255);
push();
translate(width/2+randomizer(), height/2+randomizer());
border();
face();
minHand();
hrHand();
pop();
logo();
}
PROJECT-05 (wallpaper)
sketch
// SEAN CHEN
// 15-104 A
function setup() {
smooth();
createCanvas(600, 1000);
background(255,194,130);
}
function poka(scale) { // background pokadots
for (var i = 0; i < scale/2; i++){ // array columns
noFill();
var w = width / scale;
var h = height / scale;
push();
translate(i*(2*w), 0);
for (var j = 0; j < scale+1; j++){ // drawing a column
push();
var r = random(0.4, 0.6); // giving the ellipse rand sizes
translate (0, j*h); // vert column of random ellipse
ellipse (w/2, h/2, r*w, r*h);
translate (w, h/2-h) // shifted vert column of rand ellipse
ellipse (w/2, h/2, r*w, r*h);
pop();
}
pop();
}
}
function leaf() { // drawing a little leaf (mint color)
stroke(88,216,169);
strokeWeight(5);
line(-10, 0, 10, 0);
line(-5, -5*sqrt(3)/2, 5, 5*sqrt(3)/2);
line(-5, 5*sqrt(3)/2, 5, -5*sqrt(3)/2);
}
// drawing a small branch from a certain x,y
// (same as stem func)
function miniStem(x, y) {
noStroke();
fill(94,59,24)
for (var i = 0; i < 25; i++) {
rectMode(CENTER);
square(x, y+i, 5);
if (i == 20) { // right before the end of the branch
push();
translate(x, y+i); // move leaf to that coordinate
leaf(); // draw leaf
pop();
}
x += random(-5, 5);
}
}
function stem(maxH) {
noStroke();
fill(94,59,24)
var x = 50 // center pt for each tile
for (var i = 0; i < maxH; i++) {
if (i < maxH-25) { // before getting to last 25 "pixels"
rectMode(CENTER); // square using center
square(x, i, 5); // drawing sqaure at x, i which is shifting down
x += random(-3, 3); // aggregate the branches left and right
} else {
square(x, i, 5); // drawing squre
var diff = x-50; // difference from center
x += -1*(diff/15); // shifting x back to center for seamless
}
var y = i; // for ministem
if (i%50 == 0) { // every 50 "pixels" downward add a small branch
miniStem(x, y);
}
}
}
function draw() {
poka(50); // add pokadot bg
for (var i = -2; i < 9; i++) { // tiling of the branches
push();
translate (100*i, 0);
for (var j = -2; j < 9; j++) {
push();
translate (0, 200*j);
stem(200);
pop();
}
pop();
}
noLoop();
}
LO-05 (3d computer graphics)
For todays looking outwards I want to focus on a specific 3D graphics artist, Randy Cano. He is a self taught 3D computer graphics artist and animator that uses 3D software to create unique and “trippy” scenes. His work varys from explosions, to paint spilling on a specific object, to fury humanoid figures dancing to strange music. Randy morphs our reality by using his personal style of morphing humanoid figures with unconventional materials and textures. In one of his works, a soft rubbery head is pushed through a dense field of equally rubbery heads, and that is the entire work: heads pushing through heads. Although all of his works are short clips of rendered videos on instagram, which is where I consume most of his content, it provides an interesting escape from reality in a 3-5 seconds video.
PROJECT-04 (string art)
sketch
// SEAN CHEN
// 15-104 A
function setup() {
smooth();
createCanvas(400, 300);
}
function draw() {
var colX = map(mouseX, 0, width, 0, 250);
var colY = map(mouseY, 0, height, 0, 250);
// map mouse pos to color range val
var bgCol = color(colX, colY, 125); // background color
var cirCol = color(colY, colY, 125); // variable obj color
background(bgCol);
push(); // center diamond backround blob
noStroke();
fill(cirCol);
beginShape();
curveVertex(mouseX/2, mouseY);
curveVertex(mouseX, mouseY/2);
curveVertex(mouseX+(width-mouseX)/2, mouseY);
curveVertex(mouseX, mouseY+(height-mouseY)/2);
curveVertex(mouseX/2, mouseY);
curveVertex(mouseX, mouseY/2);
curveVertex(mouseX+(width-mouseX)/2, mouseY);
endShape();
pop();
for (var i = 0; i < 25; i ++) { // border + diamond line art
// border
let x1 = map (i, 0, 25, mouseX, width); // mid to right vals (x)
let y1 = map (i, 0, 25, 0, mouseY); // top to mid vals (y)
let x2 = map (i, 0, 25, 0, mouseX); // left to mid vals (x)
let y2 = map (i, 0, 25, mouseY, height); // mid to bottom vals (y)
// center diamond
let x1s = map (i, 0, 25, mouseX/2, mouseX);
// half from leftside to mouse
let y1s = map (i, 0, 25, mouseY, mouseY+(height-mouseY)/2);
// half from bottomside to mouse
let x2s = map (i, 0, 25, 0, mouseX/2);
// left to half of mouse
let y2s = map (i, 0, 25, mouseY/2, mouseY);
// half from topside to mouse
let x3s = map (i, 0, 25, mouseX, mouseX+(width-mouseX)/2);
// half from rightside to mouse
let y3s = map (i, 0, 25, mouseY+(height-mouseY)/2, mouseY);
// half from left to mouse
// border
line (x1, 0, width, y1); // top right
line (width, y2, width-x2, height); // bottom right
line (0, y2, x2, height); // bottom left
line (width-x1, 0, 0, y1); // top left
// diamond
line (x1s, mouseY, mouseX, y1s); // top left
line (mouseX, y2s, mouseX-x2s, mouseY); // top right
line (mouseX, y2s, x3s, mouseY); // bottom right
line (mouseX, y3s, x3s, mouseY); // bottom left
line (mouseX, mouseY, mouseX+(width-mouseX)/2, mouseY)
// xtra line from cent to right
}
}
LO-04 (sound art)
The Weather Thingy created by Adrien Kaeser is an instrument modifier that is controlled through variables generated by the weather. It is a simple idea that can be manipulated in a highly flexible way. I find this to be extremely compelling due to the fact that it can actually be seen as a way to translate a feeling or ambiance into musical composition. The ability to transform external feelings into parameters that affect the outcome of one’s creative works, which offers a kind of push and pull dichotomy between creator and the created. Kaeser uses a series of arduino modules and weather sensors and codes the whole project with arduino, C++, and MIDI. Although the code isn’t demonstrated, I assume each weather input (wind, direction, rain, sun) controls/limits the sound that the original instrument can create to result in the total output. What’s pretty clever is that he also added a range modifier which allows for this project to be utilized in calm (amplify) or violent (limit) situations.
https://www.ecal.ch/en/3843/studies/bachelor/media-interaction-design/presentation/weather-thingy
PROJECT-03 (dynamic drawing)
SEAN SKETCH 03
// SEAN CHEN
// 15-104 A
var size = 125; // overall size of graphic
var flip = 1; // val to control rotation direction
var angle = 1;
var angle2 = 1;
var angle3 = 1; // individual speed
var diff = 0 // shift from center circle
function setup() {
smooth();
createCanvas(400, 400);
background(255,219,88);
}
function spin(speed, vari) { // white orbiting circles
push();
noStroke();
rotate(radians(angle));
circle(0, size+diff, size*5/6);
circle(size+diff, 0, size*5/6);
circle(-size-diff, 0, size*5/6);
circle(0, -size-diff, size*5/6); // each big stationary orbit circle
circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // mouse further from center smaller size
circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200); // mouse further from center distance larger
circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // each small moving circles
angle += speed*flip;
pop();
}
function spin2(speed, vari) { // same as 'spin' but cyan
push();
noStroke();
fill(0,255,255);
rotate(radians(angle2));
circle(0, size+diff, size*5/6);
circle(size+diff, 0, size*5/6);
circle(-size-diff, 0, size*5/6);
circle(0, -size-diff, size*5/6);
circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
angle2 += speed*flip;
pop();
}
function spin3(speed, vari) { // same as 'spin' but magenta
push();
noStroke();
fill(255,0,255);
rotate(radians(angle3));
circle(0, size+diff, size*5/6);
circle(size+diff, 0, size*5/6);
circle(-size-diff, 0, size*5/6);
circle(0, -size-diff, size*5/6);
circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
angle3 += speed*flip;
pop();
}
function draw() {
var vari = dist(width/2, height/2, mouseX, mouseY) // distance from center to mouse
background(0);
translate(width/2, height/2); // new origin at center
noStroke();
circle(0, 0, size); // center circle
spin3(1*vari/150, vari); // mouse closer to center slower, vice versa
spin2(1.5*vari/150, vari); // for cyan
spin(2*vari/150, vari); // for white
if (mouseIsPressed) {
flip = -1; // reverse rotation if pressed
} else {
flip = 1; // clockwise otherwise
}
}
LO-03 (computer fabrication)
Computer fabrication in the current digital age is becoming increasingly commonplace as fabrication tools are becoming exponentially more complex than ever. For this LO, I will be discussing the “BLOOM” works by John Edmark. I think this project is an excellent marriage of the human body and art. The algorithms I assume are used to procedurally generate the form of these “blooming” sculptures. But the real magic happens through the combination of rotation speed and manipulating it to match the frame rates of the human eyes. As we can only see at a certain “refresh rate”, the rotation speed of the sculpture can affect the way the sculpture moves or morphs due to the speed in which we see each cell/module, creating unique frame animation styled sculptures. I had the privilege of seeing these works in real life and I can attest that they are quite mesmerizing.
PROJECT-02 (variable faces)
SEAN-02
// SEAN CHEN
// 15-104 A
function setup() {
smooth();
createCanvas(600, 600);
}
function mouseClicked() {
noStroke();
background(232, 232, 228);
var cntr = width / 2;
var facex = random(width/4, width/2);
var facey = random(width/4, width/2);
// FACE BASE
fill(255, 219, 88);
var x = 10
var ushift = random(-x, x);
var rshift = random(-x, x);
var dshift = random(-x, x);
var lshift = random(-x, x);
beginShape();
curveVertex(cntr+ushift, cntr-facey/2+rshift);
curveVertex(cntr+facex/2+ushift, cntr-facey/2+rshift);
curveVertex(cntr+facex/2+rshift, cntr+dshift);
curveVertex(cntr+facex/2+rshift, cntr+facey/2+dshift);
curveVertex(cntr+dshift, cntr+facey/2+lshift);
curveVertex(cntr-facex+dshift, cntr+facey/2+lshift);
curveVertex(cntr-facex/2+lshift, cntr+ushift);
curveVertex(cntr-facex/2+lshift, cntr-facey+ushift);
endShape(CLOSE);
// eye whites
fill(255);
var eyew = random(height/20, height/10);
stroke(255);
strokeWeight(eyew);
beginShape(LINES);
vertex(cntr-facex/4, cntr);
vertex(cntr-facex/4, cntr-facey/4);
vertex(cntr+facex/4, cntr);
vertex(cntr+facex/4, cntr-facey/4);
endShape();
// pupils
stroke(0);
strokeWeight(eyew/4*3);
var pupil = eyew/8*5;
var lshift = random(-5, 5);
var rshift = random(-5, 5);
beginShape(POINTS);
vertex(cntr-facex/4+lshift, cntr-5+2*rshift);
vertex(cntr-facex/4+lshift, cntr-5-pupil+2*rshift);
vertex(cntr+facex/4+rshift, cntr-5+2*lshift);
vertex(cntr+facex/4+rshift, cntr-5-pupil+2*lshift);
endShape();
// eyelids
beginShape(POINTS);
stroke(255, 180, 88);
strokeWeight(eyew);
vertex(cntr-facex/4, cntr-facey/4);
vertex(cntr+facex/4, cntr-facey/4);
endShape();
beginShape();
noStroke();
fill(255, 180, 88);
vertex(cntr-facex/4-eyew/2, cntr-facey/4);
vertex(cntr-facex/4+eyew/2, cntr-facey/4);
vertex(cntr-facex/4+eyew/2, cntr-facey/4+eyew/2);
vertex(cntr-facex/4-eyew/2, cntr-facey/4+eyew/2);
endShape();
beginShape();
vertex(cntr+facex/4-eyew/2, cntr-facey/4);
vertex(cntr+facex/4+eyew/2, cntr-facey/4);
vertex(cntr+facex/4+eyew/2, cntr-facey/4+eyew/2);
vertex(cntr+facex/4-eyew/2, cntr-facey/4+eyew/2);
endShape();
// eyebrows
var broww = eyew/2;
var browshift = random(-10, 10);
stroke(0);
strokeWeight(20);
beginShape();
curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
curveVertex(cntr-facex/4, cntr-facey/4-eyew/2);
curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
endShape();
beginShape();
curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
curveVertex(cntr+facex/4, cntr-facey/4-eyew/2);
curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
endShape();
//lips
var mouthw = facex/4*3
var mouthshift = random(-100, 100);
stroke(255, 38, 38);
strokeWeight(random(30, 50));
beginShape();
curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
curveVertex(cntr-mouthw/2, cntr+facey/4);
curveVertex(cntr+mouthw/2, cntr+facey/4);
curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
endShape();
stroke(0);
strokeWeight(5);
noFill();
beginShape();
curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
curveVertex(cntr-mouthw/2, cntr+facey/4);
curveVertex(cntr+mouthw/2, cntr+facey/4);
curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
endShape();
}LO-02 (generative art)
The inspirational work for me this week was definitely Weird Faces by Moka. Previous to being exposed to this work, I always assumed computer generated art to have a certain aesthetic such as hard clean lines, or hyper data driven simulations. However, mokas delicacy and deconstructing his own style and recreating it through a series of algorithms seems to blend that line between computation and art for me. I suppose the algorithms have to somehow mimic the way his hand flows and decides on the shape of the faces as well as the style for the rest of the face. The styles I’m assuming he codes a couple simple algorithms and lets a random generator mix and match various “designs” together to create new ones. In this case, Moka’s artistic sensibilities directly show on the board through the algorithms directly dissecting and recreating his style in a new way.
