//Sarah Choi
//Section D
//sychoi@andrew.cmu.edu
//Project-04
function setup() {
createCanvas(400,300);
}
function draw() {
background(0);
for(var i = 0; i < 400; i += 2) {
stroke(255);
strokeWeight(0.2);
line(i, mouseY / 2 + 200, 400, - i);
}
for(var a = 0; a < 400; a++) {
fill(255, 0, 0);
strokeWeight(0.5);
line(a, - a + mouseX / 5, 400, - a);
}
for(var b = 0; b < 400; b += 5) {
stroke(255, 255, 0);
strokeWeight(0.5);
line(mouseX - 150, - b, 400, b);
}
for(var c = 0; c < 400; c += 5) {
stroke(255, 0, 255);
line(mouseY - 100, c, 400, - c);
}
for(var d = 0; d < 400; d += 0.5) {
stroke(255, 100, 100);
strokeWeight(0.2)
line(d, - mouseY, 400, d);
}
}
Using string art, I wanted to create abstract art playing around with primary and complimentary colors along with a black background. I wanted my piece to follow the mouse, so it would be more interactive with the audience.
In July 2018, Funkhaus Berlin featured sound art called, “Meandering River”, a vibrant landscape showing the gradual flows of nature by onformative. The audiovisual installation portrays a small snapshot in our fast-paced and changing world. The artist believed in the importance of featuring real nature through art. The movement of the rivers shows the constant in past and present life. Onformative wanted to show the unchanging nature although with all the transformations going around in life.
The “Meandering River” is a multi-channel video with a set generative soundscape. The algorithm calls attention to the abstract imagery showing movements of the fluctuations in a river. The music accompanied and adding to the piece was composed by Berliners Kling Klang Klong, interpreting river patterns and shifts in the surface. The artist wanted the audience to be more aware of time in order to reel out an emotional journey.
“Cycling Wheel” is created by Keith Lam, Seth Hon, and Alex Lai. They were inspired by Marcel Duchamp’s Bicycle Wheel, and further transformed mechanics into light and sound.
Design Concepts & Logics
In the design processes, there were three variables: music, light beam, led strips. Each was generated and controlled by electronic devices.
The designers eventually transformed the computer-generated sounds into an exciting, appealing, and rather dramatic show. They perform while generating music and light. Music and light together create a certain engaging rhyme that draws audience’s attention. Mechanics input is intricate and professional, whereas the final result is interactive. The complicated design logic is simplified into the motions of spinning and touching.
This weeks project comes from our very own CMU, specifically the experimental sound synthesis class. Two years ago, they did a project in collaboration with Phipps Botanical Gardens to create an intriguing soundscape a temporary butterfly exhibit.
I don’t know much about the specific algorithms that were used. However, I do know that they didn’t want to simply create ambient music that would stay on loop. Instead, they created soundscapes that constantly changed with the motion around them, meaning the same music would never happen twice.
The creators were still able to put lots of creativity into the music, even with the more unpredictable aspects of the project. Through the careful design of the synthesizers used, the tempo, and texture of the music they were able to orchestrate the exact feelings they wanted to evoke in the listeners.
/* Mari Kubota
49-104 Section D
mkubota@andrew.cmu.edu
Assignment 4
*/
function setup(){
createCanvas(400,300);
background (0);
//left white crossed lines
stroke(255);
var yl = height*(5/6);
var ym1 = height*(6/8);
for(var i=0; i < 15; i++){
line(0, yl, width/2, ym1);
yl *=0.97;
ym1 *= 1.02+mouseX;
};
//right white crossed lines
var yr = height*(5/6);
var ym2 = height*(6/8);
for(var i=0; i < 15; i++){
line(width, yr, width/2, ym2);
yr *=0.97;
ym2 *= 1.02;
};
//diamond
stroke(255);
//bottom vertical lines
var w1= width/4;
for (var x=w1; x<width*(3/4); x+=14){
line (x,height/2,width/2,height*(5/6));
}
//upper left lines
var w2= width/3;
var w4= width/2;
for (var y=height/3; y<height/2; y+=7){
line (width/4,height/2, w2, y);
w2+=5;
line (width/2-30,height/2, w2-5, height/3);
line (width/2-30, height/2, w4, height/3);
w4-=4;
}
//upper right lines
var w3= width*(2/3);
var w5= width/2;
for (var y=height/3; y<height/2; y+=7){
line (width*(3/4),height/2, w3, y);
w3-=5;
line (width/2+30, height/2, w3+5, height/3);
line (width/2+30, height/2, w5, height/3);
w5+=4;
}
//upper center criss cross lines
var w6= width/2;
for (var y=height/3; y<height/2; y+=7){
line (width/2-30, height/2, w6, y);
w6+=4;
}
var w7= width/2;
for (var y=height/3; y<height/2; y+=7){
line (width/2+30, height/2, w7, y);
w7-=4;
}
//top of diamond
line (width/3, height/3, width*(2/3),height/3);
}
In this project I created a diamond out of string out. The numerous lines were made from for loops and line shapes. The challenging part of this project was making the lines in the diamond match up into a cohesive shape.
I really wanted to show huge amounts of contrast in my drawing, so I made the strings and background always be opposite of each other in terms of gray value. This also leads to a cool middle point where they are the same color.
//Ian Kaneko
//Project 4: String Art
var canvasWidth = 300;
var canvasHeight = 400;
var bkgrnd = 250;
var change = -1;
function setup() {
createCanvas(canvasWidth, canvasHeight);
}
function draw() {
background(bkgrnd);
strokeWeight(1);
stroke(250 - bkgrnd);
bkgrnd = bkgrnd + change;
if(bkgrnd <= 0){
change = -change;
}
if(bkgrnd > 250){
change = -change;
}
for (i = 0; i < 50; i ++){ //diamond forms created by negative space
line(0, 100 + i * 6, 300, 100 - i * 6);
}
for (i = 0; i < 50; i ++){
line(0, 300 - i * 6, 300, 300 + i * 6);
}
for (i = 0; i < 50; i ++){
line(0, 100 - i * 6, 300, 100 + i * 6);
}
for (i = 0; i < 50; i ++){
line(0, 300 + i * 6, 300, 300 - i * 6);
}
stroke(150, 100, 150); // colored borders
for (i = 0; i < 40; i ++){ // purple "web" on top left
line(0, 200 - 5 * i, i * 5, 0);
}
stroke(150, 100, 210);
for (i = 0; i < 40; i ++){ // purple bottom right web
line(0, 200 + 5 * i, i * 5, 400);
}
stroke(210, 100, 150); // top right web
for (i = 0; i < 40; i ++){
line(300, 200 - 5 * i, 300 - i * 5, 0);
}
stroke(210, 100, 210); // bottom right web
for (i = 0; i < 40; i ++){
line(300, 200 + 5 * i, 300 - i * 5, 400);
}
}
/* Cathy Dong
Section D
yinhuid
Project 4-String Art
*/
var sqColor;
var backColor;
function setup() {
createCanvas(400, 300);
}
function draw() {
background(0);
//change background color based on mouseY location
if (mouseY < height / 2) {
backColor = 'black';
}
else if (mouseY >= height / 2) {
backColor = 'gray';
}
//turn background to white when mouse is pressed
if (mouseIsPressed) {
backColor = 'white';
}
noStroke();
fill(backColor);
rectMode(CORNER);
rect(0, 0, width, height);
//create a grid of rectangles
//rectangle color changes based on mouseX
for (var s = 20; s <= width; s += 30) {
for (var t = 15; t <= height; t += 30) {
if (mouseX < width / 2) {
sqColor = 'gray';
}
else if (mouseX >= width / 2) {
sqColor = 'black';
}
noStroke();
fill(sqColor);
rectMode(CENTER);
rect(s, t, 20, 20);
}
}
//lines from mouse to top
for (var n = 0; n <= width; n += 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, n, 0);
}
//lines from mouse to bottom
for (var p = 0; p <= width; p += 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, p, height);
}
//lines from mouse to left
for (var q = 0; q <= height; q += 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, 0, q);
}
//lines from mouse to right
for (var r = 0; r <= height; r+= 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, width, r);
}
//curve with lines from top to right (controled by mouseX)
for (var i = 0; i <= mouseX; i += 3) {
stroke(255);
strokeWeight(.5);
line(i, 0, width, i);
}
//curve with lines from right to bottom (controled by mouseY)
for (var j = 0; j <= mouseY; j += 3) {
stroke(255);
strokeWeight(.5);
line(width, j, width - j, height);
}
//curve with lines from bottom to left (controled by mouseX)
for (var k = 0; k <= mouseX; k += 3) {
stroke(255);
strokeWeight(.5);
line(width- k, height, 0, height - k)
}
//curve with lines from left to top (controled by mouseY)
for (var m = 0; m <= mouseY; m += 3) {
stroke(255);
strokeWeight(.5);
line(0, height - m, m, 0);
}
//draw foco point
stroke(255);
strokeWeight(2);
push();
line(mouseX / 8 * 7, mouseY, mouseX / 8 * 9, mouseY);
line(mouseX, mouseY / 8 * 7, mouseX, mouseY / 8 * 9);
pop();
}
In this project, I used loops to create curves with lines and rectangle grids. All lines changed based on mouse location. The background color also changed when mouse is clicked or moved.
//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 04 String Art
var c1, c2; //variables for the sky gradient
var inches = 2; //variables for the person
var head = 6*inches; //variables for the person
var bodyH = 4*head; //variables for the person
var bodyW = bodyH*0.4; //variables for the person
function setup() {
createCanvas(400, 300);
c1 = color('#ab0068'); //sunset purple color
c2 = color('#ff6c02'); //sunset orange color
setGradient(c1, c2);
}
function draw() {
noStroke();
//draw the sea
fill('#1b5f5e');
rect(0, 200, width, height / 3);
//draw the top left star
//top left
var x1 = 60;
var y1 = 10;
var x2 = 45;
var y2 = 50;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 -= 7;
y1 += 6;
}
//draw the top left star
//top right
var x1 = 60;
var y1 = 10;
var x2 = 75;
var y2 = 50;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 += 7;
y1 += 6
}
//draw the top left star
//bottom left
var x1 = 34;
var y1 = 39;
var x2 = 70;
var y2 = 100;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 + 10, y1 + 10, x2, y2 - 6);
x1 -= 7;
y2 -= 6;
}
//draw the top left star
//bottom right
var x1 = 77;
var y1 = 90;
var x2 = 74;
var y2 = 50;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 - 7, y1, x2, y2);
x2 += 7;
y1 -= 5;
}
//draw the bottom right star
//top left
var x1 = 360;
var y1 = 90;
var x2 = 345;
var y2 = 130;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 -= 7;
y1 += 6;
}
//draw the bottom right star
//top right
var x1 = 360;
var y1 = 90;
var x2 = 375;
var y2 = 130;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1, y1, x2, y2);
x2 += 7;
y1 += 6
}
//draw the bottom right star
//bottom left
var x1 = 334;
var y1 = 119;
var x2 = 370;
var y2 = 180;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 + 10, y1 + 10, x2, y2 - 6);
x1 -= 7;
y2 -= 6;
}
//draw the bottom right star
//bottom left
var x1 = 377;
var y1 = 170;
var x2 = 374;
var y2 = 130;
for (var i = 0; i < 5; i++) {
stroke('#e3c878');
line(x1 - 7, y1, x2, y2);
x2 += 7;
y1 -= 5;
}
//draw the right sail
var x1 = 200;
var y1 = 50;
var x2 = 230;
var y2 = 230;
for (var i = 0; i < 7; i++) {
stroke('#ded8c0');
line(x1, y1, x2, y2);
x2 += 30;
y1 += 5;
}
//draw the left sail
var x1 = 200;
var y1 = 50;
var x2 = 220;
var y2 = 230;
for (var i = 0; i < 15; i++) {
stroke( '#ded8c0');
line(x1, y1, x2, y2);
x2 -= 10;
y1 += 10;
}
//draw the person
stroke('#9ea9f0');
fill('#ccc1ff');
circle(130, 210, head);
ellipse(130, 210 + head*0.5 + bodyH*0.5, bodyW, bodyH);
//draw the brown boat
noStroke();
fill('#a34a28');
beginShape();
vertex(80, 230);
vertex(420, 230);
vertex(370, 280);
vertex(130, 280);
endShape(CLOSE);
}
//drawing a linear gradient
//for the sunset
function setGradient(c1, c2) {
noFill();
for (var y = 0; y < height; y++) {
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}
I tried experimenting using string art to create an actual image as people also do when they physically do string art, and I also played around with color and creating gradients, which I never attempted before. It was really difficult for me at first to envision how to create the stars, but once I started, I slowly understood what to do for each part.
“Sonic Playground” is an installation of six interactive
sound sculptures that transmit and manipulate sound depending on where you’re
standing, listening, or speaking. The software used in this project was
Grasshopper as a plug-in for Rhinoceros 3D, and both programs aren’t acoustic
software, but in certain situations with certain frequency ranges, it can be
done using ray-tracing techniques. What inspires me about this project is the
child-like fantasy with its playfulness and nod to the talk tubes on
playgrounds from childhood, and how Suzuki plays it up with physics,
engineering, and computer software, using the shape of the parabolic dishes
that require time to find the exact spot where you can hear the reflection of
sound at its optimum.
Suzuki makes this installation effective by using the
raytracing tool to replicate the design of the internal surfaces of a concert
hall to maximize the sound that reaches and envelops the audience. However, I
wish that the artist made the appearance a little more interesting and different
than the talking tubes that can be found on playgrounds, or somehow appeal more
to the adults than the children in a way that brings the adults joy in reminiscing
their childhood memories.
Suzuki was inspired by the public space in Japan and the UK and
how strangers don’t tend to start conversations with strangers, and he wanted to
create an experience between people who must communicate through audio. He was
also inspired by the sound mirrors in Kent that were originally built by the UK’s
national defense force in the early 19th century.
A static image of kids interacting with Yuri Suzuki’s “Sonic Playground”: demonstrates how people interact with the installation, and showing how kneeling or standing can change the sound.Screenshots of how “Sonic Playground” was completed using Grasshopper and Rhinoceros 3D, showing how the computer software fits into this project.
I first started with drawing several parabolic curves in function draw(). Then after making a shape I liked, I moved it over into its own function like the owl example and used another two for loops to replicate it with different x,y values.
/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-04
*/
//I first started with drawing several parabolic curves in function draw().
//Then after making a shape I liked, I moved it over into its own function
//like the owl example and used another two for loops to replicate it with different x,y values.
var t = 0;
function setup() {
createCanvas(400, 300);
t = 0;
}
function draw() {
background(0);
//changes color based on mouseX, mouseY
var r = map(mouseX, 0, width, 0, 230);
var g = map(mouseY, 0, height, 0, 230);
var b = 230 * noise(t+20);
stroke(r,g,b);
t = t + 0.05;
//determines x and y of shapes. I made them overlap each other
for (var y = -height/2; y < height*2; y += height/2){
for (var x = -height/2; x < width*2; x += height/2) {
shape(x, y);
}
}
}
function shape(x,y) {
var n = 20;
var linespacing = height/(n*2);
push();
scale(.5);
translate(x,y);
for(var i = 0; i<n; i++)
{
strokeWeight(1);
//stroke("red");
line(0,0+linespacing*i, //x1, y1. begin at 0,0 and go down linespacing
0+linespacing*i,height/2); //x2, y2. point goes right along height/2 linespacing each time
//stroke("black");
line(height,0+linespacing*i, //x1, y1. begin at height and go down
height-linespacing*i,height/2); //x2, y2. begin at height,height/2 and go left
//stroke("green");
line(height/2,height/2+linespacing*i, //begin at height/2,height/2 and go down
height-linespacing*i,height/2); //begin at height,height/2 and go left
//stroke("purple");
line(height/2,height/2+linespacing*i, //begin at height/2,height/2 and go down
0+linespacing*i,height/2); //begin at 0,height/2 and go right
//stroke("yellow");
line(0,0+linespacing*i, //begin at 0,0 and go down
height/2-linespacing*i,0); //begin at height/2,0 and go left
//stroke("blue");
line(height,0+linespacing*i, //begin at height,0 and go down
height/2+linespacing*i,0); //begin at height/2,0 and go right
//stroke("brown");
line(height,height/2+linespacing*i, //begin at height,height/2 and go down
height-linespacing*i,height); //begin at height,height and go left
//stroke("orange");
line(0,height/2+linespacing*i, //begin at 0,height/2 and go down
0+linespacing*i,height); //begin at height/2 and go right
}
pop();
}
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
