![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
//Srishty Bhavsar
//15-104
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 400);
background(200);
text("p5.js vers 0.9.0 test.", 10, 15);
line(50, 50, 150, 300);
line(300, 300, 400, 100);
}
function draw() {
createCanvas(400,300);
//sky blue background
background(193,242,254);
// for loop that initializes =, lines up to 700, and spaced +1
dx1 = (150-50)/numLines;
dy1 = (300-50)/numLines;
dx2 = (350-300)/numLines;
dy2 = (100-300)/numLines;
// faint mountains in background
var x1 = -100;
var y1 = -30;
var x2 = 500;
var y2 = -200;
for (var i = 0; i <= numLines; i += 1) {
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
push()
stroke(167,84,41,40);
translate(200,150);
rotate(PI/3); // flipped so they look like mountains
line(x1/2, y1, x2, y2);
pop();
push()
stroke(167,84,41,30);
translate(100,150);
rotate(PI/3);
line(x1/2, y1, x2, y2);
pop();
}
for (var i = 0; i <= numLines; i += 1) {
var x1 = 0;
var x2 = (i*width)/50;
var y1 = (i*width)/50;
var y2 = height;
//Ocean blue waves (light to dark)
stroke(219,247,253);
line(x1 + 50, y1 + 100, x2, y2);
stroke(0,157,196); // brightest blue
line(x1, y1 + 80, x2, y2);
line(width + (x2), height - y1, x2, y2);
stroke(1,90,112); // oceanside blue
line(width+500, height-y1, x2, y2);
line(width+500, height-y1, x2 + 100 , y2);
line(x1, y1 + 150, x2, y2);
line(x1, y1 + 200, x2, y2);
//sand
stroke(246, 240, 210); // dark sand color
line(x1, height - 20, x2 - 100, height);
stroke(205, 170, 109); //lighter sand color
line(x1, height-30, x2 + 10, height);
stroke(255,255,240); //ivoru sand color
line(x1, height -10, x2 -100, height);
}
//setting sun
for (var i = 0; i <= 50 + numLines; i += 1) {
// sun sets position above water
var x1 = 200;
var y1 = 250;
stroke(250, 180, 20, 100); // sunny yellow
strokeWeight(2)
push() // stored
translate(x1, y1);
rotate((i*PI)/numLines); //center filled circle
line(0, 0, 0, 100); // rays
pop() // resets
}
noLoop();
}
Month: September 2022
Looking Outwards: Sound Art
I looked at the MediaArtTube YouTube channel and found a project called ‘Study of Time’ by Random International. The piece was presented at the Miami Art Basel in 2011 and plays with the idea of time in relation to light and sound. The brightness and intensity of the light in relation to how each point/ light source on the plane lights up in contrast or union with those around it are used to complement the sound the viewers hear.
When prominent chords or louder sounds are heard, there is direct visual feedback on the installation as points on the surface light up faster. The slower speed of lighting up and the gradient effect of the lights complemented the slower increase of volume and sounds. The light beams also cast shadows on these cylinders perpendicular to the surface, creating different numbers which were also really cool in immersing a viewer in thinking about time and creating an emotional environment with the sound and lights.
I would imagine algorithms were used to recognize aspects from the sound clip and transfer that to the intensity and speed of light for the various light points.
https://www.random-international.com/
https://www.youtube.com/watch?v=SbvjKXHbjuM
week 4 blog
https://sonami.net/portfolio/items/ladys-glove/
One of the people listed in the suggestions was Laetitia Sonami. From a brief glance at her website it seemed like she used motion and other changing factors to produce music. I looked her up on Spotify and found her music kind of haunting but also intriguing. Usually I go through a couple of the people on the list before deciding to commit to one and research their work but I immediately was interested in her work. One of her main projects is something called lady’s glove. Originally it started as a simple mockup only using a kitchen glove and some wires and sensors but overtime Sonami has edited and improved the quality both visually and functionally. The basics are that the glove has sensors on the fingers that detect movement and a magnet which is used to ground/track the movement. These movements are then translated which allows then the sound to change and match movements. The glove became part of the performance, and instrument used to change the feeling of the music while also adding to the performative and mystical aspects that are woven into the style of music.
string art
islandd sketch
function setup() {
createCanvas(400, 300);
background("lightsteelblue");
}
function draw() {
strokeWeight(0.5);
numLines = 30;
//sun beams
strt(-width, 0, width, 2*height, 0, 0, width, 0, 20, "yellow");
fill("yellow");
ellipse(width, 0, 100); //sun
//mountains
fill("green");
triangle(90, 150, 20, 250, 390, 250);
triangle(290, 150, 390, 250, 20, 250);
stroke("green");
line(90, 150, 20, 250); //left mountain
line(290, 150, 390, 250); //right mountain
crshtch(90, 150, 20, 250, 290, 150, 390, 250, numLines, "palegreen");
crshtch(290, 150, 390, 250, 90, 150, 20, 250, numLines, "palegreen");
//water
fill("lightseagreen");
rect(0, 250, 400, 50);
lne(0, 250, 0, 300, 400, 250, 400, 300, 30, "blue");
}
//diag crosshatch
function crshtch(x1, y1, x2, y2, x3, y3, x4, y4, numLines, colour){
stroke(colour);
dx3 = (x4-x3)/numLines;
dy3 = (y4-y3)/numLines;
dx1 = (x2-x1)/numLines;
dy1 = (y2-y1)/numLines;
dx2 = (x4-x3)/numLines;
dy2 = (y4-y3)/numLines;
for(var i = 0; i <= numLines; i ++){
line(x1, y1, x4, y4);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
x3 += dx3;
y3 += dy3;
}
}
//light lines
function strt(a1, b1, a2, b2, a3, b3, a4, b4, numLines, colour){
stroke(colour);
dx3 = (a4-a3)/numLines;
dy3 = (b4-b3)/numLines;
dx1 = (a2-a1)/numLines;
dy1 = (b2-b1)/numLines;
dx2 = (a4-a3)/numLines;
dy2 = (b4-b3)/numLines;
for(var i = 0; i <= numLines; i ++){
line(a1, b1, a4, b4);
a1 += dx1;
b1 += dy1;
}
}
//straight lines
function lne(x1, y1, x2, y2, x3, y3, x4, y4, numLines, colour){
stroke(colour);
dy1 = (y2-y1)/numLines;
dy3 = (y4-y3)/numLines;
for(var i = 0; i <= numLines; i ++){
line(x1, y1, x3, y3);
y1 += dy1;
y3 += dy2;
}
}
week 04 project
for this project, I wanted to make a heart shape using string art!
sketch
var dx1;
var dy1;
var dx2;
var dy2;
var tx1;
var ty1;
var tx2;
var ty2;
var qx1;
var qy1;
var qx2;
var qy2;
var numLines = 50;
var numLinesb = 50;
var numLinesc = 50;
function setup() {
createCanvas(400, 400);
background(255,240,250);
//corresponds to bottom part of heart
dx1 = (-250)/numLines; //bottom left x
dy1 = (600)/numLines; //bottom left y
dx2 = (300)/numLines; // top right x
dy2 = (-700)/numLines; // top right y
//corresponds to top right part of heart
tx1 = (0)/numLinesb; //bottom left x
ty1 = (-600)/numLinesb; //bottom left y
tx2 = (200)/numLinesb; // top right x
ty2 = (700)/numLinesb; // top right y
//corresponds to top left part of heart
qx1 = (-100)/numLinesc; //bottom left x
qy1 = (500)/numLinesc; //bottom left y
qx2 = (0)/numLinesc; // top right x
qy2 = (-600)/numLinesc; // top right y
}
function draw() {
//following is bottom part of heart
stroke(200,100,100); //pink lines
var x1 = 0; //left x
var y1 = 200; //left y
var x2 = 400; //right x
var y2 = 600; //right y
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
} //following is right upper part of heart
stroke(255,100,200); // hot pink lines
var a1 = 200; //left x
var b1 = 250; //left y
var a2 = 400; //right x
var b2 = 0; //right y
for (var i = 0; i <= numLinesb; i += 1) {
line(a1, b1, a2, b2);
a1 += tx1;
b1 += ty1;
a2 += tx2;
b2 += ty2;
} // following is left upper part of heart
var c1 = 0; //left x
var d1 = 0; //left y
var c2 = 200; //right x
var d2 = 250; //right y
for (var i = 0; i <= numLinesc; i += 1) {
line(c1, d1, c2, d2);
c1 += qx1;
d1 += qy1;
c2 += qx2;
d2 += qy2;
}
stroke(240,100,240); //pink 3
for (var i = 2; i <= 100; i += 4){ //right side of heart
line(320,0,2.5*i+350,200);
line(2.5*i+350,200,320,400);
}
for (var i = 2; i <= 100; i += 4){ //left side of heart
line(80,0,2.5*i-220,200);
line(2.5*i-220,200,80,400);
}
noLoop();
}Week 04 Blog – Brian Eno
Just as a song has a beginning, so too must it come to an end. Or so I thought before discovering the world of generative music several years ago. Popularized by musician Brian Eno in the late 70s, this genre defies norms by challenging the idea that a song or an album needs to end. Rather, this type of ambient music has the ability to generate and grow on its own, ever-expanding, yet unfortunately, there hasn’t been a way to release never-ending music to the public until recently. The project I wish to discuss today is the app that Eno released in 2016, called “Reflection”. “Reflection” is a culmination of all his work with computer-generated colored light displays and installation art, and most importantly, it has the capacity to play an endless loop of music that will never repeat itself. The app is designed by Eno and uses his secret programming methods to produce the music, as well as the visual light displays that he coded himself using a basic Arduino board. Eno considered himself more of a scientist than an artist and loves the accessibility that science offers, and tries to convey this accessibility in his music, which he approaches in a very physically intuitive manner, trying to isolate the things that “work” and continue to do them. In his project “Reflection” he uses code that randomizes the notes played, as well the delays, volume of notes, and rhythm of the piece. The code he creates also allows him to use a function to correct any notes that clash with the key. The code then generates the music and once it begins playing, Eno adds additional rules to form the music into how he likes it, though he never imagines the result beforehand.
Project 04: String Art
sketchDownload
//fcooper felix cooper d
var s1=100;
var s2=0;
var s3=150;
var s4=50;
var numLines=50;
var f1=100;
var f2=0;
var f3=50;
var f4=50;
var h1=100;
var c1=50;
var c2=100;
var c3=150;
var c4=100;
function setup() {
createCanvas(200, 200);
background(220);
}
function draw() {
for(var i = 0; i < numLines; i += 1){
line(s1,s2,s3,s4);
s1=s1+5;
s4=s4+3;
}
for(var i = 0; i < numLines;i += 1){ //mirrors s
line(f1,f2,f3,f4);
f1=f1-5;
f4=f4+3
}
for(var i = 0; i < numLines; i += 1){ //lines down the middle
line(50,h1,150,h1);
h1+=3;
}
for(var i = 0; i <= 5; i += 1){ // draws hourglass
line(c1,c2,c3,c4);
c1+=2;
c2+=2;
c3-=2;
c4+=2;
}
}
I wanted to try to make some sort of perspective illusion but I think it ended up being an illusion of an illusion in a way. It makes you think maybe something weird is going on but its just fun shapes.
Looking Outwards Blog 04
The FORMS string quartet is a string quartet performance that includes digital visual elements based on sounds played during performances. As shown in the link below, they use various shapes and colors to interpret the noises from the string instruments to visual data that is played to create a more engaging experience for classical music than ever before. The scores are created previous to the performance using generative graphic algorithms that allow each sound to be interpreted into a visual shape/color. The FORMS creators allow the audience to view what is to come through visuals, making it an interactive experience, one that I would love to experience, as current classical music performances do not encourage some of the amazing visuals that have been reached by more “casual” concerts.
Below is a link to information on Alexander Scriabin and his use of color in creating his circle of fifths. I found it interesting that these ideas of relating music to color can be traced back to the 1800’s and, through technology, can become musical performances similar to what Scriabin expected – though he imagined one performance with lights flashing colors related to their notes would end the world completely! This performance by FORMS seems like something that could be created with the P5.js program and inspires me to learn about the possibilities connecting sound, art, and technology.
Project 04: String Art
Move your mouse to create different forms!
sketch
//Angela Yang
//Section C
var numLines = 100;
var r;
var g;
var b;
function setup() {
createCanvas(300, 400);
r = random (0, 255);
g = random (20, 255);
b = random (100, 255);
}
function draw() {
background("#F6F4D8");
//The mouse controls the motion of the strings on canvas.
var x = constrain(mouseX, 50, width);
var y = constrain(mouseY, 50, height);
//Mirror x and y coordinates.
var x2 = width - x;
var y2 = height - y;
// First set
//The string is incremeting by 5 for each line that is drawn on canvas.
for (var i = 0; i <=numLines; i += 5) {
stroke(r, g, b);
line(i, y2, x2, height + i);
line(width + i, y, x, i);
line(width + i, y2, x, height + i);
line(i, y, x2, i);
}
//Second Set
for (var i = 0; i <=numLines; i += 10) {
stroke(0, 204, 204);
line(width - i, y, x2, height);
line(i, y2, x, i);
line(width - i, y2, x2, i);
line(i, y, x, height);
//Third Set
for (var i = 0; i <=numLines; i += 5) {
stroke(0, 160, 150);
line(width - i, y, x2, height+i);
line(i, y2, x2, i);
line(width - i, y, x2, i);
line(i, y, x, height+i);
}
}
}Project 04: String Art
sketch
in this project, I tried to use different colors and combinations of strings to compose a gradually changing geometry that goes from edge to the center.
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines = 50;
var c;
function setup() {
createCanvas(400, 300);
background(0);
//base set of lines #1
/*line(width/4,0,0,height/3);
line(0,height/3,width/2,height/3);*/
/*line(1,300,2,1);
line(2,1,200,150);
line(200,150,398,299);
line(398,299,399,1);*/
dx1=(2-1)/numLines;
dy1=(1-300)/numLines;
dx2=(200-2)/numLines;
dy2=(150-1)/numLines;
dx3=(398-200)/numLines;
dy3=(299-150)/numLines;
dx4=(399-398)/numLines;
dy4=(1-299)/numLines;
//define the change of x, y variables
/*dx1 = (0-width/4)/numLines;
dy1 = (height/3-0)/numLines;
dx2 = (width/2-0)/numLines;
dy2 = (height/3-height/3)/numLines;*/
}
//draw first set of strings
function draw() {
var x1 = 1;
var y1 = 300;
var x2 = 2;
var y2 = 1;
var x3 = 200;
var y3 = 150;
var x4 = 398;
var y4 = 299;
stroke(0,255,0);
//in a for loop, when a increases, x1+= a*dx1)
//for(var e=0;e<=5;e+=1){
//dx2=e*dx2;
/*x1 += e*dx1;
y1 += e*dy1;
x2 += e*dx2;
y2 += e*dy2;
x3 += e*dx3;
y3 += e*dy3;
x4 += e*dx4;
y4 += e*dy4;*/
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
line(x3,y3,x4,y4);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
string02();
string03();
string04();
noLoop();
}
//second set of strings
function string02(){
var x5 = 2;
var y5 = 1;
var x6 = 399;
var y6 = 50;
var x7 = 1;
var y7 = 250;
var x8 = 399;
var y8 = 300;
stroke(255);
for (var e =0; e <= 20; e += 1) {
line(x5, y5, x6, y6);
line(x7,y7,x8,y8);
x5 += dx1;
y5 -= dy1;
x6 += dx2;
y6 -= dy2;
x7 -= dx3;
y7 += dy3;
x8 -= dx4;
y8 += dy4;
}
}
//third set of strings
function string03(){
var x9 = 2;
var y9 = 1;
var x10 = 399;
var y10 = 100;
var x11 = 1;
var y11 = 200;
var x12 = 399;
var y12 = 300;
stroke(195,255,195);
for (var l =0; l <= 25; l += 1) {
line(x9, y9, x10, y10);
line(x11,y11,x12,y12);
x9 += dx1;
y9 -= dy1;
x10 += dx2;
y10 -= dy2;
x11 -= dx3;
y11 += dy3;
x12 -= dx4;
y12 += dy4;
}
}
//fourth set of strings
function string04(){
var a = 2;
var b = 1;
var c = 399;
var d = 200;
var e = 1;
var f = 100;
var g = 399;
var h = 300;
stroke(90,255,90);
for (var l =0; l <= 28; l += 1) {
line(a, b, c, d);
line(e,f,g,h);
a += dx1;
b -= dy1;
c += dx2;
d -= dy2;
e -= dx3;
f += dy3;
g -= dx4;
h += dy4;
}
}
//}
//noLoop();
//devide the lines
//connect different parts on each line
//define a function for different lines and variable