Category: SectionA

LO-04

Stephen Malinowski is a California based software engineer and musician.
He is best known for creating The Music Animation Machine, which is a project that sets graphic visuals to music. This project is very helpful for musicians and nonmusicians alike: for nonmusicians, it gives them a changing visual to go along with orchestra music, which helps keep them engaged. For musicians, this graphic shows all of the notes and rhythms in a piece of music, so it helps them see visually how their part fits in with the rest of the orchestra. Throughout the piece, different shapes and colors appear on the screen. The shapes represent which instrument is playing the line. Ellipses denote flutes, cymbals, and tam-tam; octagons for clarinet and bass clarinet; stars for double reeds; rectangles represent brass, timpani, guiro, and bass drum; and rhombuses are used to represent strings. My guess is that some symbols are also used for percussion because it is fairly clear in a piece of music if the listener is hearing a flute or cymbals, so using the same symbol to represent these two is more distinguishable than using the same symbol for, say, flute and clarinet. The length of all of the shapes represent the note length, or the rhythm. The color represents pitch, with blue as the tonic (the home key of the piece). While Malinowski did not have much artistic wiggle room with animating a piece that someone else composed, he did get to choose how he would animate it in terms of shapes and colors. His creative senses, therefore, are manifest in his animation choices.

Malinowski has animated several orchestral pieces. The piece I chose to link below is his animation of Igor Stravinsky’s The Rite of Spring. In this piece, the recording that Malinowski uses is a digitally performed version by Jay Bacal. Bacal used instrument software by Vienna Symphonic Library to make his recording. While Malinowski does use live orchestral recordings in many of his animations, The Rite of Spring is not yet in the public domain, meaning that licensing can be challenging. Malinowski says on his YouTube channel that he used Bacal’s version because it was the first recording that he was able to get permission to use. He notes that the benefit of using a synthetic recording is that it is note perfect and the articulations and rhythms line up, which increases clarity and creates a better study recording for students who are learning the piece. While nothing will replace the musicality and phrasing of a live orchestra, all orchestral recordings are subject to human error.

The Rite of Spring was a revolutionary and controversial piece when it was premiered. The piece is about a sacrificial ritual and includes musical dissonance and varying rhythm and time signatures that incited a riot during its premier. It is such an involved piece that this is a valuable resource for students who need to learn and distinguish their part while listening to a recording, as well as anyone who would like a better understanding of the piece.

The Rite of Spring, Part 1 (Igor Stravinsky)

Animation by Stephen Malinowski

Recording by Jay Bacal

A list of music animation techniques that Malinowski uses

A list of colors that Malinowski uses to represent pitch


Project-03: Dynamic Drawing

project-03-dynamicDrawing 
// Lauren Kenny (lkenny)
// Project 3 - Dynamic Drawing
// Section A

var xpos = 10;
var ypos = 10;
var xstep = 30;
var ystep = 30;
var r = 200;
var g = 10;
var b = 10;
var d = 5;

function setup() {
    createCanvas(450, 600);
    frameRate(35);
    background(220);
}

function draw() {
    //background gets lighter as you move your mouse down
    background(0+mouseY*0.1);
    //color changes with mouse position
    r = .5*mouseX;
    g = .5*mouseY;
    b = 75;
    //creates grid of circles
    //color and size change with mouse position
    noStroke();
    fill(r, g, b);
    for (let j = 0; j < width; j++) {
        for (let i = 0; i < height; i++) {
            ellipse(xpos+(xstep*j), ypos+(ystep*i), (d+mouseY*0.02), (d+mouseY*0.02));
        }
    }
    //ellipse moves with mouse
    stroke(r, g, b);
    noFill();
    ellipse(mouseX, mouseY, 150, 150);
    //changes the horizontal spacing between the circles
    if (xstep > 40) {
        xstep = 30
    }
    if (30<xstep<40) {
        xstep = xstep + 1
    }      
}

Looking Outwards-03

https://n-e-r-v-o-u-s.com/projects/albums/kinematics-dress-1/

https://n-e-r-v-o-u-s.com/projects/albums/kinematics-cloth/

Kinematic Dress

This project was created by Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg) in 2014. They created and used a parametric body modeling software along with another digital tool to digitally create the pattern for this dress and then used a complex physics algorithm to digitally “fold” the dress to print in one piece. The result is a 3D printed dress that can move and flow with you. Somehow they were able to take a material so rigid and structured and transform it into something fluid and soft. It reminded me of looking at a marble statue that was carved to show soft flowing fabric. This is not only a huge achievement for design, but also an achievement for physical objects/materials and the ways that we can use them in the future. I admire their focus on materials and passion for taking a material and transforming it into something totally different. This project inspires me to rethink materials and the possibilities for what they can do. I don’t fully understand the algorithms and computation they used to create this project, but I appreciate their user focused approach through the parametric body modeling application. They are both inspired by patterns found in nature and that shines through the patterning in the dress and the algorithm for how each of the pieces hinge on one another. Patterning in nature can teach us a lot and I admire how they utilized that in this piece.

Project-03

sketch3
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(240, 156, 215);
	var h = min(mouseY/3, 50);
	var c = min(mouseY/2, 255);
	var w = max(min(mouseY/3, 50), mouseX/6);
	noStroke();
    fill(c); 
    //perimeter circles
    ellipse(30, 25, w, h);
    ellipse(30, 75, w, h);
    ellipse(30, 125, w, h);
    ellipse(30, 175, w, h);
    ellipse(30, 225, w, h);
    ellipse(30, 275, w, h);
    ellipse(30, 325, w, h);
    ellipse(30, 375, w, h);
    ellipse(30, 425, w, h);
    ellipse(138, 25, w, h);
    ellipse(246, 25, w, h);
    ellipse(354, 25, w, h);
    ellipse(462, 25, w, h);
    ellipse(570, 25, w, h);
    ellipse(570, 75, w, h);
    ellipse(570, 125, w, h);
    ellipse(570, 175, w, h);
    ellipse(570, 225, w, h);
    ellipse(570, 275, w, h);
    ellipse(570, 325, w, h);
    ellipse(570, 375, w, h);
    ellipse(570, 425, w, h);
    ellipse(138, 425, w, h);
    ellipse(246, 425, w, h);
    ellipse(354, 425, w, h);
    ellipse(462, 425, w, h);

	//lots of layered rectangles
	push();
	translate(300, 225);
	rotate(radians(mouseX));
	rectMode(CENTER);
	fill(214, 33, 235, mouseX/2); //purple
	rect(0, 0, mouseX, mouseX);
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-20), (mouseX-20));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-40), (mouseX-40));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-60), (mouseX-60));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-80), (mouseX-80));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-100), (mouseX-100));
    fill(214, 33, 235, mouseX/2); //purple (start repeat)
	rect(0, 0, (mouseX-120), (mouseX-120));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-140), (mouseX-140));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-160), (mouseX-160));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-180), (mouseX-180));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-200), (mouseX-200));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-220), (mouseX-220));
	fill(214, 33, 235, mouseX/2); //purple (round 3)
	rect(0, 0, (mouseX-240), (mouseX-240));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-260), (mouseX-260));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-280), (mouseX-280));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-300), (mouseX-300));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-320), (mouseX-320));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-340), (mouseX-340)); 
	fill(214, 33, 235, mouseX/2); //purple (round 4)
	rect(0, 0, (mouseX-360), (mouseX-360));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-380), (mouseX-380));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-400), (mouseX-400));
	fill((236-(mouseX/2)), 33, 101, mouseX/2); //color will change on a scale between hot pink and dark blue
	rect(0, 0, (mouseX-420), (mouseX-420));
	pop();

    //curves
	noFill();
	stroke(255);
	strokeWeight(3);
	bezier(0, 0, 200, mouseY, 400, mouseY, 600, 0);
	bezier(0, 0, 200, (mouseY - 20), 400, (mouseY - 20), 600, 0);
	bezier(0, 0, 200, (mouseY - 40), 400, (mouseY - 40), 600, 0);
	bezier(0, 0, 200, (mouseY - 60), 400, (mouseY - 60), 600, 0);
	bezier(0, 0, 200, (mouseY - 80), 400, (mouseY - 80), 600, 0);
	bezier(0, 450, 200, (450 - mouseY), 400, (450 - mouseY), 600, 450);
    bezier(0, 450, 200, (470 - mouseY), 400, (470 - mouseY), 600, 450);
    bezier(0, 450, 200, (490 - mouseY), 400, (490 - mouseY), 600, 450);
    bezier(0, 450, 200, (510 - mouseY), 400, (510 - mouseY), 600, 450);
    bezier(0, 450, 200, (530 - mouseY), 400, (530 - mouseY), 600, 450);

}

I made this to experiment with different shapes, colors, and shapes. My original idea had a circle in the center instead of the rectangle, but after writing it, I realized that you couldn’t tell that the circle was rotating. I tried adding some lines across the circle to get the effect, but then I tried changing the shape and I liked that a lot more. I was also still able to include ellipses along the perimeter of the canvas. For the colors, I used a color reference website and started layering colors that I liked. Once I settled on the ones that I would use, I experimented with the order and the fade.

LO-03

Bearth & Deplazes Architects designed a building for a winery that was built using a robotic production method that a team developd for this purpose. The technology helps to lay 20,000 bricks at exact measurments for both practical and design purposes. From a practical standpoint, the building allows for a very specific amount of natural light and airflow permeation, considering that a large room in the building is used for fermenation, but that there is also a terrace at the top of the building for wine tastings and social events. The architects are also able to utilize this design precision for their artistic senses as well. They program the bricks to be rotated in a way that looks like grapes. The vertical concrete structural pillars look like a basket, so the artists say that the side of the building is intended to replicate a basket of grapes.
I selected this work because I like how the building combines art and practicality: the winey could have built any box-shaped building for their fermentation room, but they chose something a lot more interesting and visually appealing.

A winery in Switerland; Bearth & Deplazes Architects and Gramazio & Kohler (2006)

LO 3

What was really special about the piece, Astrocyte, made in 2017 was the simple fact that it was 3D printed. It brings back memories of when I was in high school and decided to do a 3D printed project for my IB Math Project. This was the first time I used a 3D printer and it was exhilarating. What is inspirational about this piece specifically is how pretty it looks. It reminds me of the Corning Museum of Glass (CMOG), where I spent a good amount of my childhood back. I would love to go see this display, and feel like I could sit there for hours and reminisce. 3D printing has become much more common than it was when I first used, it and it is really neat to see how it is growing. I imagine it took a lot of moving pieces to put this together. They had many people in various teams, such as technology, design, and research help create this project. The coolest part, is the technique used, one I have mentioned in one of my earlier inspirations, which is the combination of light changing according to movement, and sounds and vibrations playing a role in that as well.

Astrocyte

Project-03-Dynamic-Drawing

sketchDownload
var colorx=20
function setup() {
  createCanvas(600, 450);
  max_distance = dist(0, 0, width, height);//the distance of the canvas
}

function draw() {
  //measure how far mouse if from the center of canvas
  let distanceFromCenter= dist(width/2,height/2,mouseX,mouseY);
  var colorx = distanceFromCenter;
  background(116,colorx,255);//the mouse as a component of the background's color
  //set the distance of each ellipse
  for (let x = 0; x <= width; x += 15) {
    for (let y = 0; y <= height; y += 15) {
      let size = dist(mouseX, mouseY, x, y);//size is decided by the mouse location 
      size = (size / max_distance) * 40;
      fill(22,255,colorx);//the mouse as a component of the ellipse's color
      noStroke();
      ellipse(x, y, size, size);
    }
  }
}

Move the mouse to update the sizes of ellipses in both horizontal and vertical direction. The color of ellipses and the background color of canvas also varies based on the mouse’s location.

LookingOutwards-03

In 2019, Ying Gao, a conceptual fashion designer and media professor, released a robotic clothing collection that can reacted to its surroundings. The collection, entitled  “flowing water, standing time”, response to the essence of movement by rippling, expanding and contracting as if they are live creatures. Her project questions traditional assumptions about clothing by combining robotics and fine fabrics to create performative pieces that transform their physical contour. The color and light sensors embedded in the fabric, with a tiny camera linked to a raspberry PI computer, are used to gather information about their surrounding. Data are sent to a series of actuators and magnets that is interlaced with the fabric to create movement. The clothes have a fluid and chameleon-like appearance, embodying the complexity and rhythm of the ever-changing surrounding. 

Project 3: Dynamic Drawing

sketch.sl4Download
// Sarah Luongo
// Section A

function setup() {
    createCanvas(600, 450);
}

function draw() {
// To change background according to positon of mouse
var bkgrR = min(mouseY/4, 45);
var bkgrB = min(mouseX/4, 45);
var bkgrG = (bkgrR-bkgrB);

// To constrain motion of stars within canvas
var motionX = map(mouseX, 0, width, 0, 15);
var motionY = map(mouseY, 0, height, 0, 15);

// To change colors of stars	
var r = max(mouseX/1.8, 150);
var g = max(mouseY/1.8, 150);
var b = max((mouseY/1.8)-(mouseX/1.8), 150);
	
    // Fourth value gives background transparency - will make all stars have "following circles" that fade as the stars move (easier to see when you move the mouse really fast
    background(bkgrR, bkgrG, bkgrB, 45);
    
    // To get rid of cursor
    noCursor();

    // This circle is the new cursor shape
    fill(255, 255, 51); // yellow
    circle(mouseX, mouseY, 3);

    // Stars
    fill(r, g, b);
    circle(motionX, motionY, 8 * mouseX/560);
    circle(motionX + 320, motionY + 420, 6 * (mouseX/560 + mouseY/410));
    fill(r - 47, g - 27, b - 143);
    circle(motionX + 340, motionY + 19, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 233, motionY + 385, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 19, motionY + 347, 8 * (mouseX/560 + mouseY/410));
    fill(r + 84, g + 119, b - 78);
    circle(motionX + 40, motionY + 238, 10 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 405, motionY + 356, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 446, motionY + 395, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 23, motionY + 273, 8 * (mouseX/560 + mouseY/410));
    fill(r + 210 , g - 140, b + 37);
    circle(motionX + 172, motionY + 143, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 204, motionY + 297, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 198, motionY + 189, 10 * (mouseX/560 + mouseY/410));
    fill(r + 32, g + 130, b + 23);
    circle(motionX + 285, motionY + 302, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 534, motionY + 67, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 67, motionY + 45, 7 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 423, motionY + 227, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 367, motionY + 329, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 257, motionY + 348, 10 * (mouseX/560 + mouseY/410));
    fill(r - 190, g + 66, b - 15);
    circle(motionX + 73, motionY + 143, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 143, motionY + 324, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 300, motionY + 225, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 558, motionY + 420, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 340, motionY + 445, 9 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 510, motionY + 267, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 304, motionY + 130, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 229, motionY + 38, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 512, motionY + 106, 8 * (mouseX/560 + mouseY/410));
    fill(r - 190, g + 66, b - 15);
    circle(motionX + 429, motionY + 145, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 400, motionY + 73, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 172, motionY + 430, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 84, motionY + 443, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 117, motionY + 233, 10 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 545, motionY + 357, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 584, motionY + 167, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 448, motionY + 332, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 515, motionY + 207, 6 * (mouseX/560 + mouseY/410));
}

I’m very fascinated by stars and one of my favorite albums to listen to is an astronomy album by Sleeping At Last. I was inspired by this album, so I wanted to make this project kind of like space, but a little more fun. I wasn’t quite sure how to make a star shape, so I decided to makes circles as stars. My sketch is below:

Project 3: Dynamic Drawing

For this project, I wanted to portray the vibrancy and health of a flower depending on the amount of water that is in a vase. The more water there is in the vase (controlled by your mouse’s Y value, the bigger and more colorful the flower appears to be!

sketchDownload
// Susie Kim
// Section A


function setup() {
    createCanvas(450, 600);
	background(255, 218, 185);
}

function draw() {
	// define variables
	var setVal = mouseY/6;
	var waterOpacity = mouseY/13;
	var leafVal = mouseY/15;
	var flowerVal = mouseY/20;
	if (setVal >= 150) {
		setVal = 150;
	}
	background(255, 218, 185);
	//table
	fill(255, 178, 102);
	rect(0, 525, 500, 100);
	// vase water
	fill(102, 178, 255, 150 - waterOpacity);
	noStroke();
	rect(150, 350 + setVal, 150, 175 - setVal, 20, 20);
	// flower stem that changes color
	stroke(0, 204- setVal, 0);
	strokeWeight(6);
	line(225, 200, 225, 520);
	// vase itself
	strokeWeight(4);
	stroke(51);
	noFill();
	rect(150, 275, 150, 250, 20, 20);
	// flower!
		// flower petals
    noStroke()
	fill(255 - setVal, 153 - setVal, 204 - setVal);
	ellipse(185, 170, 55, 55);
	ellipse(265, 170, 55, 55);
	ellipse(225, 140, 55, 55);
	ellipse(205, 215, 55, 55);
	ellipse(245, 215, 55, 55);
	    // flower center that expands
	fill(255 - setVal, 255 - setVal, 0);
	if(flowerVal >= 25) {
		flowerVal = 25;
	}
	ellipse(225, 180, 65 - flowerVal, 65 - flowerVal);
	    // leaves that grow
	fill(0, 204- setVal,0);
	if (leafVal >= 25) {
	    leafVal = 25;
	}
	ellipse(250, 325, 70 - leafVal, 40 - leafVal);
	ellipse(200, 325, 70 - leafVal, 40 - leafVal);
}