Author: Bridget

LO-08 Creative Practice

Look, I’m a sucker for space exploration. Ariel Waldman is an art school graduate who pivoted to scientific communications & research, with an aim to make science & space exploration “disruptively accessible”. Spacehack.org is an online directory that she maintains of ‘citizen science’ projects, ways that anyone can participate in scientific research and projects relating to space exploration and space travel. As someone incredibly interested in this, but 1/2″ too short to be an astronaut and also a Drama major, this is super exciting and inspiring to me. I’ve taken up rocket launch photography in the past 2 years, which has been my way of documenting and exploring the vehicles that take people and things into orbit and beyond. The projects listed on SpaceHack generally ask you to donate either your time or your computer processing to further the research being done by professionals at a university or other institution.

http://eyeofestival.com/2018/speaker/ariel-waldman/

https://spacehack.org

LO-06 Randomness

Random generation in music/synthesis has always confused me a bit, because part of the point of music (at least, what Western music theory says), is that music wants to fit into a pattern that is pleasing for the human ear, and that’s how tunes get stuck in our head and how we end up attached to a certain song. Randomness doesn’t often lean in the acoustically pleasing direction, because our ears are so attuned to patterns and tones. Even someone with little musical training or ability can guess if a note is incorrect, and will often have a visceral reaction to a wrong note played in a familiar melody. I was intrigued by this tutorial because it showed how to use randomness along with other elements within the Ableton software (confining notes to a certain scale, randomizing the note value within a number of choices, etc) to create something that, however randomly generated, still sounds pleasing to our ear.

P-06 Abstract Clock

sketch
// Bridget Doherty
// bpdohert@andrew.cmu.edu 
// 104 Section C


function setup() {
    createCanvas(480, 480);
    frameRate(5);
    angleMode(DEGREES);
}

function draw() {
    background(0); // black background
    translate(width/2, height/2); // center-based coordinates

    let s = second();
    let m = minute();
    let h = hour();

    drawStars(h);
    drawEarth(s);
    drawSun(h);
    
}

function drawSun(h){
    if (h == 0) { // eclipse every night from 00:00 - 00:59
        fill('black');
        strokeWeight(2);
        stroke('white');
        circle(0, 0, 100);
    } else {
        fill('yellow'); // the sun!
        noStroke();
        circle(0, 0, 100);
    }
}

function drawEarth(s){ // the earth completes a rotation every minute
    noStroke(); // and moves every second
    push();
    rotate(s*6);
    fill('blue');
    circle(150, 0, 70);

    // triangles to approximate land on earth 
    fill('green');
    triangle(170, 0, 120, 0, 150, 20);
    triangle(170, 10, 130, 10, 120, 20);
    triangle(175, -10, 130, -20, 120, 10);

    // ellipse to approximate Antarctica
    fill(220);
    ellipse(150, -30, 30, 10);
    pop();
}

function drawStars(h){ // the amount of stars increases every hour
    for (var i = 0; i<(h*10); i++){ // there are no stars between 00:00 and 00:59
        stroke('white');
        point(random(-width/2,width/2), random(-width/2, width/2));
    }
}

This is obviously based on Earth’s rotation around the sun, but condensed so it makes one revolution every minute. The number of stars increase with every hour passed. Every night from 00:00-00:59 there is a solar eclipse which is so naturally impossible with how I’ve set up the scene but looks cool nonetheless.

P-05 Wallpaper

Took inspiration from a tile pattern for this project.

sketch
// Bridget Doherty, bpdohert, 104 Section C


// global color variables
var greyValue = 150;
var bckg = 240;
var lineCol = 0;

function setup() {
    createCanvas(550, 380);
    background(bckg);
}

function draw() {
    for (var i=50; i<=height; i+=93) {
        for (var j=50; j<=width; j+=93){
            clover(j, i);
        }
    }
    for (var i=3; i<=width+50; i+=93){
        for (var j=3; j<=height+50; j+=93){
            innerCircle(i, j);
        } 
    }
    noLoop();
}

function clover(x, y){
    var diam1 = 40;
    var diam2 = 31;
    var spacer = 26;

    // clover outer grey section
    strokeWeight(1);
    stroke(lineCol);
    fill(greyValue);
    circle(x, y-spacer, diam1);
    circle(x, y+spacer, diam1);
    circle(x-spacer, y, diam1);
    circle(x+spacer, y, diam1);

    // clover inner white section
    fill(bckg);
    circle(x, y-spacer, diam2);
    circle(x, y+spacer, diam2);
    circle(x-spacer, y, diam2);
    circle(x+spacer, y, diam2);
    noStroke();
    circle(x, y, 41);

    // petals outline
    stroke(lineCol);
    strokeWeight(7);
    line(x-15, y-7, x-7, y-15);
    line(x+15, y-7, x+7, y-15);
    line(x-15, y+7, x-7, y+15);
    line(x+7, y+15, x+15, y+7);

    // lines to complete the clover inner points
    stroke(greyValue);
    strokeWeight(8);
    line(x-12, y-12, x-15, y-15);
    line(x+12, y-12, x+15, y-15);
    line(x-12, y+12, x-15, y+15);
    line(x+12, y+12, x+15, y+15);

    // circles outline
    noStroke();
    fill(lineCol);
    circle(x-7, y-7, 12);
    circle(x+7, y-7, 12);
    circle(x-7, y+7, 12);
    circle(x+7, y+7, 12);

    // grey petals inside clover
    stroke(greyValue);
    strokeWeight(4);
    line(x-15, y-7, x-7, y-15);
    line(x+15, y-7, x+7, y-15);
    line(x-15, y+7, x-7, y+15);
    line(x+7, y+15, x+15, y+7);

    strokeWeight(1);
    fill(greyValue);
    circle(x-7, y-7, 8);
    circle(x+7, y-7, 8);
    circle(x-7, y+7, 8);
    circle(x+7, y+7, 8);
    
}

function innerCircle(x,y){
    var cross = 6;

    // circles in between the clovers
    strokeWeight(1);
    stroke(lineCol);
    fill(greyValue);
    circle(x, y, 61);
    fill(bckg);
    circle(x, y, 50);

    // plus sign in the middle of the circles
    strokeWeight(7);
    stroke(lineCol);
    line(x+cross, y, x-cross, y);
    line(x, y-cross, x, y+cross);
    strokeWeight(4);
    stroke(greyValue);
    line(x+cross, y, x-cross, y);
    line(x, y-cross, x, y+cross);
}

LO-05

I’ve always been a little obsessed with the MIT Media Lab and how they manage to make a circle out of the venn diagram that is ‘things I like’ and ‘things you can learn.’ This article is written by a student in the process of using javascript as a CAD replacement. They start out with the statement that ‘a design is just a bunch of numbers’ which I find particularly interesting, even if I don’t always agree with it. I’ve always been more drawn to code that produces an output that I can physically sense, not just on a computer screen. Code makes a lot more sense to me when I can hear what it’s doing, or if it interfaces with microcontrollers and physical circuits. But seeing these examples of javascript directly correlating to CAD drawings, 3D prints, or similar physical outcomes inspires me to see what else is possible with this language, especially in 3 dimensions. I know how to “bit bang” 3D models to a certain extent, but automating & scripting them would certainly improve a workflow and allow for further experimentation and innovation.

https://www.media.mit.edu/projects/from-cad-to-jad-javascript-aided-design/overview/

P-04 String Art

sketch
// Bridget Doherty, bpdohert, 104 Section C

// draw at least 3 string art shapes

var dx1;
var dy1;
var dx2;
var dy2;

// line density
var numLines = 40;

// starting line values
var x1 = 0;
var y1 = 0;
var x3 = 0;
var y3 = 300;

// second line values
var x2 = 400;
var y2 = 300;
var x4 = 400;
var y4 = 0;

var mouseClick = 0;

function setup() {
    createCanvas(400, 300);
    background('black');
    blendMode(EXCLUSION);
}

function draw() {
    drawCircles();
    string1();
    string2();
    string3();
    
    noLoop();
}

function drawCircles() {
    for (i = 20; i < width; i+= 40) {
        fill(250);
        noStroke();
        circle(i*1.3, i, 40);
    }
    

}

function string1() {
    for(i = 0; i <= height; i += 10) { 
        stroke('green');
        line(width/2.5, height/2, 0, i);
        line(width/2.5, height/2, width, i);
    }
    for(i = 0; i <= width; i += 10){
        stroke('yellow');
        line(width/3 + width/2, height/2, 0, i);
        line(width/3 + width/2, height/2, width, i);
    }
}

function string2() {
    stroke('blue');
    dx1 = (300-50)/numLines;
    dy1 = (0)/numLines;
    dx2 = (50-300)/numLines;
    dy2 = (300-300)/numLines;
   
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }   
}

function string3() {
    stroke('cyan');
    dx1 = (300-50)/numLines;
    dy1 = (0)/numLines;
    dx2 = (50-300)/numLines;
    dy2 = (300-300)/numLines;
   
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }  
}

LO-04


I get to talk about my favorite coding platform Max again! I found this pretty interesting granular synthesis patch, where the creator set up a patch where you can take samples of music playing and loop them back quickly, and still be locked into the set tempo (not sure if this is algorithmically read off of the sound or input by the person running the patch) when you release it. Makes for some pretty cool audio effects. The creator demonstrates this using a sort of folk-world-choral piece, with mostly vocals and drums/percussion, but it would be really interesting to use this on a multitrack recording of an orchestra or other multi-part ensemble, to play with different parts of the music while the rest of the orchestration continues underneath it. This video is from 2013, and the software has improved a lot since then, so I would be really interested to play with the patch in a newer version of Max and see how I could clean it up in presentation mode so it could possibly be used in a live performance format.

Neri Oxman’s Man-Nahata: Looking Outwards-03

Neri Oxman has been a huge inspiration to me since I saw her featured on Netflix’s Abstract series. The concept of biomimicry (which is honestly more of a return to what was than a new concept) holds incredibly poignant as human innovation seems to split the sides of the uncanny valley and either try with incredible effort to mimic analog, natural, or otherwise older design ideas, or shoot beyond anything that has ever been imagined. Oxman’s most recent published project is entitled ‘Man-Nahata,’ the Native American word for the island of Manhattan. It imagines, if Manhattan were to undergo an collision wiping out its population, what the biological regrowth might look like, using ecological data from the island pre-colonization and also the current grid layout and zoning of the city. How might nature rebuild, and how might we rebuild around her? Generative algorithms imagine and plot how nature might overtake the current architecture, and how our city planning could influence a natural process.

Sample artistic generation of biological creep into future Manhattan.

Project 03-Dynamic Drawing

I went poking around the p5js reference library and found a really intriguing example in the randomGaussian() object so I decided to run with that and see what I could do with that. mouseX controls the properties of the yellow burst, and mouseY the blue. Click to randomize the burst lines, and click and drag to shade the background along greyscale.

sketchDownload
// Bridget Doherty, bpdohert, 104 Section C
 
// Click to randomize burst density
// mouse X position changes yellow burst
// mouse Y position changes blue burst
// Clicking & dragging changes background color along greyscale

// Base code for bursts from p5js reference >> randomGaussian() object

let distribution = new Array(360);
var Burst1 = 200;
var Burst2 = 200;
let bkgColor = 0;

function setup() {
  createCanvas(600, 450);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, Burst1));
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    distribution[i2] = floor(randomGaussian(0, Burst2));
  }
}

function draw() {
  background(bkgColor);
  translate(width / 2, height / 2);
  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    strokeWeight(1.5);
    stroke(color(243, 197, 101));
    let dist = abs(distribution[i]);
    line(0+mouseX, 0, dist, 0);
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    rotate(TWO_PI / distribution.length);
    stroke(color(158, 182, 187));
    let dist = abs(distribution[i2]);
    line(0, 0+mouseY, dist, 0);
  }
}

function mousePressed(){
  let Burst1 = mouseX;
  let Burst2 = mouseY;
  print (Burst1 +", " + Burst2);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, Burst1));
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    distribution[i2] = floor(randomGaussian(0, Burst2));
  }
}

function mouseDragged() {
  bkgColor = bkgColor - 0.7;
  if (bkgColor<=0) {
    bkgColor = 255;
  }
}

Project 2

sketch_bpdohert_02
// Bridget Doherty
// Section C

var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 300;
var noseWidth = 20
var on = true;

var color1 = 50;
var color2 = 50;
var color3 = 50;
 
function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
}
 
function draw() {
    let backgroundColor = color(color3, color2, color1);
    background(backgroundColor);
    let eyeColor = (color('#7d754f'));
    let skinColor = (color(255, 220, 177));
    let hairColor = (color('#80643d'));
    var centerX = width / 2;
    var centerY = height / 2;
  
    //neck
    fill(skinColor);
    rect(centerX-(faceWidth/3), centerY+30, faceWidth/1.5, 200);
  
    // main face
    ellipse(centerX, centerY, faceWidth,  faceHeight);
  
    // nose
    triangle(centerX, centerY+40, centerX, centerY, centerX+noseWidth, centerY+40);
  
    //shirt
    let shirtColor = color(color1, color2, color3)
    fill(shirtColor);
    rect(centerX-(faceWidth/2), centerY+170, faceWidth, 70)  
    let sleeveColor = color(color1-50, color2-50, color3-50)
    fill(sleeveColor);
    triangle(centerX-(faceWidth/2), centerY+170, centerX-(faceWidth/2)-30, 480, centerX-(faceWidth/2), 480);
    triangle(centerX+(faceWidth/2), centerY+170, centerX+(faceWidth/2)+30, 480, centerX+(faceWidth/2), 480)
  
    // eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
  
    fill('white'); // left eye
    ellipse(eyeLX, centerY, eyeSize+20, eyeSize);
    fill(eyeColor);
    ellipse(eyeLX, centerY, eyeSize, eyeSize);
    fill('black')
    ellipse(eyeLX, centerY, eyeSize/2, eyeSize/2);
   
    fill('white'); // right eye
    ellipse(eyeRX, centerY, eyeSize+20, eyeSize);
    fill(eyeColor);
    ellipse(eyeRX, centerY, eyeSize, eyeSize);
    fill('black')
    ellipse(eyeRX, centerY, eyeSize/2, eyeSize/2);
  
    // bowl cut hair
    var hairY = (height / 2) - faceHeight/8
    fill(hairColor);
    arc(centerX, hairY, faceWidth, faceHeight, 180, 0);
  
    // happy or sad mouth
    var mouthY = (height / 2) + faceHeight/3.5
    stroke(10);
    noFill();
    if (on == true) {
    arc(centerX, mouthY, 80, 60, 0, 180);
    } else if (on == false) {
    arc(centerX, mouthY, 80, 60, 180, 0);
   
  }
  
}
 
function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 350);
    eyeSize = random(10, 30);
    noseWidth = random(-40, 40);
  
    if (on == true) {
    on = false;
    } else {
      on = true; }
  
    getRandomColor();
}

function getRandomColor(){
    // function generates a random number for color variables
    color1 = random(40, 255); 
    color2 = random(40, 255);
    color3 = random(40, 255);
}