For this Looking Outwards I wanted to find some musical pieces that couldn’t be reproduced with physical instruments and would instead need to be played entirely electronically. I started out looking for some artists who had perhaps made a specialized synthesizer when I came across an artist that, although utilizing a program that they hadn’t created themselves, they instead created a new genre of music. “Black Midi” is a music genre defined in that if you were to write the sheet music of a song in that genre, you would end up with a black piece of paper because so many notes are played in the song. It’s not just the magnitude of the music that makes Black Midi so interesting, but also the visual aspect of it. Rendering the notes in such a way that in video the music is mesmerizing to look at. “Pi, The Song With 3.1415 Million Notes” by TheSuperMarioBros2 on Youtube, is a particularly mesmerizing piece. Uploaded on March 14, 2015, the visuals include the symbol of Pi itself, morse code, and swirling visuals composed of the notes on Synthesia. It’s truly impressive, and while the music may not be everyone’s cup of tea, I find it enjoyable. It’s like video game music.
//Zining Ye
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu
//Project-10
var mturtle;
var angle=90;
var path=10;
function setup(){
createCanvas(480,480);
background(150,170,200);
frameRate(20); //set the framerate
mturtle=makeTurtle(width/2,height/2);
}
function draw(){
for(var i=0;i<4;i++){ //make the turtle draw a square
mturtle.setWeight(1)
mturtle.left(angle);
mturtle.forward(path);
}
mturtle.setColor(color(random(0,150),random(50,150),random(0,255))); //set the randomness of the color
mturtle.penUp();
mturtle.right(2); //turn 2 degree every time it loops
path+=0.3 //the length of the square increases
mturtle.penDown();
}
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}
This composition is inspired by one of the lecture notes where we put put the turtle codes in the draw function, so this way it loops and draws the pattern gradually. I made the square shape rotates certain degree everytime, while it is also growing in size.
I started out by wanting to draw some spooky skeletal trees, but then I got bored of drawing straight lines the whole time and decided to make it a Dr. Seus-esque tree instead. I enjoyed making circular pathways with different branches. Best Quality: Its wiggles.
SugarCube, developed by researcher samanda ghassaei at the MIT Media Lab, isan open source, grid-based, standalone MIDI instrument that can be booted up into various musical applications. With the built in accelerometer and gyroscope, SugarCube integrates the physical interaction of tilting, pushing and shaking etc. with the digital music MIDI Notes(shown in the video). It immediately gave a very tangle aspect of computational sound effect. On the other hand, Sugar Cube also afford a variety of ways that users can compose music through the interaction. Such as in the boiling app interaction, users will be able to experiment and create interesting polyrhythms with visual bouncing lights. While the users are pushing the cube buttons to add note to the rhythms, the visual Bounce direction is based on y tilt and Speed and MIDI velocity (loudness) controlled by pots. I assumed that the creators may originally concern with the variety of interaction getting too complex, there is a very user-friendly shake to ease function added to the product. Overall, I am very impress how Sugar cube links the digital music generating aspect with lighting visuals and analog interaction in a very intuitive way.
A very interesting new instrument that is generated computationally is called the dub-step board. This is a board with buttons that light up that are placed in rows and columns. Each button is linked to a different sound, song, or beat that is pre-programed with computer software. As a result of its preprogramed nature, it is an instrument of infinite possibilities that can feature live and unique performances. Many of the videos and performances done utilizing this board mix different songs and beats together to make a piece of music.
I really admire the versatility of the board and how user friendly it is. Many of the antiquated instruments that are in the standard orchestra only have specific pitches for strings and can only perform a specific group of sounds (such as the sound of a piano). The dub-step board allows the performer to play different sounds from diverse instruments and even do a drum beat at the same time all in the reach of one’s two hands. As it is personable, one can program a certain group of pitches in the reach of their own hand, as each individual has different sized hands. One of the many challenges standard orchestral instrumentalist’s face is the ability to reach the notes with their own hand, especially for those who have smaller hands that play larger instruments (such as the double bass or piano). Although the dub-step board will probably never solo with the Berlin Philharmonic, it is definitely an innovative devise that combines both music and technology into a user friendly instrument.
//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//sijings-freestyle_turtle
//variables for each turtle
var turtle;
var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;
var turtle7;
var turtle8;
var backgroundt;
var backgroundt2;
var humanF;
var r=[250,249,237,122,250,219,216];//array of color where each turtle will
var g=[222,223,215,137,224,166,131];//take individual color from the array
var b=[111,134,146,80,190,165,115];
var anglechange1=7;
var length1=10;
function setup() {
createCanvas(480, 480);
background(22,59,97);
turtle = makeTurtle(width-20, 40);
turtle1 = makeTurtle(width-39,60);
turtle2 = makeTurtle(width-150, 40);
turtle3 = makeTurtle(width-169,60);
turtle4 = makeTurtle(40, height/2-40);
turtle5 = makeTurtle(width-40, 40);
turtle6 = makeTurtle(width-100, 110);
turtle7 = makeTurtle(width-120, 150);
turtle8 = makeTurtle(width-170, 50);
backgroundt = makeTurtle(width-100, height-50);
backgroundt2 = makeTurtle(100,50);
humanF = makeTurtle(80,120);
//moon
turtle2.penDown();
turtle2.setColor(color(r[2],g[2],b[2]));
turtle2.setWeight(2);
turtle2.left(50);
for (var i=0; i<30;i++){
turtle2.right(anglechange1);
turtle2.forward(length1);
}
turtle2.right(120);
turtle2.forward(2*length1);
for (var i=0; i<7; i++){
turtle2.left(10);
turtle2.forward(2*length1);
}
turtle2.left(15);
turtle2.forward(length1);
turtle2.left(15);
turtle2.forward(length1);
//for stairs
turtle4.penDown();
turtle4.setWeight(5);
for (var i = 0; i < 10; i++) {
turtle4.setColor(color(random(r[3]-20,r[3]+20),g[3],b[3]));
turtle4.right(90);
turtle4.forward(10);
turtle4.right(10);
turtle4.forward(10);
turtle4.left(10);
turtle4.forward(10);
turtle4.left(90);
turtle4.forward(40);
}
//human figure that stands on the stair
humanF.setColor(color(224,134,143));
humanF.setWeight(3);
for (var i = 0; i<8; i++){
humanF.right(20);
humanF.forward(5);
}
humanF.left(50);
humanF.forward(5);
humanF.left(90);
humanF.forward(15);
humanF.left(50);
humanF.forward(25);
humanF.left(50);
humanF.forward(5);
humanF.right(50);
humanF.forward(5);
humanF.right(50);
humanF.forward(5);
humanF.right(120);
humanF.forward(5);
humanF.right(120);
humanF.forward(5);
humanF.right(250);
humanF.forward(5);
humanF.left(25);
humanF.forward(15);
humanF.right(7);
humanF.forward(25);
humanF.left(17);
humanF.forward(5);
humanF.left(17);
humanF.forward(5);
humanF.left(17);
humanF.forward(20);
humanF.left(17);
humanF.forward(20);
humanF.left(27);
humanF.forward(5);
humanF.right(90);
humanF.forward(5);
humanF.right(20);
humanF.forward(5);
humanF.right(20);
humanF.forward(5);
humanF.right(20);
humanF.forward(5);
humanF.left(100);
humanF.forward(18);
humanF.left(70);
humanF.forward(10);
humanF.right(20);
humanF.forward(5);
humanF.right(50);
humanF.forward(3);
humanF.right(100);
humanF.forward(10);
humanF.left(10);
humanF.forward(5);
humanF.left(10);
humanF.forward(5);
humanF.right(110);
humanF.forward(5);
humanF.left(10);
humanF.forward(22);
humanF.left(80);
humanF.forward(15);
humanF.right(89);
humanF.forward(15);
humanF.left(5);
humanF.forward(15);
humanF.right(5);
humanF.forward(15);
humanF.left(5);
humanF.forward(15);
humanF.right(5);
humanF.forward(15);
humanF.right(5);
humanF.forward(5);
humanF.left(45);
humanF.forward(5);
for (var i=0; i<6; i++){
humanF.right(16);
humanF.forward(5);
}
}
function draw() {
turtle.penDown();
turtle1.penDown();
//below are patterns around the moon (which can be controlled by mouse X and Y)
for (var i = 0; i < 5; i++) {
turtle.setColor(color(r[0]+i*20,g[0]+i*5,b[0],50));//have 50 at the end for certain transparency
turtle.forward(mouseX/30);
turtle.right(25);
}
for (var i = 0; i < 20; i++) {
turtle1.setColor(color(r[1]-i*2,g[1]-i*5,b[1],100));
turtle1.forward(mouseX/100);
turtle1.right(25);
}
for (var i = 0; i < 20; i++) {
turtle1.setColor(color(r[2]-i*2,g[2]-i*5,b[2],100));
turtle1.forward(5);
turtle1.right(25);
}
//for drawing the background (two random generated lines)
for (var i = 0; i < 20; i++) {
backgroundt.setColor(color(r[2]-i*2,g[2]-i*5,b[2],20));
backgroundt.forward(random(0,20));
backgroundt.right(25);
}
for (var i = 0; i < 20; i++) {
backgroundt2.setColor(color(r[4],g[4],b[4],50));
backgroundt2.forward(random(0,20));
backgroundt2.left(25);
}
for (var i = 0; i < 20; i++) {
turtle5.setColor(color(r[4],g[4],b[4],30));
turtle5.forward(mouseX/50);
turtle5.right(25);
}
for (var i = 0; i < 20; i++) {
turtle6.setColor(color(r[5],g[5],b[5],10));
turtle6.forward(mouseX/50);
turtle6.right(25);
}
for (var i = 0; i < 20; i++) {
turtle7.setColor(color(r[6],g[6],b[6],30));
turtle7.forward(mouseX/30);
turtle7.right(25);
}
for (var i = 0; i < 20; i++) {
turtle8.setColor(color(r[7],g[7],b[7],10));
turtle8.forward(mouseX/40);
turtle8.right(25);
}
for (var i = 0; i < 20; i++) {
turtle8.setColor(color(r[7],g[7],b[7],10));
turtle8.forward(5);
turtle8.right(25);
}
}
//below codes are directly from turtle graph lecture from 15-104 website
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}
For this assignment, I wanted to explore the difference between turtles and the drawing method we have used in the past. I want to create a turtle which responds to the cursor. I found that with turtles, I can generate more detailed and “hand-drawing” like drawings. Thus, I have the inspiration coming from the Dreamworks.
I want to build some interactions between a human figure and the moon. But the style here is aimed to be old, decorative, and detailed. Thus, I thought about creating patterns along the moon and patterns in the background. Depending on the concentration of the patterns, different feelings can be generated (sometimes like fog). Some patterns (the ones in the background) is automatically generated. And other patterns (the ones around the moon) is generated according to the users playing with their mouse. By dragging the mouse to the right, the patterns grow. With more manipulations, the patterns become dense. Here is a draft that I had before I code the project.
Here are some versions that my freestyle turtle project generates.
var galaxy
function preload() {
galaxy = loadImage('https://i.imgur.com/W0T1NZk.jpg')
}
function setup() {
createCanvas(360, 280);
background(230);
push()
scale(.3)
image(galaxy,0,0)
pop()
}
function draw() {
fill(255)
noStroke()
ellipse(mouseX,mouseY,3,3)
}
function mousePressed(){
var tur1 = makeTurtle(mouseX,mouseY);
tur1.setColor(color(random(150,255),random(150,255),random(150,255)));
var w = 3;
tur1.setWeight(w)
var side = random(5,20)
for(var i = 0; i < 100; i++) {
tur1.penDown();
tur1.forward(side);
tur1.right(60);
tur1.forward(side);
tur1.right(60);
tur1.forward(side);
tur1.right(60);
tur1.forward(side);
tur1.right(60);
tur1.forward(side);
tur1.right(60);
tur1.forward(side);
tur1.penUp();
tur1.right(110);
tur1.forward(side*.8);
side *= 0.9;
w *= 0.7
tur1.setWeight(w);
tur1. right(50)
}
}
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}
For this project on adapting turtles, I created a galaxy where the user is able to create stars and planets, the planets made are a similar turtle to the spiral one made in lab but these are hexagons that spiral in on each other and get smaller and lighter as they go.
For this assignment, I chose the work Mesa Musical Shadows because it both serves as an interactive art project and also a media that actually produces real music. It allows the audience to engage in spontaneous exploration, play, and even compose their own music. The piece was created for th
e Mesa Arts Centre, Arizona, known to be the sunniest state. This piece is created by Montréal’s venerable Daily tous les jours studio. It is installed in the north plaza at the Mesa Arts Center in Arizona. Mesa Musical Shadoes have four modes which will change according to the four different time periods (Morning, midday, evening and night) of the day. This is controlled by a MaxMSP patch linking Arduino Mega boards via OSC. Most sounds here were composed by sound designer David Drury to reflect varying atmospheres and — pragmatically — shadow lengths throughout the day. The installation’s 47 sensors are run through six control nodes, comprised of an Arduino Mega, ethernet shields, and custom connector shields – each of which is protected in a waterproof enclosure, placed underneath the tiling. Each sensor unit has a custom PCB with a light sensor on top and an LED on its bottom. The music is coded to the sensors, for nighttime illumination and the more sensitive gear (computers, amplifiers, etc.) is all installed in the museum.
Sensors Being Connected to Computers | 2016The Structure of the Sensor | 2016
A normal sensor will be easy to create for anyone who owns some coding skill, however, what Mesa Musical Shadows is manifested by creator’s artistic sensibilities of audiences’ relationship with the artwork. Quoted from “Creative Application Networks”, “From simple post-it notes to fully interactive mats, we brought different prototypes on site to get direct feedback and help refine the project … These consultations helped us figure out what the project’s essence had to be and hopefully, the results honor that process and reflect the community’s various contributions.”
For this project I initially wanted to create a sort of game where a line would drawing in different directions randomly and you could click around the screen to change the direction it travels.
However, the more focused I became on making it like a game interface, the further I felt it strayed from the project. I took a step back and decided to instead create a more abstract piece that random flowed across the screen.
I added multiple lines starting from the same point to fill up the page and create a dynamic image. Then I wanted to play around with colors and changing tones. I made it so that as the line drew down the page, it would automatically darken.
However, as you can see on the right image, the user can also speed up the progression of the darkening by clicking the screen as well to darken the line color.
I also tried thinning the line weight, but for the final i decided to go with a medium line weight between the original and the tested thinner line:
//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Assignment-10-B
function turtleLeft(d) {
this.angle -= d;
}
function turtleRight(d) {
this.angle += d;
}
function turtleForward(p) {
var rad = radians(this.angle);
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}
function turtleBack(p) {
this.forward(-p);
}
function turtlePenDown() {
this.penIsDown = true;
}
function turtlePenUp() {
this.penIsDown = false;
}
function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}
function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}
function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}
function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}
function turtleSetColor(c) {
this.color = c;
}
function turtleSetWeight(w) {
this.weight = w;
}
function turtleFace(angle) {
this.angle = angle;
}
function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
//rainbow shape
function makeShape(turtle) {
//make one hexagon
for(i = 0; i < 6; i++) {
//rainbow colors
var r = random(100, 255);
var g = random(100, 255);
var b = random(100, 255);
turtle.setColor(color(r, g, b));
turtle.setWeight(1);
turtle.forward(50);
turtle.left(60);
}
}
//cream shape
function makeShape2(turtle2) {
//make one shape
for(i = 0; i < 8; i++) {
turtle2.setColor(color(249, 237, 217));
turtle2.setWeight(2);
turtle2.forward(60);
turtle2.left(80);
}
}
//perriwinkle shape
function makeShape3(turtle3) {
for(i = 0; i < 8; i++) {
turtle3.setColor(color(172, 195, 249));
turtle3.setWeight(1);
turtle3.forward(60);
turtle3.left(100);
}
}
function setup() {
createCanvas(480, 480);
background(0);
//name spiral motion
var spiral = makeTurtle(200, 170);
var shape2 = makeTurtle(320, 300);
var shape3 = makeTurtle(120, 420);
var angle = random(60, 140)
var positionX = 0;
//make a bunch of repeating shapes
for(var i = 0; i < 80; i++) {
makeShape(spiral);
spiral.penUp();
spiral.right(angle);
spiral.forward(positionX);
//draw again
spiral.penDown();
//increase space inbetween initial shapes the more you draw them
positionX += 1;
}
for(var j = 0; j < 10; j++) {
makeShape2(shape2);
shape2.penUp();
shape2.right(angle);
shape2.forward(6);
shape2.penDown();
}
for (var k = 0; k < 80; k++ ) {
makeShape3(shape3);
shape3.penUp();
shape3.right(angle * .5);
shape3.forward(6);
shape3.penDown();
}
}
function draw() {
}
function mouseClicked() {
setup();
}
I really like making spirographs. As a kid I doodled them all the time and a lot of the projects I’ve done for this class include spirographs but I like that I’m learning how to draw them through different techniques: this week via turtle graphics.
Slight alterations to the spirographs’ angles and spaces are changed when the mouse is clicked.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
