![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
Please refer to Mike Jin’s latest post
Author: Steven
Steven Fei & Mike Jin-Project 12-Proposal
For this project, We are going to create a scene with the theme of an interstellar pianist. The background will be a 3D view of the galaxy and the viewport will be manipulated through changing the mouse position. The foreground will be an array of piano keys that can be connected by the keyboards. Once a short tune is played, a star is given birth. There can be a maximum amount of the stars. Once the maximum is reached, the oldest star will be eliminated. The stars that are given birth to will be presented in a 3D form and different colors to differentiate from the galaxy in the background. Depending on the different tunes that the user played, different type of stars can be generated.
Steven Fei-Looking Outwards-12
The Two projects discussed in this Looking Outwards are the Zaha Hadid Volu Pavilion and Water Drawing Project.
The Volu Pavilion appears to be made from a continuous piece and features an oval roof that tilts downwards to create a shade for dining. Comprised of a series of structural bands collecting at the spine and expanding overhead, the patterning of the pavilion is optimized to be at mose singly curved.
The second project is the Drawing Water Project which collects national water consumption data with rainfall data into a series of maps. The data are parsed with python scripts and each line in the drawing corresponds to a daily rainfall measurement. The length of the line and its initial placement are dtermined by the amount of rainfall measured and where it fell. The final placement and color of each line are determined by the influence of urban water consumers. When the rainfall is pulled farther from where it fell, it changes color from blue to black. Such a mapping strategy creates an interesting artistic and informational drawing that tells information in a more direct way.
What I find the two projects interesting is that both projects demonstrate a strong sense of visual impression, no matter in 3D or 2D forms. Such strategies can be learned to apply to the final project for visual aesthetic pleasure. Meanwhile, both projects give a more interaction based opportunity to investigate either the law of physics may impact on the patterning of the structure or the data of rainfall overtime can change the overal composition of the drawing. Both projects definitely inspire me with such interactive quality and the strong flexibility and enlighten me to make a final project that can be a combination of generative art, interactive art, dynamic drawing, and computational drawings.
Steven Fei-Looking Outwards11-Female Artist
Rosa Menkman, a Dutch artist, specializes in glitch art and resolution theory. She investigates visual compression and glitches to create an artwork by combining different sensory systems. Developing glitch art as a genre, the artist proposes a programming structure that takes the use of compression artifacts into dicrete cosine transform blocks. Such an approach successfullly builds a subtle relationship between an artifact and a process.
What attracts me the most is her creative insight into illustrating compressive art. The glitches mark a transformation of audios and sounds that are hard to describe or see into a visual language that can have colors, scopes, continuity and variance. Such clear yet bold compositions give us a more insightful knowledge of how different types of art can work through visualizing those elements. What’s more, it can be interesting to study such patterns to find out the aesthetics and the universal “golden ratios” behind all those different genres and expressions.
Steven Fei-Project 11-Generative Landscape
For this project, I was intended to create a serene atmosphere by the lake. The mountains are majorly created in 3 layers with different shades to represent a sense of depth and distance. Symbolic maple trees were drawn in different saturations of orange and different sizes and branch counts to have a “realistic” impression of the diverse range of the trees. The circular stars are moving in the upper part of the canvas to strengthen the sense of moving. By setting different moving speed of those different objects, I was aiming to deepen a spatial feeling in the visual hierarchy. The maple trees were moving fastest because they are relatively in the very front of the canvas, while the mountains are constantly moving slower, and the stars are the slowest. The project gives me some chances to make different objects and functions and use different strategies to fulfill those elements through building a connection between the draw function and the other specific functions I make for the elements.
//Steven Fei
//zfei@andrew.cmu.edu
//project 11
//section-A
var stars = [];
function setup() {
createCanvas(480, 480);
frameRate(8);
//set the initial display of the stars
for(var i = 0; i<8; i++){
var sx = random(width);
var sy = random(50, height/3);
stars[i] = makeStars(sx, sy);
}
}
function draw() {
background("black");
//create the terrain in the far back of the canvas
var terrain3 = terrain(30, 2, height/5, height * 3/4, 3);
//create the terrain in the middle of the canvas
var terrain2 = terrain(80, 2, height/3, height * 3/4, 2);
//create the terrain in the front of the canvas
var terrain1 = terrain("white", 2, height/2, height * 3/4, 1);
//create the blue lake at the bottom of the canvas
noStroke();
fill(0,33,41);
rect(0, height * 4/5, width, height);
//create trees
for (var x = 0; x < width; x+=5){
var orange = random(80,150);
stroke(240, orange, 80);//define the color of the tree to draw
strokeWeight(1.2);
push();
translate(x * random(5,10), height * 4/5);
drawTree(0, random(5,15), int(random(3,6)));//calling the function to draw the tree
pop();
}
//update star by showing the stars and the moving positions of the stars
updateStar();
//only keep the stars that are still on the canvas
removeStar();
//add new stars under a certain probability
addStars();
}
//showing the star positions
function updateStar(){
for (var i = 0; i<stars.length; i++){
stars[i].move();
stars[i].display();
}
}
//only keep the stars on the canvas
function removeStar(){
var starKeep = [];
for ( var i = 0; i < stars.length; i++){
if(stars[i].x > 0){
starKeep.push(stars[i]);
}
}
stars = starKeep;
}
//add more stars by chance
function addStars(){
var starProbability = 0.01;
if(random(0,1) < starProbability){
stars.push(makeStars(width,random(50,height/3)));
}
}
//defining the moving speed of the star
function starMove(){
this.x += this.speed;
}
//displaying the star by drawing the circle
function starDisplay(){
fill("white");
noStroke();
push();
translate(this.x, this.y);
circle(0,0,this.size);
pop();
}
//main function to make the star
function makeStars(birthX, birthY){
var str = { x: birthX,
y: birthY,
speed: -1.5,
size: random(5,15),
move: starMove,
display: starDisplay};
return str;
}
//making the terrain
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
function terrain(color,strokeweight,min,max,noiseseed){
var verticesX = [];//array to append values for x coordinates
var verticesY = [];//array to append values for y coordinates
noiseSeed(noiseseed);//decide the pseudo random number seed
stroke(color);//the color to choose to draw the terrain
strokeWeight(strokeweight);//the strokeweight to choose to draw
noFill();
beginShape();
for ( var x = 0; x < width; x++){
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, min, max);
vertex(x,y);//generating the terrain points
verticesX.push(x);
verticesY.push(y);
if(verticesX.length > width){
verticesX.shift();
verticesY.shift();
}
}
for ( var j = 0; j < verticesX.length; j++){
line(verticesX[j], verticesY[j], verticesX[j],height);//add vertical coloring to the terrain
}
endShape();
}
//function to draw trees by defining depth(number of branches), len(branch length), seed(upper limit of the branch counts)
function drawTree(depth, len, seed){
if(depth < seed){
rotate(radians(-10));
drawBranch(depth,len, seed);
rotate(radians(20));
drawBranch(depth,len, seed);
}
}
function drawBranch(depth, len, seed){
line(0,0,0,-len);
push();
translate(0,-len);
drawTree(depth + 1, len, seed);
pop();
}Steven Fei – Project – 10
For this project, I applied 4 different sounds into my project 3 post. When the mouse clicks, an explosion will be initiated to represent a start of the program. There are 3 variables in my sketch – the size that directly controls the radius of the hexagons, the color that changes when the mouse moves, and the angles that manipulates the positions of the hexagons on the canvas. Therefore, the idea is to give the 3 variables different sound effects to determine whether they have reached certain bounds. For the size, a “slutty wave” sound will pop up to indicate the size of the first hexagon in the sketch reaches the upper limit. For the color changing, a ghostly impression will be made everytime when the color transitions between pink(blue) and purple. Ultimately, the angular positions of the hexagons will be suggested through a “boon” sound everytime the hexagons finishes a 1/60 cycle. All the changes can be initiated when the mouse moves and clicks.
//Steven Fei
//Assignment 10
//Section - A
//zfei@andrew.cmu.edu
function setup() {
createCanvas(600, 480);
useSound();
}
var size = 8; //hexagon size that can change according to the mouse movement
let color = 0; //hexagon color that can change according to the mouse movement
var colorDir = 2; //the degree of change for the color change
let angle = 0; //the initial rotation angle for the hexagon
var dir = 1; // the growing direction of the hexagon, either positive or negative
var speed = 2; //the growing speed of the hexagon
var clickSoundSciFi;
var ghost;
var sizeShrink;
var rotatingPeriod;
function preload(){
clickSoundSciFi = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/490266__anomaex__sci-fi-explosion-2.wav");
ghost = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/490515__staudio__ghostguardian-attack-01.wav");
rotatingPeriod = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/490316__nicknamelarry__cartoon-space-sfx.wav");
sizeShrink = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/489892__tkky__slutty-808.wav");
}
function soundSetup(){
clickSoundSciFi.setVolume(0.3);
ghost.setVolume(0.3);
sizeShrink.setVolume(0.4);
rotatingPeriod.setVolume(0.5);
}
function mousePressed(){
clickSoundSciFi.play();//an explosion sound when mouse is pressed
}
function mouseMoved(){
color = color +colorDir;
if (color<0){
colorDir = 2;
} else if (color>255){
ghost.play(); //a ghost will be created when the color of the hexagon transitions between purple and blue
colorDir = -2;
}
angle +=0.5;
if(angle % 60 == 0){
rotatingPeriod.play();// a "boon" sound will make when the hexagons finishes 1/6 of a cycle
}
size += dir * speed;
if(size<0){
dir = 1;
size = 0;
}else if (size>=60){
dir = -1;
size = 60;
sizeShrink.play();//a sound is made to imply the hexagons are reaching the maximum sizes
}
}
var diffx = 0;
var diffy = 0;
var circlex = 300;
var circley = 300;
function draw() {
background(0);
// locate the mouse position
diffx = mouseX - circlex;
diffy = mouseY - circley;
circlex = circlex + 0.1*diffx;
circley = circley + 0.1*diffy;
fill("white");
circle(circlex,circley,20);
fill(color,37,213);
var x = max(min(mouseX,300),5); // decide the starting point of the hexagon, when the mouse is far on the left the canvas, the hexagons may shrink together and when the mouse is far on the right of the canvas, the hexagons may move away from each other
translate(300,240); //move to the center of the canvas
// draw the basic shape for 1st Hexagon
beginShape();
rotate(radians(angle));
vertex(x/2,0);
vertex(x/2+size*cos(radians(60)),0-size*sin(radians(60)));
vertex(x/2+size+size*cos(radians(60)),0-size*sin(radians(60)));
vertex(x/2+size+2*size*cos(radians(60)),0);
vertex(x/2+size+size*cos(radians(60)),size*sin(radians(60)));
vertex(x/2+size*cos(radians(60)),size*sin(radians(60)));
endShape();
// draw the basic shape for 2nd Hexagon
rotate(radians(60));
beginShape();
vertex(x/2+1.3,0);
vertex(x/2+1.3+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
vertex(x/2+1.3+1.3*size+2*1.3*size*cos(radians(60)),0);
vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
vertex(x/2+1.3+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
endShape();
// draw the basic shape for 3rd Hexagon
rotate(radians(60));
beginShape();
vertex(x/2+1.5,0);
vertex(x/2+1.5+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
vertex(x/2+1.5+1.5*size+2*1.5*size*cos(radians(60)),0);
vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
vertex(x/2+1.5+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
endShape();
// draw the basic shape for 4th Hexagon
rotate(radians(60));
beginShape();
vertex(x/2+1.7,0);
vertex(x/2+1.7+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
vertex(x/2+1.7+1.7*size+2*1.7*size*cos(radians(60)),0);
vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
vertex(x/2+1.7+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
endShape();
// draw the basic shape for 5th Hexagon
rotate(radians(60));
beginShape();
vertex(x/2+1.9,0);
vertex(x/2+1.9+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
vertex(x/2+1.9+1.9*size+2*1.9*size*cos(radians(60)),0);
vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
vertex(x/2+1.9+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
endShape();
// draw the basic shape for 6th Hexagon
rotate(radians(60));
beginShape();
vertex(x/2+2.1,0);
vertex(x/2+2.1+2.1*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
vertex(x/2+2.1+2.1*size+2*2.1*size*cos(radians(60)),0);
vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),2.1*size*sin(radians(60)));
vertex(x/2+2.1+2.1*size*cos(radians(60)),2.1*size*sin(radians(60)));
endShape();
}
Steven Fei-Looking Outwards 10-Sound Art
Bridging a connection between music and digital art, computational tools have created a new genre – the sound art.
Inspired by the heritage of the Polish Radio Experimental Studio, a project called Apparatum is born. Written with javascript, the designer panGenerator takes advantage of the digital interface that emits purely analogue sound. Based on magnetic tape and optical components controlled via graphic score composed with a digital interface, the user is able to flexibly produce sounds from various levels and both graphically and musically invent a symphony of electronic music.
Meanwhile, the physical form of the equipment is designed in the modular fashion inside two steel frames. the 2 tape loopers, optical generators producing sinusoidal tones and noise generators are all presented in a more visual way for the user to have a direct understanding of how and what they are manipulating certain aspects of the sound. The most inspiring feature of the project is its human interaction program. the printout of the user graphical score with the link to the mp3 file of the recording gives the user a much clearer and easier understanding of the sound art and how they are able to control and play with the sound levels, amplitudes, frequencies, noise, and pitches. The artistic sensibility is manifested both in its acoustic flexibility and the visual appearance and the recordings of the varaiations of all the variables that the users are playing with. The project attracts and enlightens me to have more variables for user to control and to design a clear and elegant-looking appearance of the program to arouse the interests of the audience.
Steven Fei-Looking Outwards-09
It is important to appreciate the beautiful sound of nature. Meanwhile, it is intriguing to manipulate such sounds through scientific methods. Browsing through my friends’ posts, I find my friend Mike Jin’s post 04 about the Chijikinkutsu really interesting.
Chijikinkutsu represents the art of arranging a series of equipments that take advantage of magnatism to collide and drift to make sounds. Originating from the traditional sound ornamentations for Japanese gardens, this sound equipment uses floating needles in the glasses of water which can be magnetized through electricity. Driven by the magnetic force, the needles will hit the glasses and make delicate sounds. By controling the spatial arrangement of such glass tumblers and the electric current size of each coil attached to the them, people will be able to enjoy the different pitches and magnitudes of the sounds by the needles. A beautiful, yet to some extent intentionless composition of sounds are generated. Like my friend Mike mentioned, such an arrangement is not only a sound art but also a beautiful visual appreciation decorated by the plain, glass tumblers arranging from the near to far on the ground. Meanwhile, Mike mentioned it would be more interesting to carry out such sound equipment around the globe because of the variance across the magnetic field in different countries. However, I have some doubts about that because the magnetic fields are actually initiated temporarily by the small coils attached on the glass tumblers. Maybe it won’t have to have too much relationship with the real geomagnetic field. On the other hand, it would be definitely fun to utilize different materials other than the glass and needles around the globe to make such sound art, and that would be fantastic for different cultures to communicate and create diverse range of sound art compositions.
Click here to see my friend Mike Jin’s post
Click here to visit the sound art website page
Steven Fei-Project 09-Portrait
This project is my approach to create an impressionist paintings while giving the drawing some “old-looking” effect by adding the dirt points according to the lightness of each pixel in the original image. Random lines are drawn with the same pixel color to imply a sense of brush or pencil stroking. The larger rectangles are the protagonists in the drawing to fulfill the portrait by occupying relatively large pixel areas.
//Steven Fei
//Project 09
//Section - A
//zfei@andrew.cmu.edu
var underlyingImage;
function preload() {
// preload the photo
var myImageURL = "https://i.imgur.com/GI56Ww2.jpg";
underlyingImage = loadImage(myImageURL);
}
function setup() {
// setting up the canvas according to the dimensions of the photo
createCanvas(600, 450);
background("pink");
underlyingImage.loadPixels();
frameRate(400);
}
function draw() {
var px = random(width); // random points to have strokes
var py = random(height); // random points to have strokes
var count = int(px) % 2; // decide the conditionals when to apply the two drawing schedules
var colorAt = underlyingImage.get(px, py); // retrieve the pixel of the photo
var brightnessAt = brightness(colorAt); // retrieve the brightness of the point
var light = lightness(colorAt); // retrieve the lightness of the point
var cR = map(brightnessAt, 0, 255, 4, 12); // maping the corresponding radius and size of the circles and rectangles
var angle = random(0, PI); // give a random stroke angle
noStroke();
//conditionals to draw some grey scale dirt points when count is 0
if(count == 0){
push();
fill(light, px % width * 0.07);
translate(px,py);
circle(0,0,cR * 0.8);
pop();
}
//conditionals to draw the rectangular strokes to re-portray the original photo
if(count == 1){
push();
fill(colorAt, px % width * 0.5);
rectMode(RADIUS);
translate(px, py);
rotate(angle);
rect(0,0,cR,cR);
pop();
//draw a random trace to represent the brush stroke
stroke(colorAt, px % width * 0.2);
strokeWeight(2);
line(px + random(10), py + random(10), px + random(10), py + random(10));
}
}Steven Fei-Looking Outwards-08
Human and Computer Science interations have been upgraded onto a higher level. Among the projects in eyeofestival 2013, the mosting fascinating one to me is Zach Lieberman’s Eyewriter Project.
Always pursuing to surprise people, Zach aims to design projects that integrates different human sensual experiences through coding to realize and strengthen such relationships. Standing as one of the co-founders openFrameworks, the artist takes advantage of C++ library to create this Eyewriter project and it is held worldwide and recognized one of the 50 best inventions in 2010. By studying the human eyeball movements and how sensors can detect the pupil deflections, the artist created the program to fulfill the dream of letting our eyes to compose artworks.
From my perspective, such low-budget has a wide range of social-influences. Obviously it has shaped a new way of transmitting information through an effortlessway. Moreover, patients who cannot move or speak easily may be able to take advantage of this tool to communicate with their doctors. Artists are able to connect such tool for real-time modeling with robotic arms rather than manually make a model in 3D softwares.
Ultimately, the project influences me on how to present the project more effectively by allowing for more “in-touch” experiences on the program and people. By showing a low-budget program and benign outcomes, the audiences would be more attracted to it.
click here to visit the artist’s bio
click here to see the eyewriter project
