Author: jdbrown@andrew.cmu.edu

Looking Outward 6: Random

Randomness in music is becoming increasingly “in vogue” recently. There is an entire genre of music called “aleatoric” music” wherin some or all parts of the music-making process are left to chance.
One of the principle issues with this type of music is deciding how to notate it. Standard music notation creates a shared language for all practitioners of the artform, but in the world of aleatory, much of the symbolic representations of “sound over time,” become more literal. Rather than a quarter note, a composer may just write “continue for about twenty seconds.” Abstract and unconventional notation is rising in popularity, as composers attempt to find new territories of sonic expression, and aleatory is a composer’s playground in this realm of exploration.

Attached is a piece by one of the most famous contemporary compositional explorers in the modern era: Karlheinz Stockhausen.

Jdbrown – Project 6 – Nature Clock

Actual Clock-Jdbrown

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Project 6: Clock
// Section C

var slowVel = 1.0;
var medVel = 1.5;
var speedyVel = 2;

function setup () {
    createCanvas (480, 480);
}

function draw () {
    background (25, 150, 150, 150);

    var S = second ();
    var M = minute ();
    var H = hour ();

    // setting up the Sun (measurement of seconds);

    push ();
    stroke (255);
    strokeWeight (2.5);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 320, 320, radians (0), radians (45));
    arc (0, 0, 320, 320, radians (55), radians (100));
    arc (0, 0, 320, 320, radians (110), radians (155));
    arc (0, 0, 320, 320, radians (165), radians (210));
    arc (0, 0, 320, 320, radians (220), radians (265));
    arc (0, 0, 320, 320, radians (275), radians (310));
    arc (0, 0, 320, 320, radians (320), radians (350));
    fill (200, 180, 70);
    ellipse (0, 0, 200 + (H * 3), 200 + (H * 3));   // draws the sun
    fill (255);
    ellipse (0, 0, S + 75, S + 75);     // draws the white ball in the sun, growing every second
    pop ();

    push ();
    stroke (255);
    strokeWeight (1.5);
    translate (width, 0);
    rotate (radians (S * -6));
    fill (0, 0);
    arc (0, 0, 300, 300, radians (0), radians (45));
    arc (0, 0, 300, 300, radians (55), radians (100));
    arc (0, 0, 300, 300, radians (110), radians (155));
    arc (0, 0, 300, 300, radians (165), radians (210));
    arc (0, 0, 300, 300, radians (220), radians (265));
    arc (0, 0, 300, 300, radians (275), radians (310));
    arc (0, 0, 300, 300, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();

    push ();
    stroke (255);
    strokeWeight (1);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 280, 280, radians (0), radians (45));
    arc (0, 0, 280, 280, radians (55), radians (100));
    arc (0, 0, 280, 280, radians (110), radians (155));
    arc (0, 0, 280, 280, radians (165), radians (210));
    arc (0, 0, 280, 280, radians (220), radians (265));
    arc (0, 0, 280, 280, radians (275), radians (310));
    arc (0, 0, 280, 280, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();
    
    // making the scenery, measuring hours;

    if (H >= 12) {

    noStroke();
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (0, 0 - 15, 150, 400); // filter (top)
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (0, height - 75, 200, 400);    // filter (bottom)
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (200, 150, 200, 400);    // filter (side)
    fill (25, 150, 150);
    ellipse (365, 190, 105, 105); // curve
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    ellipse (365, 190, 50, 50); // curve
    fill (40 - (H * 3), 75 - (H * 3), 200, 150);
    ellipse (0, height, 400, 500);  // waterfall
    fill (67 - (H * 3), 75 - (H * 3), 100, 150);
    ellipse (0, height, 300, 300);  // waterfall shadow
    fill (100 - (H * 3), 75 - (H * 3), 100, 150);
    ellipse (0, height, 120, 150);  // waterfall shadow

    }

    if (H < 12) {

    noStroke();
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (0, 0 - 15, 150, 400); // filter (top)
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (0, height - 75, 200, 400);    // filter (bottom)
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (200, 150, 200, 400);    // filter (side)
    fill (25, 150, 150);
    ellipse (365, 190, 105, 105); // curve
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    ellipse (365, 190, 50, 50); // curve
    fill (40 + (H * 3), 75 + (H * 3), 200, 150);
    ellipse (0, height, 400, 500);  // waterfall
    fill (67 + (H * 3), 75 + (H * 3), 100, 150);
    ellipse (0, height, 300, 300);  // waterfall shadow
    fill (100 + (H * 3), 75 + (H * 3), 100, 150);
    ellipse (0, height, 120, 150);  // waterfall shadow

    }

    // drawing little bird boi;

    birdBoi();


    
   
        

    // drawing sky stuff, measuring minutes;
    
    var cloudX = -100;

    fill (255 - (M * 3), 200);
    ellipse (cloudX + slowVel, 50, 200, 25);
    ellipse ((cloudX + medVel), 90, 200, 25);
    ellipse ((cloudX + speedyVel) - 250, 150, 200, 25);
    

    slowVel += 1 + (M / 10);
    medVel += 1.2 + (M / 5);
    speedyVel += 1.5 + (M / 2.5);

    // making sure that clouds will respawn on the other side;

    if (cloudX + slowVel > width + 100) {
        cloudX = -200;
        slowVel = 1;
    }
    if (cloudX + medVel > width + 100) {
        cloudX = -200;
        medVel = 1.2;
    }
    if (cloudX + speedyVel > width  + 400) {
        cloudX = -200;
        speedyVel = 1.5;
    }
}

// making the bird boy

function birdBoi () {

    var H = hour();
    var M = minute ();
    var S = second ();

    for (var i = 0; i < 20; i++) {
        push ();
        translate (30, 250);
        rotate (radians (i * 6));
        rotate (radians (i));
        stroke (0);
        strokeWeight (2.5);
        line (0, 0, 10 + i, 10 + i);
        pop ();
    }

    fill (0);
    triangle (30, 245, 75, 245, 35, 255);  // beak
    fill (255);
    ellipse (30, 270, 30, 30);  // body
    ellipse (35, 250, 25, 25);  // head
    fill (200);
    ellipse (25, 270, 18, 25);  // body shadow
    fill (200);
    ellipse (32, 251.5, 18, 20);  // head shadow
    fill (0);
    ellipse (40, 248, 5, 5);    // eye

    for (var i = 0; i < 20; i++) {
        push ();
        translate (20, 255);
        rotate (radians (i * 6));
        rotate (radians (i));
        stroke (0);
        strokeWeight (2.5);
        line (0, 0, 10 + i, 10 + i);
        pop ();
    }
}

For this project, I had a lot of different ideas. Most of them were HORRIBLE. But I settled on a peaceful scene, a hummingbird-boi partying and communing with nature.

The “clock” portion of the design is as follows:

Seconds are measured by the rotation of the sun’s rays, as well as the little white ball in the middle of the sun.

Minutes are measured by the clouds’ speed and color.

Hours are measured by pigment changes in the physical landscape (bright, warm for morning and dark blues for night).

JDBROWN – Project 5 – Textile Pattern

For this project, I took inspiration from the color gradient lab that we did on Tuesday. I wanted to experiment with more textured shapes than I had been using previously, and I think this turned out really interesting.

Jdbrown Proj 5

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 5: Wallpaper

var i = 0;
var fuck = 150;
var shit = 50;
var flash = 10;

function setup () {
    createCanvas (600, 480);
    stroke (255);
    strokeWeight (3);
}

function draw () {

    background (255);
 
    for (var y = 50; y < height + 50; y += 100) {
        rect (x + 50, y - 25, 50, 50);
        
        for (var x = 50; x < width + 50; x += 100) {
            fill (y/2, x/2, 0, x*y);
            ellipse(x - 25, y - 10, 25, 150);   // vertical grid
            ellipse(x - 25, y - 10, 50, 50);    // big circles at each nexus point
            ellipse(x + 25, y + 45, 20, 20);    // little dot in the center of each square
            ellipse(x, y, 30, 30);              // lower bump
            ellipse(x - 25, y - 10, 30, 30);    // lower bump
            ellipse(x - 10, y - 10, 35, 35);    // bee body (big)
            ellipse(x - 10, y - 10, 115, 15);   // horizontal grid
            ellipse(x - 25, y - 10, 25, 25);    // central circle
        }
    }

    for (var y = 0; y < height+25; y += 50) {       // Draws columns (just Y)
        for (var x = 0; x < width+25; x += 50) {    // Draws rows (just X)
            fill(150, 200);
            ellipse(x + 1000, y, 25, 25);
        }
    }
    for (var  x = 5; x < width + 25; x += 10) {
        for (var y = 5; y < height + 25; y += 10) {
        fill(255, 120);
        ellipse(x, y, 5, 5);
        }
    }
}

JDBROWN-Looking Outwards-05

https://www.instagram.com/extraweg/

Posted by The Content Zone on Saturday, September 9, 2017

Here is a link to a video that continuously amazes me. It’s some sort of exercise in computational animation and the physics associated with realistic movement. It deals with smearing animation, bulging, puckering, and stretched texture. There’s something wildly unsettling about this video (probably the eyes), but I love it and I have no idea how people made this happen. Partially, animation has always astounded me because EVERYTHING has to be created from scratch.

Imagine the person who had to program the marmalade man spreading himself all over a piece of toast? What goes through their mind?

Josh

jdbrown – Project 4: String Theo– I mean “Art”

Jdbrown-StringArt

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

function draw () {
        background (0);
        strokeWeight (1);
        fill (255);
        rect (10, 10, 580, 380);
        for (var i = 0; i < 60; i++) {
            drawMarker (i);
        }

}

function drawMarker (i) {

        push ();                    // Exterior wheel
        translate (200, 200);
        rotate (radians (i * 4));
        rotate (radians (i));
        line (150, 0, -200, -400);
        pop ();

        push ();                    // Exterior wheel (circle outline)
        translate (200, 200);
        rotate (radians (i * 1));
        fill (0);
        ellipse (150, 3, 5, 5);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (main)
        rotate (radians (i /2));
        line (300, 0, 600, 400);
        pop ();

        push ();
        translate (50, 200);       // weird mountainthing (darker)
        rotate (radians (i /3));
        line (300, 0, 600, 400);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darkest)
        rotate (radians (i /5));
        line (300, 0, 600, 400);
        pop ();

        push ();                   // Inner wheel
        translate (200, 200);
        rotate (radians (i * 5));
        line (75, 0, 100, 400);
        pop ();

        push ();                    // Inner wheel (circle outline)
        translate (200, 200);
        rotate (radians (i * 3));
        fill (0);
        ellipse (75, 3, 5, 5);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (small, main)
        rotate (radians (i));
        line (225, 0, 300, 200);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darker, main)
        rotate (radians (i / 2));
        line (225, 0, 300, 200);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darkest, main)
        rotate (radians (i / 4));
        line (225, 0, 300, 200);
        pop ();

        push ();                    // vision lines
        var c = 1;
        translate (200, 200);
        rotate (radians (i * 6));
        line (0, 0, mouseX / 2, mouseY);
        line (0, 0, mouseY / 10, mouseX / 4);
        stroke (255);
        line (0, 0, mouseY / 2, mouseX);
        pop ();

        var R = mouseX;
        var G = mouseY;
        var B = mouseX;

        fill (R, G, B);        // mountain eye (iris)
        ellipse (200, 200, 30, 30);
        fill (0);                  // mountain eye (pupil)
        ellipse (200, 200, 15, 15);
        fill (255);                // mountain eye (pupil)
        ellipse (195, 195, 5, 5);
}

For my String Art project, I was really inspired by the lecture this morning  (Friday, Sept. 22). I ended up making this weird all-seeing eye, spreading its illuminati dogma throughout the land. I like it, and you should to.

Josh

Jdbrown – Looking Outward (4 – Sound Arts)

http://www.cmu.edu/news/stories/archives/2017/august/butterfly-sounds.html

This module has got me very excited, since sound art is what I do. As a composer and a music technician, I love the aural world and especially integrating physical computing with sound production. For my post this week, I’m doing some #self-promotion and showing folks a project I worked on last spring. In a class called Experimental Sound Synthesis, I and a bunch of other students created a generative sound installation at the Phipps Conservatory.

We used Pure Data patches running on Raspberry Pi microcomputers to generate and propagate our designs throughout the space.

JDBROWN – Project 3: Pattern Party

So yeah, I know: this project was all “don’t use random elements.”

And I tried that. But no matter how hard I tried, I couldn’t stop playing around with this piece of code. It’s a dynamic pattern-maker, based on the “rect ()” command and mouse locations.

While this program may seem to be very randomly generated, there is actually a lot of user input being taken into consideration.

I have divided the screen into four quadrants. When the mouse enters each of those quadrants, different things happen. Some of these effects include: box trajectory, size of boxes, color of boxes, and more. Also, the user may click at any time to generate boxes at any location on the canvas. One unfortunate thing is that it looks a lot more interesting on a bigger canvas! It resets when the Y variable for the boxes exceeds the canvas, so that’s why it’s a bit awkward in WordPress.

Here are some photos!

I have posted two versions of this program because I did a lot of stuff with it, and I really enjoyed its versatility. Enjoy!

Vanilla pattern-maker:

Jdbrown – p3

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project #3

// Setting up global variables for size and location of drawn shape

var nothingX = 0;
var nothingY = 0;
var bright = 0;
var nothingA = 0;
var nothingZ = 0;

function setup () {
  createCanvas (640, 480);
  background (255);
  stroke (255);
  fill (0);
}

function draw () {

  // Making function draw more quickly (default = 30), so this doesn't take forever;

  var rate = width / mouseY * 4 + 24;
  frameRate (rate);

  // Giving program a 50% chance of drawing one of each shape (variations on rectangle);

  if (random (1) > 0.5) {
    fill (mouseX/2, mouseY/2, random (255));
    rect (nothingX, nothingY, nothingX + random (30), nothingY + random (5));
    rect (nothingX + 30, nothingY + 50 + random (30), nothingX + random (30), nothingY + random (5));
    rect (nothingX + 60, nothingY + 100 + random (30), nothingX + random (30), nothingY + random (5));
  }
  else {
    rect (nothingX, nothingY + random (30), nothingX + random (50), nothingY);
  }

  // Making the program respond to mouse position,
  // Resets when leaving the frame (horizontally);

  nothingX += 5;
  if (nothingX > width) {
    nothingX = 0;
    nothingY += random (50);
  }

  if (mouseX > width/2) {
    nothingX -= 10;
  } else {nothingX += 5;}

  if (nothingX < 0) {
    nothingX = 640;
    nothingY += random (30);
  }

  if (nothingY > height) {
    background (255);
  }

  /* this piece of code makes the rectangles move up or down depending on mouse position;
  if (mouseY > height/2) {
    nothingY += 5;
  }

  if (mouseY < height/2) {
    nothingY -= 5;
  }
  */

  // Resets when leaving the frame (vertically);

  if (nothingY > height) {
    nothingX = 0;
    nothingY = 0;
  }
}

function mousePressed () {

  // When clicked, the program will relocate the "brush" (location at which DRAW is working)
  // to wherever the click occurred (mouse location at click);
  nothingX = mouseX;
  nothingY = mouseY;
}

Random fun stuff version, for example:

Jdbrown – p3

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project #3

// Setting up global variables for size and location of drawn shape

var nothingX = 0;
var nothingY = 0;
var bright = 0;
var nothingA = 0;
var nothingZ = 0;

function setup () {
  createCanvas (640, 480);
  background (255);
  stroke (255);
  fill (0);
}

function draw () {

  // Making function draw more quickly (default = 30), so this doesn't take forever;

  var rate = width / mouseY * 4 + 24;
  frameRate (rate);

  // Giving program a 50% chance of drawing one of each shape (variations on rectangle);

  if (random (1) > 0.5) {
    fill (mouseX/2, mouseY/2, random (255));
    rect (nothingX, nothingY, nothingX + random (30), nothingY + random (5));
    rect (nothingX + 30, nothingY + 50 + random (30), nothingX + random (30), nothingY + random (5));
    rect (nothingX + 60, nothingY + 100 + random (30), nothingX + random (30), nothingY + random (5));
  }
  else {
    rect (nothingX, nothingY + random (30), nothingX + random (50), nothingY);
  }

  // Making the program respond to mouse position,
  // Resets when leaving the frame (horizontally);

  nothingX += 5;
  if (nothingX > width) {
    nothingX = 0;
    nothingY += random (50);
  }

  if (mouseX > width/2) {
    nothingX -= 10;
  } else {nothingX += 5;}

  if (nothingX < 0) {
    nothingX = 640;
    nothingY += random (30);
  }

  if (nothingY > height) {
    background (255);
  }

  if (mouseY > height/2) {
    nothingY += 5;
  }

  if (mouseY < height/2) {
    nothingY -= 5;
  }

  // Resets when leaving the frame (vertically);

  if (nothingY > height) {
    nothingX = 0;
    nothingY = 0;
  }
}

function mousePressed () {

  // When clicked, the program will relocate the "brush" (location at which DRAW is working)
  // to wherever the click occurred (mouse location at click);
  nothingX = mouseX;
  nothingY = mouseY;
}

Thanks,
Josh

 

Jdrown – Looking Outward 2: Generative Type

Here is my Looking Outward for generative art.

I’m really interested in sound-based interfaces, and this is no exception. The on-screen printing is based on the sound produced by the computer, and the type weight is based off how heavy or light (read: textured) the sound is. There are a bunch of these on this guy’s YouTube page, and they all seem to have some sort of sound component. Looking forward, I think it would be really interesting if there were some kinda live version – like the real sounds of a place or an audience affected this drawing. Perhaps instead of a program, we had a laser cutter, who knows.


Josh

Jdbrown – Project 2: Electric Boogaloo

JdbrownProject02

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 2: Face Generation

var faceWidth = 200;
var faceHeight = 150;

function setup () {
    createCanvas (640, 480);
}

function draw () {
    background (190, 50, 90);
    noStroke ();

    fill (random (30, 60), random (60, 120), random (90, 180));

    // Drawing background triangles

    triangle (0, 480, 240, 480, 240, 240);  // idk why not
    triangle (640, 480, 400, 480, 400, 240);  // idk why not
    triangle (0, 0, 240, 0, 240, 240);  // idk why not
    triangle (640, 0, 400, 0, 400, 240); // idk why not

    // Drawing actual face

    fill (255);
    ellipse (width / 2, height / 3 + 50, width / 4, height / 3);    // drawing face outline

    fill (200);
    ellipse (width / 2, height / 3 + 50, width / 6, height / 5);    // drawing face outline

    stroke (0);
    strokeWeight (5);

    fill (255);
    ellipse (width / 3 + 75, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (R)
    
    noFill ();

    ellipse (width / 3 + 75, height / 3 + 25, width / 16, height / 12);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 16, height / 12);    // drawing eyeball Ring1 (R)
    ellipse (width / 3 + 75, height / 3 + 25, width / 24, height / 20);     // drawing eyeball Ring2 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 24, height / 20);    // drawing eyeball Ring2 (R)

    fill (random (30, 60), random (60, 120), random (90, 180));

    ellipse (width / 3 + 75, height / 3 + 25, width / 52, height / 40);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 52, height / 40);    // drawing eyeball Ring1 (R)

    ellipse (width / 2, height / 3 - 65, faceWidth / 10, faceHeight / 6);   // drawing third eye

    ellipse (width / 2, height / 3 + 185, faceWidth / 10, faceHeight / 6);   // drawing third eye blind

    fill (0);
    arc (width / 2, height / 2, width / 6, faceHeight / 6, 90, PI); // drawing mouth

}

function mousePressed () {

    width = random (160, 1280) + random (10, 50);
    height = random (120, 920) + random (10, 50);

}

This project went through a few iterations, but the most challenging aspect was that I discovered “random” commands. As you can see, I couldn’t help myself, and there’s a psychedelic quality to the overall presentation. Sorry ’bout it.

Josh

Looking Outwards: Jdbrown

Most of my interest in tech-based art centers around sound art and electro-acoustic performance. I’ve been really interested in the integration of performer movement (dance or instrument-playing, etc.) with the production of sound, and I’ve found “wearable instruments” especially intriguing.

Here is the website for one of the first instruments to catch my attention: a suit with cables, which are amplified through the bridge’s infrastructure to produce sound.

About