![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
Don Ritter’s piece, Intersection creates an experience that truly tests and separates the sense of hearing from the others. In a pitch dark room, the participant is to walk into a room with nothing but sounds. Sounds of cars passing by, as if you were in the middle of a busy intersection. This experience that lacks sight, and essentially all three other senses as well really gets the participant to listen. I assume the purpose is to create an experience that evokes anxiety and fear, scared that a car is approaching but not knowing from where. Like many other projects of his, like These Essences, aims to unsettle viewers with extremely vivid sounds that are in some cases assisted with very unusual and textural images. The combination of two and sometimes just the sound creates sounds that are beyond just sound, but enough to very effectively penetrate the visitors’ mind through sound. The way these sounds are created are likely using visuals that accompany the sounds to engineer the sounds so that just the sounds alone can paint or evoke the feelings of the visuals much more powerfully than the image can. I think it is a combination of AI that understands sounds and codes that amplifies certain patterns of sound that we are sensitive to.
Author: Paul
project 4
sketch
//Keng Pu (Paul) Li
//section A
//9/24/22
var numLines = 50;
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
function setup() {
createCanvas(300,400);
background(220,50,100);
//triangle
dx1 = 5;
dy1 = 5;
dx2 = 10;
dy2 = 10;
//most left
dx3 = 5;
dy3 = 1;
dx4 = 5;
dy4 = 5;
//blue
dx5 = 7;
dy5 = 1;
dx6 = 5;
dy6 = 5;
//dark blue line
dx7 = 5;
dy7 = 1;
dx8 = 15;
dy8 = 15;
//very dark
dx9 = 10;
dy9 = 7;
dx10 = 20;
dy10 = 5;
}
function draw() {
background(220,50,100);
//most left
x3 = 0;
y3 = width/2+100;
x4 = width/2;
y4 = width/2+100;
for(var i = 0; i<40; i++){
strokeWeight(2);
stroke(200,90,180);
line(x3,y3,x4,y4);
x3 += dx3;
y3 += dy3;
x4 -= dx4;
y4 += dy4;
}
//triangle
x1 = width/2;
y1 = width/2+100;
x2 = width/2;
y2 = width/2+100;
for(var i = 0; i<100; i++){
strokeWeight(3);
stroke(0,20,20,70);
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 += dy2;
}
//dark blue line
x7 = width-170;
y7 = 50;
x8 = width/2+70;
y8 = width;
for(var i = 0; i<100; i++){
strokeWeight(1);
stroke(50,10,190);
line(x7,y7,x8,y8);
x7 += dx7;
y7 += dy7;
x8 -= dx8;
y8 += dy8;
}
//blue line
x5 = 0;
y5 = width/2;
x6 = width/2+50;
y6 = width;
for(var i = 0; i<90; i++){
strokeWeight(0.5);
stroke(110,110,255);
line(x5,y5,x6,y6);
x5 += dx5;
y5 += dy5;
x6 -= dx6;
y6 += dy6;
}
//very dark lines
x9 = width/2+50;
y9 = -100;
x10 = width;
y10 = height;
for(var i = 0; i<100; i++){
strokeWeight(0.5);
stroke(50,10,90);
line(x9,y9,x10,y10);
x9 += dx9;
y9 += dy9;
x10 -= dx10;
y10 += dy10;
}
}Project 3
sketch
//Paul Li
//Section A
var backR = 10;
var backG = 10;
var backB = 10;
var w = 30;
var h = 20;
var triR = 30;
var triG = 40;
var x = 1;
function setup() {
createCanvas(600,450);
rectMode(CENTER);
}
function draw() {
//background & color
//background color changes based on mouse
backR = max(min(mouseY/2,255),0);
backG = max(min(mouseX/2.2,255),0);
backB = max(min(mouseX,255),0);
background(backR,backG,backB,mouseY/60)
//shape & shape movement
// stroke weight and width and height of the ellipse is determined by mouse position
//
w = min(mouseY,width - 30);
h = min(mouseX,height - 30);
strokeWeight(mouseX/100+mouseY/100);
stroke(backG,backR,backB);
fill(backG,backR,backB);
ellipse(width/2,height/2, w, h);
//triangles rotate and move according to mouse cordinates in inverse and direct relationships
push();
rotate(radians(min(mouseX,width)));
fill(backB,backR,backB);
triangle(
constrain(mouseX/(mouseY/30),0,width),mouseY,
constrain(mouseY/(mouseX/30),0,width-50),mouseY,
mouseX,mouseY
);
pop();
// chnaging color by mouse position.
push();
triR = constrain(mouseX,0,width);
triG = constrain(mouseY, 0, height);
translate(width/2,height/2);
rotate(radians(min(mouseY,height)));
fill(triR,triG,0);
triangle(
constrain(mouseY/(mouseX/10),0,width),mouseY,
constrain(mouseX/(mouseY/10),0,width-100),mouseY,
mouseX,mouseY
);
pop();
// square in the center & moving squares.
fill(0,0,0,60);
stroke(backG/2,backR,backB)
square(width/2,height/2,height/min(mouseX/100,mouseY/30));
push();
translate(50,50);
rotate(radians(x));
x+= 4;
fill(255);
rect(width/2,height/2,constrain(mouseX,0,100),constrain(mouseY,0,50));
pop();
push();
translate(width,50);
rotate(radians(x));
x+=4;
fill(255);
rect(width/2,height/2,constrain(mouseX,0,50),constrain(mouseY,0,20));
pop();
strokeWeight(2);
stroke(255-backG/2,255-backR,255-backB)
line(mouseX,mouseY,width/2,height/2);
//frameRate(400);
//scaling
// }
// }
}
blog 3
Paul Li Section A Arabesque Wall (2014/2015) This project is very similar to my selection from last week, the Subdivide Column by Michael Hansmeyer. In fact, it was a project by Benjamin Dillenburger in collaboration with Hansmeyer. I just found their work so limitless and inspiring. I think the mixture of the ornamentation that is reminiscent of historical decoration and the sci-fi aspect of the forms and curves really pushes ideas of architectural concepts and forms I’ve been taught. The algorithm behind the creation was based on actual arabesque ornament examples, which are very mathematical and geometric in nature. By dividing and repositioning surfaces, tiles are altered into microscopic to large pieces that are folded and in the end composes a very complex geometry. I also really admire the amount of details of these structures, while being grand in size as well. The artistic aspect of these projects is that there is unlimited potential and every one of them can be adjusted with generative controls that ensures the uniqueness of each piece while being able to reach a certain desirable form. https://benjamin-dillenburger.com/arabesque-wall/
Project 2
project 2
sketch
var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 250;
var counter = 1;
var hatH = faceHeight/1.5;
var bodyR = 90;
var bodyG = 100;
var bodyB = 90;
var eyeY = 3;
var eyeX = 1;
var faceR = 90;
var faceG = 100;
var faceB = 90;
var hatR = 140;
var normFaceR = 255;
var normFaceG = 220;
function setup() {
createCanvas(480,640);
}
function draw() {
strokeWeight(1);
stroke(0);
background(20,160,190);
if(counter >= 1 & counter < 2){
//body
fill(bodyR,bodyG,bodyB);
circle(width/2,height-50,500);
}
//face
fill(normFaceR, normFaceG, 177);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 - faceWidth * 0.3;
var eyeRX = width / 2 + faceWidth * 0.3;
strokeWeight(3);
fill(250,250,250);
//eye
ellipse(eyeLX, height / 2-10, eyeSize*2, eyeSize-5);
ellipse(eyeRX, height / 2-10, eyeSize*2, eyeSize-5);
fill(70,30,20);
circle(eyeLX, height / 2-10, eyeSize/2, eyeSize/3);
circle(eyeRX, height / 2-10, eyeSize/2, eyeSize/3);
//cowboy
if (counter >= 1 & counter < 2){
noStroke();
fill(hatR,75,0);
rect(width/2-60,height/2-faceHeight/2-hatH,120,hatH)
ellipse(width/2,height/2-faceHeight/2,faceWidth-50,40);
//facial hair
strokeWeight(5);
stroke(140,110,100);
noFill();
curve( width/2-faceWidth/2 + 30, height/2 -100,
width/2-faceWidth/2 + 50, height/2 -50,
width/2-faceWidth/2 + 80, height/2 -50,
width/2-faceWidth/2 + 110, height/2 -30);
curve( width/2+faceWidth/2 + 30, height/2 -100,
width/2+faceWidth/2 - 50, height/2 -50,
width/2+faceWidth/2 - 80, height/2 -50,
width/2+faceWidth/2 - 110, height/2 -30);
stroke(200,20,30);
fill(200,20,30);
//mouth
curve(width/2-faceWidth/2 + 110,height/2-70
,width/2-50,height/2+30
,width/2+50,height/2+30,
width/2+faceWidth/2 ,height/2-30);
//arms
fill(20);
stroke(10);
strokeWeight(5);
curve(width/2 - 150, height/2+100,
width/2-200,height/2+150,
width/2-100,height-20,
width/2-40, height-50);
curve(width/2 + 150, height/2+100,
width/2+200,height/2+150,
width/2+100,height-20,
width/2+40, height-50);
}
//alien
if (counter >= 2 & counter < 3){
strokeWeight(8);
stroke(50,210,150);
line(width/2,height/2-faceHeight/2, width/2, faceHeight/10+30);
fill(mouseX,mouseY,mouseX);
ellipse(width/2, faceHeight/10+30, faceWidth/5, faceHeight/3);
fill(faceR,faceG,faceB);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//eye
fill(0,50,10);
noStroke();
ellipse(eyeLX+30, height / 2-10, eyeSize*eyeX, eyeSize*eyeY);
ellipse(eyeRX-30, height / 2-10, eyeSize*eyeY, eyeSize*eyeX);
fill(0);
ellipse(eyeLX+30, height / 2-10, eyeSize*eyeX-5, eyeSize*eyeY-5);
ellipse(eyeRX-30, height / 2-10, eyeSize*eyeY-10, eyeSize*eyeX-10);
//body
stroke(0);
strokeWeight(1);
fill(0,faceG-80,faceB+50);
triangle(150,height/2+150,width-150,height/2+150,width/2,height-20);
//arms
fill(0,200,0);
stroke(0,200,0);
strokeWeight(1);
curve(width/2 - 60, height/2+100,
width/2-200,height/2+150,
width/2-30,height-80,
width/2-40, height-50);
line(width/2-30,height-80,width/2-50,height-60);
curve(width/2 + 60, height/2+100,
width/2+200,height/2+150,
width/2+30,height-80,
width/2+40, height-50);
line(width/2+30,height-80,width/2+50,height-60);
//mouth
fill(20,200,200);
strokeWeight(2);
stroke(30,100,500);
rect(width/2-faceWidth/6,height/2+faceHeight/6,faceWidth/3,faceHeight/20);
}
//crazy
if(counter < 1){
background(200,50,50);
fill(200,50,90);
ellipse(width / 2, height / 2, faceWidth+random(20,50), faceHeight+random(20,50));
fill(255);
//body
stroke(0);
strokeWeight(1);
fill(0,faceG-80,faceB+50);
//
fill(255);
//eye
ellipse(width / 2, height / 2, faceWidth, faceHeight);
ellipse(eyeLX+30, height / 2-10, random(30,50),random(40,80));
ellipse(eyeRX-30, height / 2-10, random(30,50),random(20,80));
fill(random(10,80),random(100,255),random(150,255));
ellipse(eyeLX+30, height / 2-10, random(30,50)-10,random(40,80)-10);
fill(random(150,255),random(10,80),random(150,205));
ellipse(eyeRX-30, height / 2-10, random(30,50)-10,random(20,80)-10);
fill(random(30));
ellipse(eyeLX+30, height / 2-10, 10,10);
ellipse(eyeRX-30, height / 2-10, 10,10);
//brows
line(width/2-80,height/2-random(60,100),width/2-random(20,40),height/2-20);
line(width/2-80,height/2-random(60,100),width/2-random(20,40),height/2-20);
line(width/2+80,height/2-random(60,100),width/2+random(20,40),height/2-20);
line(width/2+80,height/2-random(60,90),width/2+random(10,50),height/2-20);
//nose
fill(random(100,255),50,50);
ellipse(width/2-10,height/2+30,10,20);
ellipse(width/2+10,height/2+30,10,20);
//mouth
curve(width/2-faceWidth/2 + random(90,120),height/2+100
,width/2-50,height/2+random(60,80)
,width/2+50,height/2+random(60,70),
width/2+faceWidth/2 ,height/2+random(90,120));
//body
fill(20,20,20);
triangle(width/2,height/2+130, random(50,100),random(height-50,height),width-random(50,100),random(height-50,height));
//arms
curve(width/2 - 150, height/2-100,
width/2-random(190,210),height/2-150,
width/2-100,height-30,
width/2-40, height-50);
curve(width/2 + 150, height/2-100,
width/2+200,height/2-150,
width/2+random(90,110),height-30,
width/2+40, height-50);
}
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(300, 400);
faceHeight = random(190,270);
eyeSize = random(15, 30);
counter = random(0,3);
bodyR = random(100,110);
bodyG = random(100,160);
bodyB = random(30,150);
faceR = random(20,80);
faceG = random(100,250);
faceB = random(100,110);
eyeY = random(1,6);
eyeX = random(0.5,2);
hatR = random(100,255);
normFaceR = random(210,255);
normFaceG = random(190,220);
}Blog 02
For this blog, I decided to study the work of Michael Hansmeyer. Specifically, “Subdivided Columns – A New Order (2010)”. For me, the mixture of generative art and architectural forms have always interested me. Generative art and modeling’s ability to create unthinkable forms like the columns he created has been something I’ve explored on my own as an architecture student. I’ve experimented with creating unusual structures and forms that promote different feelings which I can connect with in his project, even if evoking different feelings with the columns was not a primary goal of his. I suppose that to create these bizarre forms, CAD softwares like GrassHopper. While it appears as if a column is put into modeling softwares and randomized, there is actually intentionality behind his results. Based on articles analyzing the project, the purpose of the exploration is to push imagination and create forms that inspires and activates further investigation into specific potentials of the forms with more intentionality, and with that, create these “subclasses” that create more variations of the column with certain constraints and desires.The artist’s artistic choices appears in the project in the forms of very complex geometries and symmetries.
https://www.michael-hansmeyer.com/subdivided-columns
project 01
sketch
function setup() {
createCanvas(450, 550);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(245,245,220);
fill(100);
noStroke();
triangle(width/2, 400, width,550, 0, 550 );
if(mouseX > 400){
//body
background(200,200, random(0,200));
fill(random(100,200),random(30,150), random(100,255));
triangle(width/2, 400, width-random(20,50),550, 0, 550-random(20,50) );
fill(225,200,255);
strokeWeight(1);
stroke(100);
ellipse(width/2 +10, 270, 350, 470);
fill(255);
strokeWeight(random(1,10));
stroke(200,190,255);
ellipse(125-random(0,10),200,40,130);
ellipse(325-random(0,20),200,170,60);
fill(random(0,10),random(20,70),random(10,20));
circle(125,200,55);
fill(random(0,10),random(20,70),random(10,20));
circle(350,200,80);
strokeWeight(2);
fill(random(0,255),random(100,200),random(100,200));
circle(125,200,random(10,40));
fill(random(100,200),random(0,200),random(100,200));
circle(350,200,random(30,60));
strokeWeight(3);
stroke(200,200,100);
fill(0);
//nose
line(width/2-random(0,7),220-random(0,5), width/2 -20,350 );
line(width/2 -20,350, 300,300-random(0,7) );
triangle(width/2 -20,350, width/2 -15, 315, width/2 -7, 350);
//mouth + teeth
stroke(60);
fill(255,30,100);
arc(width/2,400,100,100,0,PI);
fill(250);
rect(width/2-20-random(0,5),400,15,25);
square(width/2-10-random(0,5),400,20);
rect(width/2-random(0,5),400,20,30);
square(width/2+10-random(0,5),400,20);
square(width/2+20-random(0,5),400,20);
// hair
} else {
//face
fill(225,200,183);
strokeWeight(1);
stroke(100);
ellipse(width/2 +10, 270, 350, 470);
//eyes
fill(250);
strokeWeight(2);
stroke(3);
ellipse(150,210,70, mouseX+40);
ellipse(340,210,70,mouseX+40);
fill(78,53,36);
circle(150,210,30);
fill(78,53,36);
circle(340,210,30);
//nose
strokeWeight(1);
fill(225,184,153);
ellipse(width/2+10, 280, 12, 100);
ellipse(width/2+10, 324,40,25);
fill(0);
circle(width/2,326, 7);
circle(width/2 + 15,326, 7);
// mouth
strokeWeight(10);
stroke(255,10,30);
ellipse(width/2, 400, mouseX+20, 95);
//hair
strokeWeight(10);
stroke(0);
line(width/2 -110,100,mouseX-110,mouseY);
line(width/2 -90,100, mouseX-90,mouseY);
line(width/2 -70,100, mouseX-70,mouseY);
line(width/2 -50,100, mouseX-50,mouseY);
line(width/2 -30,100, mouseX-30,mouseY);
line(width/2 -10,100, mouseX-10,mouseY);
line(width/2 +10,100, mouseX+10,mouseY);
line(width/2 +30,100, mouseX+30,mouseY);
line(width/2 +50,100, mouseX+50,mouseY);
line(width/2 +70,100, mouseX+70,mouseY);
line(width/2 +90,100, mouseX+90,mouseY);
line(width/2 +110,100, mouseX+90,mouseY);
line(width/2 -100,80,mouseX-110,mouseY);
line(width/2 -80,80, mouseX-90,mouseY);
line(width/2 -60,80, mouseX-70,mouseY);
line(width/2 -40,80, mouseX-50,mouseY);
line(width/2 -20,80, mouseX-30,mouseY);
line(width/2 ,80, mouseX-10,mouseY);
line(width/2 +20,80, mouseX+10,mouseY);
line(width/2 +40,80, mouseX+30,mouseY);
line(width/2 +60,80, mouseX+50,mouseY);
line(width/2 +80,80, mouseX+70,mouseY);
line(width/2 +100,80, mouseX+90,mouseY);
line(width/2 +120,80, mouseX+90,mouseY);
line(width/2 -90,60, mouseX-90,mouseY);
line(width/2 -70,60, mouseX-70,mouseY);
line(width/2 -50,60, mouseX-50,mouseY);
line(width/2 -30,60, mouseX-30,mouseY);
line(width/2 -10,60, mouseX-10,mouseY);
line(width/2 +10,60, mouseX+10,mouseY);
line(width/2 +30,60, mouseX+30,mouseY);
line(width/2 +50,60, mouseX+50,mouseY);
line(width/2 +70,60, mouseX+70,mouseY);
line(width/2 +90,60, mouseX+90,mouseY);
}
}
Blog 1
As a highschooler in Silicon Valley, it was inevitable for my family to have tons of family friends that are very well involved in the CS scene, despite my family not having any computer or engineering backgrounds. One of our closest friends, Fengwei Lee and his startup, REALITEER, developed a series of VR/AR programs that aimed to use VR/AR to promote mental and physical well-being. These programs included games that had you mimic taichi, dance, and other types of choreography to a selected audio track, with lightsabers that were used to hit targets as they approached you. There were specific programs within for different purposes, such as relaxation, exercise, dance, and kids’ entertainment. As far as I know, his startup and him took nearly two year experimenting with different strategies and codes. Furthermore, from the finished product, the project used various commercial applications, like Unity, and original codes. I assume that the project was inspired by the creator, Fengwei’s time working in companies like Dreamwork, and his own family. This was a way to entertain and help people of all ages from toddlers to seniors to feel better. Moreover, revisiting this project made me think about the future of VR/AR – that computer science can have a much more obvious and tangible effect on the general public’s well being, in this case, encouraging people to be active mentally and physically. I also predict that as society becomes more and more digital, with the creation of platforms like the Meta Verse, developing health promoting Virtual and Augmented reality is critical.
Link to the start up and it’s projects: https://realiteer.com/about/