ssharada@andrew.cmu.edu – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Since this code has sounds, the WordPress account doesn’t display it properly. Above is a link to the p5.js alpha editor where you can properly view my code. Once at the website click the play button on the top left corner of the screen

My project looked at combining motion graphics and sounds. I wanted the graphics to work such that more was revealed as you moved around the canvas – everything is made out of two colours so as the mouse moves in the horizontal direction, you get to view more of the graphics as a differentiation is created between the background and the actual graphics.

I had an issue with running the local server on my laptop so I used the oscillation program from p5.js to get a sine curve amplitude and frequency to create a sound that my motion graphics responded to. The larger objects respond to the sound that is generated. The rippling, striped circle responds to the silence in between the beep noises. The white ellipse curve is its own thing that just renders what a traditional sine curve looks like.

When the canvas is clicked on, the noise stops and the motion graphics continue. To restart the noise you have to refresh the page.

^mouseX at at 0

^mouseX at maximum width

ssharada-project-12-proposal

For my final project, I wanted to take inspiration from my looking outwards and create some minimal graphics that alter slightly according to certain types of music – so from one beat to another the graphics look like they are moving to the beat but as soon as a different music type comes in, it can be that a completely new graphic comes in. I al also playing around with the idea of using these graphics to create a small animation story – like a really simple story that is represented using no facial expressions but rather how really simple graphics interact with each other and having these small interacting graphics heighten their ‘expressions’ using small sounds.

What I know for certain about my project is the type of graphics that I will be using and coding, that there most likely will be sounds involved that relate the situation and that my graphics will be telling a small story using these animations. My aim is to create some very simple motion graphics work.

^some of the simple graphics that i could use and play around with

ssharada-looking-outwards-12

^Jay van Cleef – A Minimal Love Story

For the first project, I looked at a student’s project which was a very simple concept of combining minimal graphic concepts with different visual attributes and noises to give a short minute long story that represents every romantic movie, story, tale, poem, etc. In the story he has a male and a female figure represented by coloured squares, a barrier that comes in between them as a literal barrier that stops them from meeting each other and the process that the ‘male square’ goes through to break that barrier, with the final outcome being the squares reuniting.

I found this really interesting because he conveyed every emotion that these ‘graphics’ would be feeling through the use of the correctly placed sound, and I would really like to look into something like this for my work.

^Carlo Vega – An Expansion

Going on the same line of looking at artists and motion designers that combine simple graphics with sounds to bring about a different emotion and create a compelling animation, I came across the work of Carlo Vega, a motion designer. He takes a much more experienced are artistic approach to this entire concept of combining coding and sounds to bring about beautiful animations that I would love to use as an inspiration for my project 12 work.

ssharada-lookingoutwards11

^Cope’s Emmy Bach style prelude.

David Copeis an American author, composer, scientist, and former professor of music at the University of California, Santa Cruz. His primary area of research involves artificial intelligence and music; he writes programs and algorithms that can analyse existing music and create new compositions in the style of the original input music. His EMI (Experiments in Musical Intelligence) software has produced works in the style of various composers, some of which have been commercially recorded (Cockrell 2001)—ranging from short pieces to full length operas. As a composer, Cope’s own work has encompassed a variety of styles—from the traditional to the avant-garde—and techniques, such as unconventional manners of playing, experimental musical instrument, and microtonal scales, including a 33-note system of just intonation he developed himself (Cockrell 2001). Most recently, all of his original compositions have been written in collaboration with the computer—based on an input of his earlier works. He seeks a synergy between composer creativity and computer algorithm as his principal creative direction

ssharada-project11-composition

sketch-132.js

//shariwa sharada 
//ssharada@andrew.cmu.edu
//section a 
//project 11

//setting initial starting points for the turtles
dx = 127
dX = 127

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

//creating the turtles using the below trutle commands
  turtle  = new makeTurtle(dx+20, 50);
  turtle2  = new makeTurtle(dx+50, 305);
  turtle3  = new makeTurtle(dx+90, 255);
  turtle4  = new makeTurtle(dx-60, 285);
  turtle5  = new makeTurtle(dx-90, 0);
  turtle6  = new makeTurtle(dx-110, 275);
  turtle7  = new makeTurtle(dx+100, 575);

}

function draw(){

  background(0, 10);
  noFill();

//drawing turtle shapes
  drawShape1();
  drawShape2();
  drawShape3();
  drawShape4();
  drawShape5();
  drawShape6();
  drawShape7();

}

//creating the different circles 
//sizing is varied using  the size of the object moving forward
//speed of the circles moving is depedent on the angle

//the stroke weight of each line depends on the position of the y point of the cursor
//radius of each circle is dependent on the mouseX cursor position

function drawShape1(){
    turtle.setWeight(1 + mouseY/30)
    turtle.right(2 + mouseX/100);
    turtle.forward(1);
}

function drawShape2(){
    turtle2.setWeight(random(2 + mouseY/30,9 + mouseY/30))
    turtle2.right(-3 );
    turtle2.forward(4 + mouseX/100);
}

function drawShape3(){
    turtle3.setWeight(random(1 + mouseY/30, 2 + mouseY/30))
    turtle3.right(6 + mouseX/150);
    turtle3.forward(10);
}

function drawShape4(){
    turtle4.setWeight(random(3 + mouseY/30,6 + mouseY/30))
    turtle4.right(10);
    turtle4.forward(6 + mouseX/175);
}

function drawShape4(){
    turtle4.setWeight(random(4 + mouseY/30, 2 + mouseY/30))
    turtle4.right(10);
    turtle4.forward(6 + mouseX/200);
}

function drawShape5(){
    turtle5.setWeight(random(3 + mouseY/30,6 + mouseY/30))
    turtle5.right(7);
    turtle5.forward(20 + mouseX/225);
}

function drawShape6(){
    turtle6.setWeight(random(1 + mouseY/30, 5 + mouseY/30))
    turtle6.right(-7);
    turtle6.forward(13 + mouseX/250);
}

function drawShape7(){
    turtle7.setWeight(random(1 + mouseY/30, 5 + mouseY/30))
    turtle7.right(-4);
    turtle7.forward(10 + mouseX/250);
}


//-----------------------------------------------------------------------
//-----------------------------------------------------------------------

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(255, random(40, 110)),
                  weight: 5,
                  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 I was inspired by brush strokes and watercolour paint because of which I tried to create these circles by making the flow of the circles the brush stroke style. As the cursor moved, the thickness of the stroke changes like the brush stroke.

^thin line weights with a lower mouseY value

^thick line weights with a higher mouseY value

ssharada-looking-outwards-10

^ Mimi Son’s ‘Lit Tree”

For this looking outwards, I am looking at the work of Mimi Son who is the creator of interactive artworks with novel displays. Mimi Son was born in Seoul where currently she lives and works. She completed her master degree on Digital Media Art and Design at Middlesex University and Interaction Design at CIID. She is currently the Adjunct Professor at Ewha Womans University in Seoul

Being a student of architecture I am really interested in a lot of her work because she uses a lot of programs that we are taught in class to create something so beautiful and sculptural. She uses her blog Kimchi and Chips to present her work and to show the viewer a constant updates of her different experiments int he virtual world.

In this project, a small potted tree is augmented with video projection, creating volumetric light patterns using itʼs own leaves as voxels. This technique allows a tree to have a visceral conversation with human visitors, and to become a new type of aesthetic object. The tree that can display digital media’ is a provocation against a current asymptote of outdoor digital media that champions media facades, we instead suggest interventions in reaction to existing unscripted entities within the environment such as trees.
The projection triggers photosynthesis effects which affect tree growth, suggesting the possibility of 3D printing a tree, and of visitors feeding the tree through interaction with it.

What is made even more interesting is the fact that Son has made the structured light projection coding and technique available online for free.

ssharada-project10-landscape

project10.js

//shariwa sharada
//ssharada@andrew.cmu.edu
//section a
//project 10 

//initiallising all my speed and position variables
var option = 1

var centerX = 125
var centerX2 = 125  
var centerX3 = 125
var centerX4 = 0
var centerX5 = 0
var centerX6 = 0
var centerX7 = 0
var centerX8 = 0
var centerX9 = 0
var centerX10 = 125
var centerX11 = 125

var moveX = 1
var moveX2 = 1.5
var moveX3 = 0.5
var moveX4 = 1
var moveX5 = 1.5
var moveX6 = 0.5
var moveX7 = 1
var moveX8 = 1.5
var moveX9 = 0.5

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

function draw(){ 
//calling the object functions 
//using conditionals to change the face type with a click   
    if (option == 1){
        background(155, 13, 33);
        eyeType1();
        noseType1();
        lipType1(); 
    }
    
    else if (option == 2){
        background(255);
        eyeType2();
        noseType2();
        lipType2();
    }
    
    else if (option == 3){
        background(2);
        eyeType3();
        noseType3();
        lipType3(); 
    }
}

//creating teh yellow eyes 
function eyeType1(){

    push();
    centerY = 85
    //causing the objects to rebound when they hit the edges
    centerX += moveX
    if(centerX > 300){
        moveX = random(-4.5, -1)
    }
    if (centerX <-300) {
        moveX = random(0.5, 2)
    }

    //translating and scaling the same object to create the whole image
        stroke(254, 194, 15);
        noFill();
        push();
        translate(centerX +40,centerY-2.5);
        strokeWeight(3.25)
        eye1LinesTop();
        pop();

        push();
        translate(centerX +40,centerY-2.5);
        rotate(180)
        strokeWeight(3.25)
        eye1LinesTop();
        pop();

        push();
        translate(40, 0);
        eye1Center();
        pop();

        push();
        translate(200,20);
        scale(0.75,0.75);
        rotate(5);
            push();
            translate(centerX + 40,centerY-2.5);
            strokeWeight(3.25)
            eye1LinesTop();
            pop();

            push();
            translate(centerX +40,centerY-2.5);
            rotate(180)
            strokeWeight(3.25)
            eye1LinesTop();
            pop();

            push();
            translate(40, 0);
            eye1Center();
            pop();
        pop();
    pop();   
}
//creating the yellow arcs
    function eye1LinesTop(){
            arc(0,0,160,90, 180, 0);
            strokeWeight(3)
            arc(0,0,150,80, 180, 0);
            strokeWeight(2.75);
            arc(0,0,140,70, 180, 0);
            strokeWeight(2.5);
            arc(0,0,130,60, 180, 0);
            strokeWeight(2.25);
            arc(0,0,120,50, 180, 0);
            strokeWeight(2);
            arc(0,0,110,40, 180, 0);
    }
//creating the centre circles
    function eye1Center(){
            strokeWeight(0.5);
            ellipse(centerX,centerY-5, 5,1);
            strokeWeight(0.75);
            ellipse(centerX,centerY-5, 10,6);
            strokeWeight(1.0);
            ellipse(centerX,centerY-5, 15,11);
            strokeWeight(1.25);
            ellipse(centerX,centerY-5, 20,16);
            strokeWeight(1.5);
            ellipse(centerX,centerY-5, 25,21);
            strokeWeight(1.75);
            ellipse(centerX,centerY-5, 30,26);
    }

function noseType1(){
    push();
    centerX2 -= moveX2
    if(centerX2 > 500){
        moveX2 = random(0.5, 2)
    }
    if (centerX2 <-300) {
        moveX2 = random(-4.5, -2.5)
    }
        strokeWeight(3.5);
        stroke(254, 194, 15);
        beginShape();
        noseLinesType1();
        endShape();

        strokeWeight(3.25);
        push();
        scale(0.85);
        translate(42, 48)
        beginShape();
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(3.0);
        push();
        scale(0.75);
        translate(78, 89)
        beginShape();
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(2.75);
        push();
        scale(0.65);
        translate(128, 145)
        beginShape();
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(2.5);
        push();
        scale(0.55);
        translate(193, 220)
        noseLinesType1();
        endShape();
        pop();

        strokeWeight(2.25);
        push();
        scale(0.45);
        translate(290, 330)
        noseLinesType1();
        endShape();
        pop();
    pop();
}
    function noseLinesType1(){
        noFill();
        beginShape();
        curveVertex(centerX2+112, 181);
        curveVertex(centerX2+112, 181);
        curveVertex(centerX2+117, 195);
        curveVertex(centerX2+120, 202);
        curveVertex(centerX2+127, 218);
        curveVertex(centerX2+134, 231);
        curveVertex(centerX2+139, 241);
        curveVertex(centerX2+147, 255);
        curveVertex(centerX2+154, 268);
        curveVertex(centerX2+159, 279);
        curveVertex(centerX2+161, 284);
        curveVertex(centerX2+160, 290);
        curveVertex(centerX2+158, 292);
        curveVertex(centerX2+153, 296);
        curveVertex(centerX2+147, 299);
        curveVertex(centerX2+128, 300);
        curveVertex(centerX2+108, 295);
        curveVertex(centerX2+108, 295);
        endShape();
    }

function lipType1(){
    centerX3 += moveX3
    if(centerX3 > 300){
        moveX3 = random(-4.5, -1)
    }
    if (centerX3 <-300) {
        moveX3 = random(1, 4)
    }

    push();
    translate(20, -20);
    arrayLip1Lines();
    pop();

    push();
    translate(20, 805)
    scale(1,-1)
    arrayLip1Lines();
    pop();


    noFill();
    stroke(254, 194, 15);
    strokeWeight(2);
    push();
    translate(35, -23);
    rotate(2)
    beginShape();
    curveVertex(centerX3-27, 413);
    curveVertex(centerX3-27, 413);
    curveVertex(centerX3+4, 411);
    curveVertex(centerX3+30, 407);
    curveVertex(centerX3+44, 410);
    curveVertex(centerX3+58, 413);
    curveVertex(centerX3+102, 400);
    curveVertex(centerX3+132, 409);
    curveVertex(centerX3+161, 413);
    curveVertex(centerX3+192, 404);
    curveVertex(centerX3+192, 404);
    endShape();
    pop();
}
    function lip1Lines(){
        beginShape();
        curveVertex(centerX3-27, 412);
        curveVertex(centerX3-27, 412);
        curveVertex(centerX3+20, 386);
        curveVertex(centerX3+55, 369);
        curveVertex(centerX3+61, 366);
        curveVertex(centerX3+71, 365);
        curveVertex(centerX3+85, 370);
        curveVertex(centerX3+92, 374);
        curveVertex(centerX3+100, 375);
        curveVertex(centerX3+105, 370);
        curveVertex(centerX3+115, 365);
        curveVertex(centerX3+124, 367);
        curveVertex(centerX3+140, 376);
        curveVertex(centerX3+158, 388);
        curveVertex(centerX3+193, 412);
        curveVertex(centerX3+193, 412);
        endShape();
    }
    function arrayLip1Lines(){
        noFill();
        stroke(254, 194, 15);
        strokeWeight(3.5)
        lip1Lines();

        push();
        translate(22, 60);
        scale(0.9, 0.85)
        lip1Lines();
        pop();

        push();
        translate(45, 120);
        scale(0.8, 0.7)
        lip1Lines();
        pop();


        push();
        translate(66, 160);
        scale(0.7, 0.6)
        lip1Lines();
        pop();

        push();
        translate(87, 200);
        scale(0.6, 0.5)
        lip1Lines();
        pop();

        push();
        translate(110, 240);
        scale(0.5, 0.4)
        lip1Lines();
        pop();
    }

function eyeType2(){
    push();
    centerX4 += moveX4
    if(centerX4 > 200){
        moveX4 = random(-4.5, -1)
    }
    if (centerX4 <-200) {
        moveX4 = random(1, 4)
    }
        push();
        translate(centerX4, 0);

            noFill();
            strokeWeight(7);
            stroke(0);
            strokeCap(ROUND);
            arc(140, 95,120,50, 5, 175);
            arc(320, 95,120,50, 5, 175);
            arc(320, 95,120,50, 175, 5);
            
            ellipse(320, 95,25,25);

            line(80, 119, 90, 109);
            line(97, 131, 105, 115);
            line(120, 137, 124, 122);
            line(147, 138, 145, 123);
            line(175, 133, 169, 121);
            line(197, 123, 189, 113);


            push();
            translate(467,178)
            rotate(175);
            line(80, 119, 90, 109);
            line(97, 131, 105, 115);
            line(120, 137, 124, 122);
            line(147, 138, 145, 123);
            line(175, 133, 169, 121);
            line(197, 123, 189, 113);
            pop();
        pop();
    pop();
}

function noseType2(){
    push();
        centerX5 -= moveX5
        if(centerX5 > 400){
            moveX5 = random(1, 4)
        }
        if (centerX5 <0) {
            moveX5 = random(-4.5, -1)
        }
        push();
        translate(centerX5, 0);
            stroke(0);
            strokeWeight(5);
            noFill();
            beginShape();
            curveVertex(49, 161);
            curveVertex(49, 161);
            curveVertex(52, 190);
            curveVertex(63, 273);
            curveVertex(73, 321);
            curveVertex(73, 321);
            endShape();
        pop();
    pop();
}

function lipType2(){
    push();
    centerX6 += moveX6
    if(centerX6 > 300){
        moveX6 = random(-4.5, -1)
    }
    if (centerX6 <-300) {
        moveX6 = random(0.5, 2)
    }
        push();
        translate(centerX6, 0);
            stroke(0);
            push();
            scale(0.5,0.5);
            translate(250, 400);
                strokeWeight(15);
                push();
                translate(-20, -20);
                lip2Lines();
                pop();

                push();
                translate(400, 805)
                scale(-1,-1)
                lip2Lines();
                pop();

                noFill();
                push();
                translate(-5, -23);
                rotate(2)
                beginShape();
                curveVertex(98, 413);
                curveVertex(98, 413);
                curveVertex(129, 411);
                curveVertex(155, 407);
                curveVertex(169, 410);
                curveVertex(183, 413);
                curveVertex(227, 400);
                curveVertex(257, 409);
                curveVertex(286, 413);
                curveVertex(317, 404);
                curveVertex(317, 404);
                endShape();
                pop();
            pop();
        pop();
    pop();
}

    function lip2Lines(){
        beginShape();
        curveVertex(centerX11-27, 412);
        curveVertex(centerX11-27, 412);
        curveVertex(centerX11+20, 386);
        curveVertex(centerX11+55, 369);
        curveVertex(centerX11+61, 366);
        curveVertex(centerX11+71, 365);
        curveVertex(centerX11+85, 370);
        curveVertex(centerX11+92, 374);
        curveVertex(centerX11+100, 375);
        curveVertex(centerX11+105, 370);
        curveVertex(centerX11+115, 365);
        curveVertex(centerX11+124, 367);
        curveVertex(centerX11+140, 376);
        curveVertex(centerX11+158, 388);
        curveVertex(centerX11+193, 412);
        curveVertex(centerX11+193, 412);
        endShape();
    }

function eyeType3(){
    centerX7 += moveX7
    if(centerX7 > 200){
        moveX7 = random(-4.5, -1)
    }
    if (centerX7 <-200) {
        moveX7 = random(1, 4)
    }
    push();
    translate(centerX7, 0)
        push();
        scale(1.15, 1.15);
        translate(-25, -20);
            noFill(25);
            stroke(185, 82, 159);
            strokeWeight(2);
            line(83, 118, 154, 91);
            line(154, 91, 213, 98);
            line(213, 98, 212, 105);
            line(212, 105, 154, 97);
            line(154, 97, 83, 118);

            line(263, 106, 262, 100);
            line(262, 100, 321, 91);
            line(321, 91, 393, 118);
            line(393, 118, 322, 98);
            line(322, 98, 263, 106);

            push();
            rotate(4);
            translate(15, -10)
            strokeWeight(1);
            strokeCap(SQUARE)
            line(150, 135, 200, 135);
            strokeWeight(3);
            line(140, 125, 200, 125);
            pop();

            push();
            rotate(-4);
            translate(-20, 20)
            strokeWeight(1);
            strokeCap(SQUARE)
            line(275, 135, 330, 135);
            strokeWeight(3);
            line(275, 125, 335, 125);
            pop();
        pop();
    pop();
}

function noseType3(){
    centerX8 -= moveX8
    if(centerX8 > 200){
        moveX8 = random(1, 4)
    }
    if (centerX8 <-200) {
        moveX8 = random(-4.5, -1)
    }
    push();
    translate(centerX8, 0)
        push();
        scale(0.95);
        translate(20, 10);
            noFill(25);
            stroke(111, 204, 221);
            strokeWeight(3);
            beginShape();
            curveVertex(241, 173);
            curveVertex(241, 173);
            curveVertex(248, 229);
            curveVertex(268, 301);
            curveVertex(270, 310);
            curveVertex(268, 311);
            curveVertex(245, 308);
            curveVertex(225, 314);
            curveVertex(225, 314);
            endShape();

            strokeWeight(1);
            beginShape();
            curveVertex(235, 302);
            curveVertex(235, 302);
            curveVertex(245, 299);
            curveVertex(257, 301);
            curveVertex(257, 301);
            endShape();
        pop();
    pop();
}

function lipType3(){
    centerX9 += moveX9
    if(centerX9 > 200){
        moveX9 = random(-4.5, -1)
    }
    if (centerX9 <-200) {
        moveX9 = random(1, 4)
    }
    push();
    translate(centerX9, 0);
        push();
        scale(0.6, 0.5);
        translate(175, 350);
        noFill();
        stroke(246, 236, 19);
            strokeWeight(3);
            push();
            translate(20, -20);
            lip3Lines();
            pop();

            push();
            translate(437, 805)
            scale(-1,-1)
            lip3Lines();
            pop();


            noFill();
            strokeWeight(2);
            push();
            translate(35, -23);
            rotate(2)
            beginShape();
            curveVertex(98, 413);
            curveVertex(98, 413);
            curveVertex(129, 411);
            curveVertex(155, 407);
            curveVertex(169, 410);
            curveVertex(183, 413);
            curveVertex(227, 400);
            curveVertex(257, 409);
            curveVertex(286, 413);
            curveVertex(317, 404);
            curveVertex(317, 404);
            endShape();
            pop();
        pop();
    pop();
}
    function lip3Lines(){
        beginShape();
        curveVertex(centerX10-27, 412);
        curveVertex(centerX10-27, 412);
        curveVertex(centerX10+20, 386);
        curveVertex(centerX10+55, 369);
        curveVertex(centerX10+61, 366);
        curveVertex(centerX10+71, 365);
        curveVertex(centerX10+85, 370);
        curveVertex(centerX10+92, 374);
        curveVertex(centerX10+100, 375);
        curveVertex(centerX10+105, 370);
        curveVertex(centerX10+115, 365);
        curveVertex(centerX10+124, 367);
        curveVertex(centerX10+140, 376);
        curveVertex(centerX10+158, 388);
        curveVertex(centerX10+193, 412);
        curveVertex(centerX10+193, 412);
        endShape();
    }
//changing the options to respond to the image press
function mousePressed(){
    option++;
    if (option > 3) {
        option=1
    }
}

For this project I chose to use the ‘landscape’ of a face and using different portraits that moved around differently according to different given dimensions. With each mouse click you can change the type of portrait drawing that appears. Each portrait uses a different artistic quality to be drawn and in a way depicts the changing nature of the portrait like landscape.

For this project I wanted to play around with creating objects and figuring out ways to call them in the draw function and found this to be a project that really helped me understand methods of doing that. I used different object call systems for the eyes, noses, and lips on each of the portraits.

^initially I wanted the objects to appear like a film strip rather than having to be clicked through

ssharada-looking-outwards-09

^DIFFUSION from Kouhei Nakama

I took Kornrat Euchukanonchai’s looking outwards 05 post which was a week where we were tasked with looking at 3D computer graphics and their capabilities. Kouhei Nakama is a visual art director who also works for a company that does large scale commercial work.

Here he uses a variety of generative and particle based animation to bring 3D figures to life in this motion graphics short piece titled diffusion. Nakama work destroys the boundaries between the human form and geometric using 3D graphics.

In this particular piece, the body is blended with different textures that range from organic to more alien and computer like. The human’s flesh and body is stretched and elongated to its maximum capacity. It changes colours and patterns while questions about evolution are revoked.

I really liked looking at this video because it was a complete deviation from what I had looked at in my looking outwards 5 so it was nice to see the other extent of what is possible with 3D graphics.

ssharada-project-09-computational-portrait

project09.js

//shariwa sharada
//ssharada@andrew.cmu.edu
//section a
//project 09

var pinkShari;
var blueShari;
var sAngle = 1;
var sRadius = 5;
var sFrameCount = 0;
var pEllipseW = 5;
var bEllipseW = 5;


var pinkShariArray = []

function preload(){
    //initialising my portraits 
    var pinkShariUrl = "https://i.imgur.com/Kglw2lq.png"
    var blueShariUrl = "https://i.imgur.com/4ODxlV0.png" 
 
    //loading my portraits 
    pinkShari = loadImage(pinkShariUrl);
    blueShari = loadImage(blueShariUrl);


}

function setup(){
    createCanvas(400,480); 
    background(255,255,0);
    noStroke(); //the ellipses should have no border 

    //initiallising the pixels in each of my portraits 
    pinkShari.loadPixels(); 
    blueShari.loadPixels();

}

//creating the spirals for the pink portrait 
function pinkDrawSpiral(){
    push();
    //the image begins at a part of the canvas determined by the trasnslate
    translate(300, 100);
    //creating variables to relate the spirals to the pink image 
    var pinkShariCenterX = 0;
    var pinkShariCenterY = 0;
    var pX = cos(radians(sAngle)) * sRadius; 
    var pY = sin(radians(sAngle)) * sRadius;

    //getting the colour of each of the pixels 
    var pinkColourAtpXpY = pinkShari.get(width/2 - pX, height/2 + pY);
    fill(pinkColourAtpXpY);

    //alloting the pixels so that each one matches up to the above obtained colour
    ellipseMode(CENTER);
    ellipse(pinkShariCenterX - pX, pinkShariCenterY + pY, pEllipseW, pEllipseW);

    //setting up the sizing of the pixels 
    sAngle = sAngle +3;
    sRadius = sRadius + 0.035;
    sFrameCount = sFrameCount + 1;
    pEllipseW = pEllipseW + 0.0002;


    //my image has borders but since the canvas borders aren't the image's
    //border, i had to accoung for the spiralling to only go to a certain
    //limit otherwise it would look very tacky

    //if there are more than 4750 pixels made, the spiralling will restart
    if (sFrameCount > 4750){
        sAngle = 5;
        sFrameCount = 0;
        sRadius = 1;
        pEllipseW = 5;
    }
    pop();

    print(frameCount)
}

//creating the spirals for the blue portrait 
function blueDrawSpiral(){
    push();
    //the image begins at a part of the canvas determined by the translate
    translate(100, 380);
    //creating variables to relate the spirals to the blue image 
    var blueShariCenterX = 0;
    var blueShariCenterY = 0;
    var bX = cos(radians(sAngle)) * sRadius;
    var bY = sin(radians(sAngle)) * sRadius;

    //getting the colour of each of the pixels 
    var blueColourAtpXpY = blueShari.get(width/2 - bX, height/2 + bY);
    fill(blueColourAtpXpY);

    //alloting the pixels so that each one matches up to the above obtained colour
    ellipseMode(CENTER);
    ellipse(blueShariCenterX + bX, blueShariCenterY - bY, bEllipseW, bEllipseW);

    //setting up the sizing of the pixels 
    sAngle = sAngle +3;
    sRadius = sRadius + 0.035;
    sFrameCount = sFrameCount + 1;
    bEllipseW = bEllipseW + 0.0002;

    //my image has borders but since the canvas borders aren't the image's
    //border, i had to accoung for the spiralling to only go to a certain
    //limit otherwise it would look very tacky

    //if there are more than 4750 pixels made, the spiralling will restart
    if (sFrameCount > 4750){
        sAngle = 5;
        sFrameCount = 0;
        sRadius = 1;
        bEllipseW = 5;
    }
    pop();

    print(frameCount)
}


//Creating the spirals using the ellipses of colour from the images 
function draw(){

    pinkDrawSpiral();

    blueDrawSpiral();

}

For this project I wanted to use a photo of me in two different colour filters. To do this I edited the same photo of me in photoshop in a magenta filter and in a blue filter. I then wanted to create this gradual emergence of me from the centre of the image, and then the two images would almost blend into each other.

For each of my images I had the issue of where to place it on the canvas because I had to take into account that each image was a PNG and it had no background but the code would still read the entire image and then draw the ellipses which is why I chose to mirror and translate the images.

^initial run of the spiral

^possible final outcome

ssharada-looking-outwards-08

Eyeo 2016 – Jenny Odell from Eyeo Festival // INSTINT on Vimeo.

Jenny Odell is an American from the San Francisco Bay Area. Her work combines the mining of online imagery with writing and research, usually in an attempt to highlight the material nature of our modern networked existence. Because her practice involves collecting, tagging and cataloguing, she has often been compared to a natural scientist – specifically, a lepidopterist. She teaches internet art and digital/physical design at Stanford.

http://www.jennyodell.com/

This talk analyses Hockney’s relationship toward technology — from a montage to faxes, early computer drawings, and a car-mounted camera system inadvertently reminiscent of StreetView — as a model for how an artist might engage new technologies without fetishising them. From there, the talk moves on to consider Daniel Jones and James Bulleys’ Living Symphonies, Camille Utterback’s Entangled, and Erica Molesworth’s Silicon Landscapes as contemporary examples that place people in the physical, embodied world. She tries to contextualize her own Bureau of Suspended Objects as an effort to use the digital as a portal back into the physical.

What I like the most about her presentation is that she makes processing seem like a thing that everyone should be taking an interest in – be in the the digital form or the more analogue form of processing which is done through the interaction of daily objects. She does this by taking objects everyone recognises and owns and makes that into art.

Author: ssharada@andrew.cmu.edu

ssharada-final-project-section-a