![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
During this project, I decided to make circles expand and contract as it follows the mouse. Then the background color would change gradually to black but back to white with a click of the mouse. Also, every time the mouse was clicked left or right of the canvas the rotating squares would be moving towards the left top corner or the bottom right corner.
Category: SectionB
conniek-03-LO
This project is something that I find inspirational because of the movements that it has and the way the colors are used to create depth in this piece. Linden Gledhill, the photographer of this piece, used high-speed cameras that reflected off the moving water which change the motions of the waves. The light that is reflected helps change the color of the waves. The vibrations were the cause in helping the wave patterns to shift, and depending on higher or lower the frequencies the more complicated the patterns turn out to be. I suppose they used the camera to be able to record the wave changing. The artist uses his sensibilities in this piece getting inspired by Michael Faraday’s study on Faraday Waves to be able to focus on the different shapes and colors that were formed through just the pattern of water forming on the surface through the effects of vibrations on it.
Project 4: String Art
function setup() {
createCanvas(400,300);
}
function draw() {
background(140);
for (var i = 0; i < 590; i++) {
var x1 = 0;
var x2 = i*width/30;
var y1 = i*height/59;
var y2 = height;
strokeWeight(0.7);
stroke(200, 103, 98);
line(x1, y1, x2+100, y2);
stroke(155,109,90);
line(x2, 0, x1*2, height-y1);
stroke(147,55,91);
line(width, height-y1, x2*2, y2);
stroke(46,56,64);
line(x2, 4, width, y1);
stroke(65,50,123);
line(width+200, height-190, x2-999, height);
stroke(200,85,45);
line(width/2,height/2, x2, y1);
}
}
Looking Outwards: 04
Sound Art
The project that caught my attention was The Product – Soundmachines, Creative Sound Production Device 2011. This video shows three units, which resembles a standard record player, translate concentric visual patterns into control signals for further processing in any music software. Each rotation of the record discs holds three tracks, and they can be synced into a sequencer. This project was created by a producer/sound designer Yannick Labbé. I was fascinated by the sounds produced by the record discs, it had a techno feel to it, and it was interesting watching the visual/sound elements come together to create this ensemble.
Project 4: String Art
wpf-string-art
//Patrick Fisher Section B
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 300);
background(50);
fill(10);
rectMode(CENTER);
rect(200,150,250,250)
dx1 = (275-25)/numLines;
dy1 = (275-25)/numLines;
dx2 = (25-275)/numLines;
dy2 = (25-275)/numLines;
}
function draw() {
var x1 = 75;
var y1 = 25;
var x2 = 275;
var y2 = 275;
stroke(255,0,0,200);
for (var i = 0; i <= numLines; i += 1) { //crates x design that goes from upper left to bottom right
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = 375;
y1 = 25;
x2 = 75;
y2 = 275;
for ( i = 0; i <= numLines; i += 1) { //creates x design that goes from lower left to upper right
line(x1, y1, x2, y2);
x1 += -dx1;
y1 += dy1;
x2 += -dx2;
y2 += dy2;
}
dx1 = (325-25)/numLines;
dy1 = (75-25)/numLines;
dx2 = (25-275)/numLines;
dy2 = (25-0)/numLines;
x1 = 75;
y1 = 25;
x2 = 325;
y2 = 75;
stroke(0,0,255,200);
for ( i = 0; i <= numLines; i += 1) { //creates the blue pattern at the top
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = 325;
y1 = 75;
x2 = 75;
y2 = 25;
for ( i = 0; i <= numLines; i += 1) { //creates the second half of the top blue pattern
line(x1, y1, x2, y2);
x1 += -dx1;
y1 += -dy1;
x2 += -dx2;
y2 += -dy2;
}
x1 = 325;
y1 = 175;
x2 = 75;
y2 = 250;
stroke(0,0,255,200);
for ( i = 0; i <= numLines; i += 1) { //creates the botom blue pattern
line(x1, y1, x2, y2);
x1 += -dx1;
y1 += dy1;
x2 += -dx2;
y2 += dy2;
}
x1 = 75;
y1 = 250;
x2 = 325;
y2 = 175;
stroke(0,0,255,200);
for ( i = 0; i <= numLines; i += 1) { //creates the top half of the bottom blue pattern
line(x1, y1, x2, y2);
x1 += dx1;
y1 += -dy1;
x2 += dx2;
y2 += -dy2;
}
noLoop();
}I really struggled with this project, both creatively and technically. I had to take the sample code and finger with it mostly randomly to create anything that I was remotely satisfied with it.
Looking Outward 4
The video “Sound Machines” on the YouTube channel MediaArtTube demonstrates a machine that uses light recognition to play sound. The machine has three sensors and takes in visual information from vinyl record sized discs with patters engraved. The three discs have different types of patterns which the sensors read. The first reads color, with the disk having red, yellow, and blue lines on a white disc, depending on where the sensor is located up or down the radius changes the sequence of colors, therefore changing the sound. The second disc reads either black or white, with 3 patterns made using a black disc hollowed out. When the sensor detects black is plays a noise. The final disk is split into thirds, where white becomes more and more grey. The sensor reads the grey scale and increases the volume the grayer the image gets.
Project 4: String Art
string art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var lines = 120; //for the left & right strings
var lines2 = 100; //for the top-> bottom & left -> right strings
var lines3 = 20; //for center strings
function setup() {
createCanvas(400, 300);
background(220);
//left blue+green strings
line(0, 0, 0, 300); //initial line
line(0, 300, 400, 0); //ending line
dx1 = (0-0)/lines;
dy1 = (300-0)/lines;
dx2 = (400-0)/lines;
dy2 = (0-300)/lines;
//right blue+red strings
line(0, 300, 400, 0); //initial line
line(400, 0, 400, 300); //ending line
dx3 = 400/lines;
dy3 = -300/lines;
dx4 = 0/lines;
dy4 = 300/lines;
//top -> bottom strings
line(0, 0, 400, 0); //initial line
line(0, 300, 400, 300); //ending line
dx5 = 400/lines2;
dy5 = 0/lines2;
dx6 = 400/lines2;
dy6 = 0/lines2;
//left -> right strings
line(0, 0, 0, 300); //initial line
line(400, 0, 400, 300); //ending line
dx7 = 0/lines2;
dy7 = 300/lines2;
dx8 = 0/lines2;
dy8 = 300/lines2;
//center piece
dx9 = 100/lines3;
dy9 = 150/lines3;
dx10 = 100/lines3;
dy10 = 150/lines3;
}
function draw() {
//left -> right strings initial points
var x7 = 0;
var y7 = 0;
var x8 = 400;
var y8 = 300;
//draw left -> right strings
for (var i = 0; i <= lines2; i += 1) {
stroke(255, 95, 90); //red
line(x7, y7, x8, y8);
x7 += dx7;
y7 += dy7;
x8 -= dx8;
y8 -= dy8;
}
//top -> bottom strings initial points
var x5 = 0;
var y5 = 0;
var x6 = 400;
var y6 = 300;
//draw top -> bottom strings
for (var i = 0; i <= lines2; i += 1) {
stroke(255, 105, 0); //orange
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 -= dx6;
y6 -= dy6;
}
//left blue+green strings initial points
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 300;
//draw blue+green strings
for (var i = 0; i <= lines; i+= 1) {
stroke(0, random(50, 160), random(100, 200)); //pick random color from green & blue
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//right blue+red strings initial points
var x3 = 0;
var y3 = 300;
var x4 = 400;
var y4 = 0;
//draw blue+red strings
for (var i = 0; i <= lines; i+= 1) {
stroke(random(80, 150), 0, random(100, 200)); //pick random color from red & blue
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//center piece initial points
var x9 = 100;
var y9 = 150;
var x10 = 300;
var y10 = 150;
//draw center piece
for (var i = 0; i <= lines3; i += 1) {
stroke(225, 210, 225); //white
line(x9, y9, x10, y10);
x9 += dx9;
y9 += dy9;
x10 -= dx10;
y10 -= dy10;
}
noLoop();
}
I found it a bit challenging to visualize the way the strings would work in my head, and so the drafting part was quite difficult. However, I really liked how the strings overlapping created dimension in the piece.
Algorithmic Drive – Spectacular car(au)tonomy
Sound always surrounds us no matter where we are – in our rooms, on the boardwalk by the ocean, in class during final exams when everyone is focused on their work. Even during complete silence there’s a sound of our breathing or the sound of dust falling on the floor. Sound is always there and the idea of music always follows it. Many would consider a loud street in the middle of New York City to be noisy or annoying but, as a native New Yorker, I grew to hear music in the random Manhattan sounds. We can hear constant beats from honking cars or from people throwing out metal cans of soda that make a clunking sound. People’s conversations are lyrics about daily life, struggles and human routines. Music is everywhere and I think it’s beautiful.
I chose a project called “Algorithmic Drive” created by François Quévillon. “The work plays with the tension generated by confronting the technologies used by mobile robotics with the unpredictable nature of the world.” What I admire about this project is the fact that both technology and nature are connected here because robotics were used to capture the sound of the world around us. It’s fascinating. What I know about the algorithms that generated the work is that Quévillon built his own database that consisted of camera recordings and he connected that database to his car’s on-board computer. The camera was recording videos via Bluetooth in the car’s OBD-II port of a surrounding nature and it took into consideration all of the factors such as altitude, orientation, car’s location and speed, engine RPM, stability and the temperature of various sensors. To sort all of the videos statistically from minimum to maximum value by the parameters like sounds, images, location and car’s activity, there was a specific sampling system that used signal processing, data analysis and computer vision algorithms. The parameters were “mapped using a Uniform Manifold Approximation and Projection (UMAP) dimension reduction technique.” Sound analysis software was used to get the sound and visual features of the environment based on OpenCV and road scene segmentation using the SegNet deep convolutional encoder-decoder architecture and its Model Uncertainty. Moreover, the system that François Quévillon used in his project had “a custom-built interface with illuminated rotary encoders and a monitor installed on a road case that contains a subwoofer.”
A way the creator’s artistic sensibilities manifested in the final form is the fact that François Quévillon was able to bring life into technology: robotics were used to record videos and he managed to add sounds based on recordings of nature. It’s simply fantastic. We were able to hear music based on ocean’s waves and on trees that were growing on the side of the road. We were able to hear beats from rain drops and we were able to hear melodies based on the flying insects. This project brought together technology and nature to create music – this project shows us that technology can be used not only for practical purposes but also for spirituality.
Looking Outwards 4: Sound Art
For this week’s LO, I looked into “Cycling Wheel: The Orchestra” created by Keith Lam, Seth Hon, and Alex Lai. The piece was first released in 2016 is composed of 3 sets of bicycle wheels and connecting strings. Together, the installation acts as a dynamic and interactive instrument for performance. The Hong Kong-based new media artist Keith Lam explains that the piece was based on the idea of Marcel’s Bicycle Wheel and that they wanted to remake the masterpiece by composing a multi-media performance. I love how they embedded audio and lighting in the wheel so the piece is very dynamic and interactive. The music created is very unique and the flashing lights really complement the orchestra. I also admire how there’s a live element where the artists are present and controlling those wheels in front of an audience. I suppose the algorithms behind the project helps to transform the mechanics of the wheel into variations in sounds and lights.
Sad Face – Project 3
This is my dynamic drawing which rotates and scales objects in the canvas. The dynamic drawing ends up making a sad face when the mouse is placed in the right x and y position.