Month: September 2022

Bhaboo’s Looking Outwards – Week 4

The 13th of May 2022, a unique exhibition opened its gates to the public inside of London’s Design Museum. Creatively titled ‘Weird Sensation Feels Good: The
World of ASMR’, this exhibition encourages visitors to experience the world of
ASMR in a communal space, rather than behind screens as is current common
practice. This exhibition was created using a collaboration between many ASMR
artists, combining each artist’s unique take on the production and experience of ASMR. Autonomous Sensory Meridian Response (ASMR) is a physical
sensation of euphoria or extreme calm, often manifesting itself as a tingling in the body, that is triggered by a sound, touch, or movement.

As an individual who has delved into the digital world of ASMR for sleep therapy, I admire this exhibitions’ creativity and unique ability to animate in person an experience that is so widely enjoyed digitally through virtual platforms. Presenting a sound experience as delicate as ASMR in a physical exhibit is no easy feat, and I marvel at the artists’ use of acoustic tuning to ensure an immersive experience of sound and sensation. While this exhibition is undeniably presenting ASMR in a different format than would be experienced over virtual platforms, its one-of-a-kind nature has not failed to capture its viewers, whether they are ASMR fans or simply discovering this niche art.

  • Design Museum of London -> various artists
    o Exhibition curated in collaboration with ArkDes, the Swedish Center for
    Architecture and Design
  • Title: Weird Sensation Feels Good: The World of ASMR
  • Created 13 th May 2022
    o Open until 10 th April 2023

To learn more: Design Museum’s Website

Project 4

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

var dxOne;
var dyOne;
var dxTwo;
var dyTwo; 

var numLine = 50;
var numLineTwo = 40;

function setup() {
    createCanvas(400, 300);
    background(18, 77, 26);
    
    strokeWeight(2);
    // all lines two pixels wide 

    dx1 = (150-50)/numLine;
    dy1 = (300-50)/numLine;
    dx2 = (350-300)/numLine;
    dy2 = (100-300)/numLine;
    

    dxOne = (400 - 340)/numLineTwo;
    dyOne = (200 - 0)/numLineTwo;
    dxTwo = (50 - 220)/numLineTwo;
    dyTwo = (80 - 0)/numLineTwo;
}

function draw() {

    var x1 = 5;
    var y1 = 115;
    var x2 = 180;
    var y2 = 175;
    // x and y values for left shape and vert lines

    for(i  = 0; i <= numLine; i++) {
        stroke(232, 221, 202);
        line(x1, y1, x2, y2);
            x1 += dx1 + 5;
            y1 += dy1;
            x2 += dx2 - 2;
            y2 += dy2 - 4;
    } // draw left shape, advance by one pixel

    for(i = 0; i <= numLine; i+= 4) {
        stroke(16, 46, 14);
        line(x1, y1, x2, y2);
            x1 += dx2 + 80;
            y1 += dy1 + 120;
            x2 += dx1;
            y2 += dy2;
    } // draw right side vert lines, advance by four pixels

    var xOne = 120;
    var yOne = 0;
    var xTwo = 300;
    var yTwo = 20;
    // x and y values for orange shape

    for(i = 0; i <= numLineTwo; i ++) {
        stroke(122, 65, 15);
        line(xOne, yOne, xTwo, yTwo);
            xOne += dxOne;
            yOne += dyOne;
            xTwo += dxTwo;
            yTwo += dyTwo;
    } // draw orange shape
    
    noLoop();
}

Looking Outwards-04

The project I am looking into this week is Ryoji Ikeda’s Test Pattern series. These projects are a series of installation pieces that use sound and black and white visuals to describe the flow of binary data, 1s and 0s. The pieces act as a magnifying glass into the extremely dense stream of data in our world. I find this work really fascinating because of how it immerses the viewer into the data stream. It not only does this visually, but also with sound. The world of technology which surrounds us now uses 1s and 0s to operate; however, we only see this from extremely far away. We are immersed in data everyday but not to the scale that is described in Test Pattern.

Project-04: String Art

Graham Murtha

Section A

This is the “complimentary eye of the storm”. I used 4 different variations of a base string code, each with different stroke weights and stroke colors for more variation. The numlines is set to 25.

sketch
// gmurtha Graham Murtha
// Section A

var dx1 = 0;
var dy1 = 0;
var dx2 = 0;
var dy2 = 0;
var numLines =25;

function setup() {
    createCanvas(300, 400);
    background(80,0,80); // dark purple

    for(var a = 0; a <= 360; a += 80){ //a = angle
        translate(width/2,height/2);
        line(0,125,25,-75); // base line 1
        line(25,25,125,0); //base line 2
        dx1 = (25-0)/numLines; //calculates difference between each string
        dy1 = (-75-125)/numLines; //calculates difference between each string
        dx2 = (125-25)/numLines; //calculates difference between each string 
        dy2 = (0-25)/numLines; //calculates difference between each string
        rotate(radians(a));
    }

}

function draw() {
    fill(255,255,200) // bright yellow
        circle(width/2,height/2,25);
    fill(80,0,80); //background color
    circle(width/2,height/2,10);

    translate(width/2,height/2);
    stroke(255,255,255); //white
    strokeWeight(1);
    for(var a = 0; a <= 360; a += 30){ // 12 shape variations fit
        var x1 = 125;
        var y1 = 75;
        var x2 = 75;
        var y2 = 125;
        for (var i = 0; i <= numLines; i ++) { //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    stroke(255,255,100); //yellow
    strokeWeight(3);
    for(var a = 0; a <= 360; a += 45){ // 8 shape variations fit
        var x1 = 125;
        var y1 = 175;
        var x2 = 175;
        var y2 = 125;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    stroke(200,0,200); //purple
    strokeWeight(2);
    for(var a = 0; a <= 360; a += 60){ //six shape variations fit
        var x1 = 125;
        var y1 = -125;
        var x2 = 75;
        var y2 = 75;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    
    stroke(255,150,255); //bright purple
    strokeWeight(1);
    for(var a = 0; a <= 360; a += 90){ //four shape variations fit
        var x1 = 0;
        var y1 = 125;
        var x2 = 125;
        var y2 = 0;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

}

04 Project: Alexia

sketch
//Alexia Forsyth
//aforsyth
//Section A

var dx1;
var dy1;
var dx2;
var dy2;
var angle = 3;
var numLines = 350;



function setup() {
    createCanvas(400, 300);
    background(255,240,105);
    dx1 = (25)/numLines;
    dy1 = (135)/numLines;
    dx2 = (25)/numLines;
    dy2 = (-135)/numLines;
}

function draw() {

	push();//saves original origin
	translate(100,100); //translate by 100 for the sun center
    var x1 = -(width);
    var y1 = height/2;
    var x2 = 0;
    var y2 = height/2;

    //dark red bottom layer of lines
    for (var i = 0; i <= numLines; i += 1) {
    	stroke(215,100,20);
        rotate(radians(angle));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //revert to original coordinates
    var x1 = -(width);
    var y1 = height/2;
    var x2 = 0;
    var y2 = height/2;
    numLines -= 20;//reduce number of lines by 20
    angle +=5; //rotate by 5

    //3rd dark orange layer
    for (var i = 0; i <= numLines; i += 1) {
    	stroke(205,95,0);
        line(x1, y1, x2, y2);
        rotate(radians(angle));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //revert to original coordinates
    var x1 = -(width);
    var y1 = height/2;
    var x2 = 0;
    var y2 = height/2;
    numLines -= 20;//reduce number of lines by 20
    angle +=5; //rotate by 5

    //second bright orange layer
    for (var i = 0; i <= numLines; i += 1) {
    	stroke(204,153,0);
        line(x1, y1, x2, y2);
        rotate(radians(angle));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //revert to original coordinates
    var x1 = -(width);
    var y1 = height/2;
    var x2 = 0;
    var y2 = height/2;
    angle +=5; //angle by 5
    numLines -= 20; //subtract number of lines by 20

    //outer yellow lines
    for (var i = 0; i <= numLines; i += 1) {
    	stroke(250,236,30);
        line(x1, y1, x2, y2);
        rotate(radians(angle));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    pop(); //revert to original origin
    fill(204,153,0);
    noStroke();
    ellipse(113,95,150,150); //sun

    noLoop();
    
}

Looking Outwards 04: Sound Art

The project is called Experiments in Musical Intelligence (EMMY) designed by David Cope. David Cope works in the area of sound and computation and this project is about composing complete works in the styles of multiple classical composers. For example, in the work Mozart-style Sonata 2-1, the algorithms composed the piece in the style of Mozart from the analysis of the pieces traditionally composed by Mozart. The thing that I admire the most about the project is its potential of extending the lives of great musicians. By using algorithms, we can still hear new music pieces from those dead musicians. This is extremely exciting because it is a way for human beings to achieve eternity.

Reference
David Cope, Mozart-style Sonata 2-1, 2013.

Project 03 dynamic drawing

I wanted to play with the translate and rotation tools so I made this fun little spinning ellipse.

sketchDownload
//felix cooper fcooper d

var r=constrain(mouseX,-180,180);
var height=constrain(50,-255,255);

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

function draw() {
    background(0);
    noStroke();
    translate(300,225);
    rotate(radians(r)); //spins circle according to mousex
    ellipse(80,0,50, height);
    r=mouseX;

    if(mouseY<225){ //changes ellipse length based on mousey
        height=height+5;
    }
    else{
        height=height-5;
    }
    fill(height); //changes gradient based on how small it is - will dissapear
}

Project-04: String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 100;//number of lines

function setup() {
    createCanvas(400, 300);
    background(158,216,238);
}

function draw() {
    stroke("blue");
    line(20, 30, 300, 280);//first line
    line(350, 300, 400, 0);//second line
    dx1 = (300-20)/numLines;//x coordinate on the first line
    dy1 = (280-30)/numLines;//y coordinate on the first line
    dx2 = (400-350)/numLines;//x coordinate on the second line 
    dy2 = (0-300)/numLines;//y coordinate on the second line

    var x1 = 20;
    var y1 = 30;
    var x2 = 350;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);//150 lines between the 2 lines
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }


    line(0, 0, 50, 400);//thrid line
    line(100,250,380, 30);//fourth line
    dx3 = 50/numLines;//x coordinate on the third line
    dy3 = 400/numLines;//y coordinate on the third line
    dx4 = (380-100)/numLines;//x coordinate on the fourth line 
    dy4 = (30-250)/numLines;//y coordinate on the fourth line

    var x3 = 0;
    var y3 = 0;
    var x4 = 100;
    var y4 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);//150 lines between the 2 lines
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }


    stroke(29,169,200);
    line(50, 200, 300, 300);//5th line
    line(360, 300, 400, 100);//6th line
    dx5 = (300-50)/numLines;//x coordinate on the 5th line
    dy5 = (300-200)/numLines;//y coordinate on the 5th line
    dx6 = (400-360)/numLines;//x coordinate on the 6th line 
    dy6 = (100-300)/numLines;//y coordinate on the 6th line

    var x5 = 50;
    var y5 = 200;
    var x6 = 360;
    var y6 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x5, y5, x6, y6);//150 lines between the 2 lines
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }

    noLoop();
}

I created an abstract image of waves using the technique of string art. It captures the essence of ocean waves and gives the audience a feeling of fluidity.

String Art Bike

I started this project because I was inspired by the spokes on the bike. They looked like something that would lend itself to string art. After that, I wanted to make it look like the bike was moving so I had the positions of the spokes change and added the cactus in the back. Additionally, the color of the sky changes over time.

sketch
//Nakshatra Menon
//Section C

function setup() {
    createCanvas(400, 300);
    background(200);
}

var bikeWheel = 50;
var heightGround = 250;
var wheel = 1
var numLines = 10
var color3 = 100
var cactusX = 500
var cactusY = 200

function draw() {
    background(246, 235, 216);
    var skyX = 0
    var skyX2 = 600
    var skyY2 = 125 
    for (var skyY = 0; skyY<250; skyY+= 8){           //drawing the lines for sky 
        strokeWeight(.5);
        stroke(71, 61, color3)
        line(skyX, skyY, skyX2, skyY2);
    }

    var x1 = 0;
    var y1 = 300;
    var x2 = 400;
    var y2 = 250;
    var y3 = 275
    //ground 
    for (var y1=300; y1>=250; y1+=-2) {               //ground right up 
        stroke(159, 135, 94);
        strokeWeight(1); 
        line(x1, y1, x2, y2);
    }
    for (var y2; y2<= 300; y2 +=2){     //ground left up 
        stroke(82, 66, 38);
        strokeWeight(1); 
        line(x1, y1, x2, y2);
    }
    for(var y3 = 275; y3 <= 300; y3 +=2){     //ground across 
        stroke(198, 184, 153);
        line(x1, y3, x2, y3);
    }
    //cactus
    fill(53, 68, 52);
    ellipse(cactusX-20, cactusY, 35, 15);       // left
    ellipse(cactusX+20, cactusY-20, 45, 15);   // right arm
    ellipse(cactusX-35, cactusY-12, 10, 25); // top left 
    ellipse(cactusX, cactusY, 20, 100);     //main 
    ellipse(cactusX+40, cactusY-30, 5, 15);  //right top 

    // bike wheel arcs 
    noFill();
    strokeWeight(7);
    stroke(115, 45, 4);
    arc(100, heightGround-bikeWheel-5, 2*bikeWheel, 2*bikeWheel, radians(190), radians(0));   // arc on left tire 
    arc(300, heightGround-bikeWheel-5, 2*bikeWheel, 2*bikeWheel, radians(190), radians(0));   //arc on right tire  
    // bike from right wheel   
    push();
    translate(300, heightGround-bikeWheel);             //moving wheel to correct place
    rotate(radians(-163))       // rotating line 9 degrees evertime it draws a new line
    line(0,0,60,bikeWheel+45);  
    line(50, bikeWheel+45, 70, bikeWheel+55 )     // far handle              // drawing vertical line 
    line(60, bikeWheel+45,80, bikeWheel+45)       // close handle 
    pop();
    // bike from left wheel   
    push();
    translate(100, heightGround-bikeWheel);             //moving origin to correct place
    rotate(radians(-163))       // rotating lines
    line(-60,bikeWheel-30,-150,bikeWheel+70);          // across
    line(0,0,-60,bikeWheel-30);           // line to the line holding seat                                       // drawing vertical line 
    line(-60, bikeWheel-30, -20, 90)      // line holding up seat
    push();
    rotate(radians(-30));
    ellipse(-60, 70, 60, 6);
    pop();
    line(0,0,-30,bikeWheel+15);           // line 2 to the line holding seat
    line(-30,bikeWheel+15, -150, bikeWheel+70);    //across 2
    pop(); 

    // bike wheel left 
    if(wheel <= 1){
        for(var i=0; i<4*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(100, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/2)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }
    if ( wheel <= 2 & wheel > 1){
        for( var i=0; i<6*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(100, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/3)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }

    // bike wheel right
    if(wheel <= 1){
        for(var i=0; i<4*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(300, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/2)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }
    if ( wheel <= 2 & wheel > 1){
        for( var i=0; i<6*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(300, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/3)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }

    //bike tire left 
    push();
    noFill();
    strokeWeight(4);
    stroke(64, 38, 22)
    translate(100, heightGround-bikeWheel);
    circle(0,0,2*bikeWheel);                      // drawing the tire 
    pop();
    //bike tire right 
    push();
    noFill();
    strokeWeight(4);
    stroke(64, 38, 22)
    translate(300, heightGround-bikeWheel);
    circle(0,0,2*bikeWheel);                       
    pop();

    wheel += .1                                   // wheels move 
    if (wheel > 2){
        wheel = 0;
    }

    color3 += .5                                  // color of sky changes 
    if (color3 > 300){
        color3 = 100
    }

    cactusX += -5                                // cactus moves 
    if (cactusX < -100){
        cactusX = 500
    }
}

anabelle’s project 04

sketch

Here’s my project for the week — this has been the most painful one so far. It’s vaguely based off of Rainbow Road from Mario Kart, so enjoy <3

let numLines; 

let expandLeft;
let expandRight;

let moveX;
let moveY;

let lineExpand;

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

function draw() {
    background(0, 0, 56);

    stroke(255); // circle
    lineExpand = (constrain(mouseY, 10, 400));
    for(i = 0; i <= 100; i +=1 ) {
        push();
        translate(width/2, height/2);
        rotate(radians(10*i));
        line(0, lineExpand, 0, -lineExpand);
        pop();
    }

    stroke(188, 13, 88); // red
    crossHatch(0, 290, 150, 200, 170, 200, 200, 0, false);

    stroke(254, 161, 43); // orange
    crossHatch(5, 290, 170, 220, 190, 220, 200, 0, false);

    stroke(248, 243, 23); // yellow 
    crossHatch(10, 290, 190, 250, 210, 250, 200, 0, false);

    stroke(247, 89, 252); // purple 
    crossHatch(390, 290, 250, 200, 230, 200, 200, 0, false);

    stroke(79, 134, 239); // blue
    crossHatch(395, 290, 230, 220, 210, 220, 200, 0, false);

    stroke(118, 370, 153); // green
    crossHatch(400, 290, 210, 250, 190, 250, 200, 0, false);

    stroke('magenta');
    moveX = 100;
    moveY = 100;
    chadStar(0, 0);

    stroke('yellow');
    moveX = 300;
    moveY = 200;
    chadStar(0, 0);

    stroke('pink');
    moveX = 250;
    moveY = 50;
    chadStar(0, 0);

}



function crossHatch(firstx1, firsty1, firstx2, firsty2, secondx1, secondy1, secondx2, secondy2, showLines = true) {
    if (showLines){
        line(firstx1, firsty1, firstx2, firsty2);
        line(secondx1, secondy1, secondx2, secondy2);
    } 

    let numLines = constrain(mouseX, 100, 400)/10;


    let dx1 = (firstx2 - firstx1) / numLines;
    let dy1 = (firsty2 - firsty1) / numLines;
    let dx2 = (secondx2 - secondx1) / numLines;
    let dy2 = (secondy2 - secondy1) / numLines;


    for(var i = 0; i <= numLines; i += 1) {
        line(firstx1, firsty1, secondx1, secondy1);
        firstx1 += dx1;
        firsty1 += dy1;
        secondx1 += dx2;
        secondy1 += dy2;
    }
}

function chadStar(x, y) {
    expandLeft = constrain(mouseY, 0, 300) / 50;
    expandRight = constrain(mouseY, 0, 300) / 50;

    for(i = 0; i <= 6; i += 1) {
        push();
        translate(moveX, moveY);

        rotate(radians(i*60));
        line(x, y-10, x+10, y+10);
        line(x+10, y+10, x-10, y+10);
        line(x-10, y+10, x, y-10);

        pop();
        
        x += expandLeft;
        y += expandRight;
    }
}