Tilt Brush has been around for a while now. It is mostly used to power designs with Google VR in the 3D realm; however, “it is only starting to wow the masses”, according to the Creators Project. Google has just equipped the tool with brushes that respond to audio, which allow users to elevate painting with VR to a whole new level. In this age of VR, designers might not be able to paint with the color of the wind, but they are certainly capable of painting with the very sound of the wind.
The exact algorithm of this mind-blowing drawing tool is preserved from the public. But it is clear that it transforms the beat of the music, any kind of your choice, into the pulses in the strokes of your drawings. The audio reactiveness might seem like a minor addition to the brushes, but the possibility it entails is unmatched. With the audio element, we now have yet another reason to engage in an artistic experience in VR than when it was silent.
Max Cooper is a musician of the techno and electronic genre. One of his projects includes an immersive 4D musical experience. It’s kind of like virtual reality, except the focus is more on sound than visuals.
“The 4D system, and a lot of the work I do with my music in terms of spatiality and trying to create immersive spaces and structures within them, has to do with psycho-acoustics and the power of sound to create our perception of the reality we’re in,” he said. “The idea is to create an alternative reality that can be very beautiful, relaxing, jarring, and even uncomfortable, but still an interesting experience that can communicate a new idea.” – Cooper, about the project.
For the 4D effect, Cooper used a software that enabled him to design and build a 3-dimensional representation of the music. The sounds can take on any shape or form inside this 3-dimensional space. The software also calculates the effect of the speakers to create variance in the sounds.
What I admire about the project is the level of innovation it has to create an entirely original musical experience. It seems that he spent a lot of time and effort thinking about the shape of the sounds. The sound system used is known as 4D Sound, and was created by a group stationed in Amsterdam.
//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//section C
//Project-04
function setup() {
createCanvas(640, 480);
background(180, 218, 214);
}
function draw() {
var offset = 100; //moves translated lines
var spacing = 5;
var weirdnumber = 4.5;
for (var i = 0; i < width; i += 3){
stroke(0);
line(i, 0, width - offset*3, i + spacing);//black curve top left
stroke(255);
line(0, height - offset*2, i, 0);//white line - not a curve just a fun shape
stroke(255);
line(350, width + i, i + offset*3, 0);// white curve on right side
stroke(0);
line(0, width - i, i + offset, 0);//black curve in upper left hand corner
//repeated black curves
push();
translate(offset, 0);
stroke(0);
line(i, 0, width - offset*3, i + spacing);
pop();
push();
translate(-offset, 0);
stroke(0);
line(i, 0, width - offset*3, i + spacing);
pop();
push();
translate(-offset * 2, 0);
stroke(0);
line(i, 0, width - offset*3, i + spacing);
pop();
push();
translate(offset*2, 0);
stroke(0);
line(i, 0, width - offset*3, i + spacing);
pop();
//
stroke(255, 75, 46);
line(0, i, i+ spacing, height);//Original orange Curve bottom left
//repeated orange curves
push();
translate((offset * (offset/2)), 0);
stroke(255, 75, 46);
line(0, i, i+ spacing, height);
pop();
push();
translate(offset*3, 0);
stroke(255, 75, 46);
line(0, i, i+ spacing, height);
pop();
push();
translate((offset* weirdnumber), 0);
stroke(255, 75, 46);
line(0, i, i+ spacing, height);
pop();
push();
translate(width, 0);
stroke(255, 75, 46);
line(0, i, i+ spacing, height);
pop();
}
}
In this assignment I mostly focused on experimenting with the mixing of colors in the curves. I enjoyed changing the spacing between lines to create interesting visual effects.
// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 4
var X1
var Y1 //coordinates of first point on line segment
var X2
var Y2 //coordinates of second point on line segment
function setup() {
createCanvas(640, 480);
background("LightSalmon");
X1 = 0;
Y1 = 0;
X2 = length / 2;
Y2 = sqrt(3) * length / 2; //use trig to set outer triangle to be equilateral
}
function draw() {
flower(width/ 2, height / 2,240);
strokeWeight(0.3);
flower(width/ 2, height / 2,110);
//draw flowers at width/ 2,height / 2 with "radius" of 240 and 110
noLoop();
}
function halfPetal(x, y, a, sign, length) {
//defines the function halfPetal() which draws half a petal either facing down or up.
//x,y determines the left tip of petal
//a dtermines the radians rotated
//sign dtermines whether petal is facing up or down
//length determines the length of petal
push();
X1 = 0;
Y1 = 0;
X2 = length / 2;
Y2 = sign * sqrt(3) * length / 2; //reset the coordinates of point 1 and point 2 before loop
gapX = length / 60; //the difference of X values between two adjacent starting points and end points
gapY = sqrt(3) * length / 60;//the difference of Y values between two adjacent starting points and end points
translate(x,y);
rotate(a);
for(var i = 0; i < 31; i ++){
line(X1, Y1, X2, Y2);
X2 = X2 + gapX;
Y2 = Y2 - gapY * sign;
X1 = X1 + gapX;
Y1 = Y1 + gapY * sign;//connect the dots to form a curve
}
pop();
}
function flower(centerX,centerY,length){
//defines the function flower() which draws a flower at centerX,centerY with petal length of length
stroke(223,40,62);
halfPetal(centerX,centerY,(PI / 3), 1,length);
halfPetal(centerX,centerY,2 * PI / 3 + (PI / 3), 1,length);
halfPetal(centerX,centerY,4 * PI / 3 + (PI / 3), 1,length);
halfPetal(centerX,centerY,(PI / 3) , -1,length);
halfPetal(centerX,centerY, 2 * PI / 3 + (PI / 3), -1, length)
halfPetal(centerX,centerY, 4 * PI / 3 + (PI / 3), -1,length);
//draw pink flower by combing top and bottom petal together and rotating
stroke(35,66,26);
halfPetal(centerX,centerY,0, 1,length);
halfPetal(centerX,centerY,2 * PI / 3 , 1,length);
halfPetal(centerX,centerY,4 * PI / 3 , 1,length);
halfPetal(centerX,centerY, 0 , -1,length);
halfPetal(centerX,centerY, 2 * PI / 3 , -1,length);
halfPetal(centerX,centerY, 4 * PI / 3 , -1,length);
//draw green flower with same proceedure
}
I was surprised that straight lines could produce such organic curves. The shapes reminded me of a flower so I made a flower inside a flower.
/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 4 String Art
*/
function setup () {
createCanvas(640, 480);
}
function draw() {
background("navy");
var a = 0;
var b = 640;
var c = 480;
var r = atan2(mouseY-height/2, mouseX-width/2);
for (var i = a; i < 640; i += 10) { //starts at 0, adds 10 to i until 640
noFill();
stroke("yellow");
strokeWeight(1.5);
translate(width/2, height/2);
push();
rotate(r);
ellipse(a, a, 10, 10);
pop();
angleMode(RADIANS);
rotate(r);//rotates lines around the center ellipse when mouse is moved
line(a, a, width-c, b); //second line from the bottom left
line(a, a, b, i); //line closest to the bottom right
line(a, a, -30, i+300); //line closest to the bottom left
line(a, a, i+600, b); //second line from the bottom right
}
}
For this week’s project, my original idea was to make a string art “circle” where lines from all corners of the canvas would come together to outline an empty ellipse, similar to an eye of a hurricane. However, after playing around with it, I ended up making lines that spun around a center ellipse. When the user moves the mouse up or down, the lines rotate quickly and form an outline of another ellipse, which changes in diameter as the mouse moves along the canvas.
Created by Alex McLean, Spicule is a album released as a Pi Zero with high qualityDAC in customs case that allows users to remix or rework the music using the TidalCycles live coding environment. The artist created the free and open source software TidalCycles with some friends, where users can join life streaming sessions and watch how he built up the rhythm and patterns with code. Different beats and sound of instruments are generated base on the code, which give users freedom to play with, experiment and create the unique music of their own.
I found the project extremely fascinating because of the unlimited possibilities it provides. With parametric control over sounds in its very basic unit (pitch, rhythm and etc.), access to music composition and experiments would no longer be limited to the small crowd.
//Grace Cha
//Section C
//heajinc@andrew.cmu.edu
//PROJECT-04- STRING ART
function setup() {
createCanvas(640,480);
}
function draw() {
background(0);
for (var i = 20; i < 480; i += 5) { //start at 20 to 400 by increments of 5
////////EACH COLORED 'BRIDGE' IS MADE BY TWO CURVES SHAPES THAT MEET IN THE MIDDLE ///////
var xx = i * .3; //second x value of LEFT CURVE
var mirrorImage = width - i; //first x value of RIGHT CURVE
var mirrorImage1 = width - i * .3; //second x value of RIGHT CURVE
var curveHeight = 400; //first y value of curve lines
var curve = HALF_PI * i; //second y value of curve lines
var flippedHeight = height - curveHeight;
var flippedCurve = height - curve;
strokeWeight(7);
stroke(232,244,31,20); //YELLOW TWIST IN CENTER
line( i + 100, 200, i / 20, PI+QUARTER_PI * i) //LEFT FLAP
line( mirrorImage, 200, width - i / 20,PI+QUARTER_PI * i); //RIGHT FLAP
//EACH COLORED 'BRIDGE' IS MADE BY TWO CURVES SHAPES
strokeWeight(1);
stroke(155,31,239,60); //MIDDLE PURPLE
line(i + 250 ,curveHeight, xx + 250, curve); //LEFT CURVE
line(mirrorImage -250, curveHeight, mirrorImage1 - 250, curve); //RIGHT CURVE
stroke(9,157,150,60); //TEAL
line(i + 200 , curveHeight, xx + 200, curve);//LEFT CURVE
line(mirrorImage - 200, curveHeight, mirrorImage1 - 200, curve);//RIGHT CURVE
stroke(4,74,168,60);//BLUE
line(i + 150 ,curveHeight, xx + 150, curve);//LEFT CURVE
line(mirrorImage - 150, curveHeight, mirrorImage1 - 150, curve);//RIGHT CURVE
stroke(199,66,71,96); //CENTERMOST BURGENDY
line(i + 100 ,curveHeight, xx + 100, curve);//LEFT CURVE
line(mirrorImage -100, curveHeight, mirrorImage1 - 100, curve);//RIGHT CURVE
stroke(239,65,54,99); //RED
line(i + 50, curveHeight, xx + 50, curve);//LEFT CURVE
line(mirrorImage -50, curveHeight, mirrorImage1 - 50, curve);//RIGHT CURVE
stroke(155,31,239,80); //FRONT VIOLET
line(i , curveHeight, xx, curve);//LEFT CURVE
line(mirrorImage , curveHeight, mirrorImage1, curve);//RIGHT CURVE
//////FLIPPPED VERSIONS///// I ONLY CHOSE A FEW TO FLIP
strokeWeight(1);
stroke(155,31,239,60); //MIDDLE PURPLE
line(i + 250 ,flippedHeight, xx + 250, flippedCurve);//LEFT CURVE
line(mirrorImage -250,flippedHeight, mirrorImage1 - 250, flippedCurve);//RIGHT CURVE
stroke(199,66,71,96); //CENTERMOST BURGENDY
line(i + 100 ,flippedHeight, xx + 100, flippedCurve);//LEFT CURVE
line(mirrorImage -100, flippedHeight, mirrorImage1 - 100, flippedCurve);//RIGHT CURVE
stroke(155,31,239,80); //FRONT VIOLET
line(i , flippedHeight, xx, flippedCurve);//LEFT CURVE
line(mirrorImage , flippedHeight, mirrorImage1, flippedCurve);//RIGHT CURVE
}
}
My process included with some conditionals I wanted to make for my string art. I largely played around with overlapping colors and opacity of string colors to indicate dimension.
I looked at Andy Thomas’ sound visualization and particularly admire how he was able to process a sound into a visual medium. What surprised me was how something so simple, like a bird call which we have all heard many times before, is actually quite intricate in its sound, vibrations, pitch, and volume. This visualization and additional visual information truly helped me understand the feeling of the bird call, the outdoors, and nature itself.
I do not know how exactly the auditory information was processed or what it was processed with. I couldn’t find any specific information on that, but I suppose the auditory recorded information was used to dictate drawing of different shapes. Now those shape all would have different forms, color, motion, and frequency which would also be influenced by the bird call.
Given how abstract sound is, I find Thomas’ attempt to make sound visually tangible remarkable. Not only did he effectively bring out the beauty in a bird call, but he also enhanced it in my opinion.
function setup() {
createCanvas(640,480);
background(0);
}
function draw() {
strokeWeight(2);
var incrW = width/50; //define increment for X
var incrH = height/50; //define increment for Y
//top peach (lowest layer)
var startX1 = 0;
var startY1 = 0;
var endX1 = width;
var endY1 = 0.4*height;
stroke(248,178,142);
for (var i = 0; i < 40; i++){
line(startX1, startY1, endX1, endY1);
startX1 += incrW;
startY1 += incrH;
endY1 -= incrH;
}
//bottom peach (lowest layer)
var startX2 = 0;
var startY2 = 0.6*height;
var endX2 = width;
var endY2 = height;
for (var i = 0; i < 40; i++){
line(endX2, endY2, startX2, startY2);
endX2 -= incrW;
endY2 -= incrH;
startY2 += incrH;
}
//top pink
var startX3 = 0;
var startY3 = 0;
var endX3 = width;
var endY3 = 0.55*height;
stroke(241,115,127);
for (var i = 0; i < 40; i++){
line(startX3, startY3, endX3, endY3);
startX3 += incrW;
startY3 += incrH;
endY3 -= incrH;
}
//bottom pink
var startX4 = 0;
var startY4 = 0.45*height;
var endX4 = width;
var endY4 = height;
for (var i = 0; i < 40; i++){
line(endX4, endY4, startX4, startY4);
endX4 -= incrW;
endY4 -= incrH;
startY4 += incrH;
}
//top violet
var startX5 = 0;
var startY5 = 0;
var endX5 = width;
var endY5 = 0.7*height;
stroke(193,109,135);
for (var i = 0; i < 40; i++){
line(startX5, startY5, endX5, endY5);
startX5 += incrW;
startY5 += incrH;
endY5 -= incrH;
}
//bottom violet
var startX6 = 0;
var startY6 = 0.3*height;
var endX6 = width;
var endY6 = height;
for (var i = 0; i < 40; i++){
line(endX6, endY6, startX6, startY6);
endX6 -= incrW;
endY6 -= incrH;
startY6 += incrH;
}
//top purple
var startX7 = 0;
var startY7 = 0;
var endX7 = width;
var endY7 = 0.85*height;
stroke(109,92,128);
for (var i = 0; i < 40; i++){
line(startX7, startY7, endX7, endY7);
startX7 += incrW;
startY7 += incrH;
endY7 -= incrH;
}
//bottom purple
var startX8 = 0;
var startY8 = 0.15*height;
var endX8 = width;
var endY8 = height;
for (var i = 0; i < 40; i++){
line(endX8, endY8, startX8, startY8);
endX8 -= incrW;
endY8 -= incrH;
startY8 += incrH;
}
//top blue
var startX9 = 0;
var startY9 = 0;
var endX9 = width;
var endY9 = height;
stroke(50,93,128);
for (var i = 0; i < 50; i++){
line(startX9, startY9, endX9, endY9);
startX9 += incrW;
startY9 += incrH;
endY9 -= incrH;
}
//bottom blue
var startX10 = 0;
var startY10 = 0;
var endX10 = width;
var endY10 = height;
for (var i = 0; i < 50; i++){
line(endX10, endY10, startX10, startY10);
endX10 -= incrW;
endY10 -= incrH;
startY10 += incrH;
}
noLoop();
}
In this project I wanted to try and create the physical feeling of actual strings that is the core of string art. I started with a sketch to understand the logic of what I wanted to create (below), and then went on to create it layer by layer. I think the layers in this project created the sense of physicality that I wanted for the final result.
Fraction’s work on 3D ambisonics experimental music and joined by Louis-Philippe St Arnault, Nature Graphique and Creation Ex Nihilo which was presented during IX Symposium on immersive experience (may 2015).
Apart from the fact that I was drawn to the name of the project “Entropia” (reminds me of Entropy), I was drawn to the magnitude and out-of-this-worldness of this sound artist “Fraction”(or in other words the eireness). I was really impressed by the marriage of many aspects of the senses- audio, physical, and360° visuals- to give an interactive experience for the audience (who are laying down on their backs!)
The sound manipulation by immersive electronic music sound data (which is live time performed by the man in the globe) is translated to “physical sound” through use of complex lighting systems that are manipulated by the sound data real time. It’s almost like a conversation between the light and sound.
Light reacts to the sound data coming from dome3D interactive experience for views
![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](../../../../wp-content/uploads/2020/08/stop-banner.png)
