Author: Isabella Ouyang

yushano_Final Project

yushano-12
sketch

//Isabella Ouyang
//Section A
//yushano@andrew.cmu.edu
//Assignment-12

var choice = [];
var trees = [];
var snowmen = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var thespeed = 1;
var songs=[];
var textX = 0;
var playMusic = false;

function preload() {
   var song1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/all-i-want-for-christmas-is-you.mp3");
   var song2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/ChristmasIsntChristmas.mp3");
   var song3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/jingle-bell.mp3");
   var song4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/silent-night.mp3");
   songs.push(song1);
   songs.push(song2);
   songs.push(song3);
   songs.push(song4);
   imgplus = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/plus.jpg");
   imgmusic = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/music.jpg");
   imgminus = loadImage("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/minus.jpg");
}

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

function draw() {
    background(205,233,233); 

    // display the background
    stroke(0);
    strokeWeight(1);
    drawMountain();
    displayHorizon();

    // draw objects
    // Ferris Wheel
    // update the rotation
    drawFerrisWheel();
    thespeed += 0.5;
    
    // Trees
    updateAndDisplayTrees();
    addNewTreesWithSomeRandomProbability();

    // Snowmen
    updateAndDisplaySM();
    addNewSMWithSomeRandomProbability();

    // snow
    drawSnow();

    // window frame
    strokeWeight(40);
    stroke(230);
    line(0,0,0,height);
    line(width,0,width,height);

    // load buttons
    image(imgplus,width-20,10);
    image(imgmusic,0,10);
    image(imgminus, width-20, 40);

}

function drawFerrisWheel(){
    strokeWeight(2);
    noFill();
    
    // draw the structure
    noStroke();
    fill(200);
    rect(width/2-2,height/2,4,85);
    fill(150);
    ellipse(width/2,height/2,10);
    rect(width/2-20,height/2+80,40,5);

    // draw the curve
    push();
    noFill();
    translate(width / 2, height / 2);
    rotate(thespeed);
    // the curve inside
    for (var i = 0; i < 8; i++) {
        // calculate the gradient of color
        var r = 207 - (207 - 152) / 6 * i;
        var g = 171 - (171 - 92) / 6 * i;
        var b = 177 - (177 - 103) / 6 * i;
        stroke(r, g, b);
        drawTetracuspidCurve();    
        rotate(PI / 14);
    }
    pop();   
    
}

function drawTetracuspidCurve(){
    var nPoints = 400;
    var x;
    var y;
    var a = 75;
    var ph = 0;
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a / 4 * (3*cos(t) -  cos(ph + 3 * t));
        y = a / 4 * (3*sin(t) +  sin(ph + 3 * t));
        vertex(x, y);
        push();
        // draw the cart at each peak
        if (x == 0 || y == 0) {
            for (var i = 0; i < 4; i++) {
                fill(204, 229, 255);
                rect(x + 35, y + 3, 10, 10);
                rotate(TWO_PI / 4);
            
            }    
        }
        pop();
    }
    endShape(CLOSE);    
}

function drawMountain() {
    fill(255); 
    noStroke();
    beginShape(); 
    vertex(0, 200);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 30, 200);
        vertex(x, y);    
    }
    vertex(width, 200);   
    endShape();
}

function drawSnow() {
    var xS = 10;
    var yS;
    for (var i = 0; i < 50; i++) {
        yS = 0;
        for (var j = 0; j < 25; j++){
            stroke(255);
            strokeWeight(0.5);
            //noStroke();
            ellipse(xS, yS, 2);
            line(xS - 3, yS - 3, xS + 3, yS + 3);
            line(xS + 3, yS - 3, xS - 3, yS + 3);
            line(xS, yS - 3, xS, yS + 3);
            yS += random(10, 20);
        }
        xS += random(8, 25);    
    }
}

    
// DRAW THE CHRISTMAS TREE
function updateAndDisplayTrees() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.1; 
    if (random(0,1) < newTreeLikelihood) {
        var theX = random(20, width-20);
        trees.push( makeTree(theX,0) );
    }
}


// method to update position of tree every frame
function treeMove() {
    this.y += this.speed;
}
    

// draw the tree and some ornaments
function treeDisplay() { 
    stroke(0); 
    push();
    translate(this.x, this.y);
    // tree
    strokeWeight(0.5);
    fill(0, 102, 51);
    triangle(0, this.y + 30, this.breadth / 2, this.y, this.breadth, this.y + 30); 
    fill(108,22,22)
    rect(this.breadth / 2 - 5, this.y + 30, 10, this.treeH / 3);
    // ornaments
    var x0 = this.breadth / 6;
    for (var i = 0; i < 5; i++){
        fill(255, 0, 0);
        ellipse(x0, this.y + 25, 5);
        x0 += this.breadth / 6;
    }
    pop();
}


function makeTree(birthLocationX, birthLocationY) {
    var tree = {x: birthLocationX, 
                y: birthLocationY,
                breadth: 30,
                speed: 2.0,
                treeH: 10,
                move: treeMove,
                display: treeDisplay}

    return tree;
}

// DRAW THE SNOWMAN
function updateAndDisplaySM() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < snowmen.length; i++){
        snowmen[i].move();
        snowmen[i].display();
    }
}

function addNewSMWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newSMLikelihood = 0.1; 
    if (random(0, 1) < newSMLikelihood) {
        var theX = random(20, width - 20);
        snowmen.push(makeSnowman(theX,0));
    }
}


// method to update position of sm every frame
function smMove() {
    this.y += this.speed;
}
    

// draw the snowman 
function smDisplay() { 
    stroke(0); 
    push();
    translate(this.x, this.y);
    // tree
    fill(245);
    strokeWeight(0.8);
    ellipse(this.x, this.y + 8, 13);
    ellipse(this.x, this.y, 8);
    // ornaments
    fill(255, 0, 0); // the hat
    triangle(this.x - 2, this.y - 4, this.x, this.y - 7, this.x + 2, this.y - 4);
    fill(0); // eyes
    ellipse(this.x - 2, this.y, 1);
    ellipse(this.x + 2, this.y, 1);
    fill(255, 128, 0);
    triangle(this.x - 1, this.y + 2, this.x + 1, this.y + 2, this.x, this.y + 6);
    pop();
}


function makeSnowman(birthLocationX, birthLocationY) {
    var snowman = {x: birthLocationX, 
                y: birthLocationY,
                speed: 2.0,
                move: smMove, 
                display: smDisplay}

    return snowman;
}

// Draw the soil 
function displayHorizon(){
    stroke(0);
    fill(0, 51, 102);
    rect (0, height - 40, width, 40);
}

// Interaction with user
function mousePressed() {
    // button to play the music
    if (mouseX < 20 & mouseY < 30 && mouseY > 10) {
        playMusic = !playMusic;
    }
    if ( playMusic == false ) {
        for (var i = 0; i < songs.length; i++ ){
            if (songs[i].isPlaying()) {
                songs[i].stop();
            }
        }
    } else {
        songs[floor(random(1,5))].play();
    }
 

    // button to add more Christmas trees or snowmen
    if (mouseX > width-20 & mouseX < width && mouseY < 30 && mouseY > 10) {
        var choice = ceil(random(0,2));
        if (choice == 1) {
            trees.push(makeTree(random(20, width - 20),0));
        } else {
            snowmen.push(makeSnowman(random(20, width - 20),0));
        }
    }
    // button to get rid of some Christmas trees or snowmen
    if (mouseX > width-20 & mouseX < width && mouseY < 60 && mouseY > 40) {
        var choice = ceil(random(0,2));
        if (choice == 1) {
            trees.pop(makeTree(random(20,width-20),0));
        } else {
            snowmen.pop(makeSnowman(random(20,width-20),0));
        }

    }
}

My final project is an interactive animation which I try to mimic the Christmas scene. I integrate the use of curve (string art), music and images into this project. The center is a ferris wheel that is coded by curves. The Christmas trees, snowmen and snow are also coded instead of using images. The mountain behind are winter snow mountain.

Instruction:

If you press the music button on the left, it will play a random music. If you click it again, it stops. If you click it again then, it plays next random song. If you press the plus or minus button on the right, there will be more or less Christmas trees or snowmen that are falling from the sky.

yushano_Project 12

Final Project Proposal

What I plan to do for my final project is an animation and games combined. I will try to imitate a Christmas scene with a start page and then the scene will change to a moving Ferris wheel in the center with background music. There will be random Christmas stuff that falls from the sky. If the user press them, there will be sound and also the stuff will disappear. You may get points added or off depending on the objects that you press. Also, the speed of the game will accelerate at some point.

yushano_Looking Outwards 12

 

http://www.creativeapplications.net/js/norman-webvr-tool-to-create-frame-by-frame-animations-in-3d/

Created by James Paterson, Norman is an open-source WebVR tool to create frame-by-frame animations in 3D. Drawing inspiration and building on the work from Rhonda (2004/05), James turned to WebVR to build the tool in Javascript that runs in a web browser and lets him animate naturally in 3D using VR controllers.

http://www.creativeapplications.net/c/block-bills-64-banknotes-generated-from-the-bitcoin-blockchain/

Created by Matthias Dörfelt, ‘Block Bills’ is a series of 64 banknotes generated from the Bitcoin Blockchain. Each banknote represents one block in the chain and the whole series consist of 64 consecutive blocks starting at block

I was attracted by these two work at the first sight. For the first one, I like it because I think using coding to do animation is very interesting and it is something that I have wanted to do for a long time. The animation is interactive for audience because it is not static. Also, the storyline also attracts the audience. It even uses VR to interact with the audience, which makes it more interactive. For the second work, the quality of the design impressed me. I like the design for just a bill using coding. I like how the author uses simple coding to generate or compose a such abstract design of a bill.  This work is very aesthetic, but I think it can be more interactive. I know it is a design for bill, which is static, but it will be fun if it is an animation.

 

yushano_Project 11

sketch

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 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(random(255),random(255),0),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, 
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

function setup() {
    createCanvas(480, 480);
    background(0);

}

var turtleX = [];
var turtleY = [];
var radius = 5;

function draw() {
  for (var num=0; num<turtleX.length; num++){
    var turtle = makeTurtle(turtleX[num], turtleY[num]);
    var angle=20;
    
    for (var i=0; i<20; i++) {
        turtle.penDown();
        turtle.right(angle);
        turtle.forward(radius);
      
      turtle.penUp();
      turtle.x = turtleX[num];
      turtle.y = turtleY[num];
    }
  }
  if(radius<200){
    radius += 0.5;
  }
}

function mousePressed(){
  
  turtleX.push(random(width));
  turtleY.push(random(height));

}

When users press the mouse on the canvas, there will be a turtle that is placed randomly on canvas generated. The size of each firework is also changing. This idea is inspired by the firework that we can see on celebration days.

yushano_Looking Outwards 11

Florian Hecker: “Event, Stream, Object”

“Event, Stream, Object is a sound installation by German artist Florian Hecker, that has now been acquired for MMK’s collection in Frankfurt. Presented in the exhibition ”Radical Conceptual“ (February 19 – August 22, 2010), the work consists of a loudspeaker system suspended from the ceiling used to convey a computer-generated, eight-channel sound composition. Each individual loudspeaker plays a sequence of sounds allocated to it and, in itself complex, becomes a part of the acoustic whole with its differing frequencies and volumes”.

What I like about this sound installation is that the mirrors that hung from the ceiling can actually alter the atmospheric sounds’ waves, besides that it can reflect the visitors’ appearance. His concept of incorporating space and architecture into music. His projects are not actually traditional music that is composed. Rather, it is more like a interactive sound art because the sound shift and vary depending on the listener. When the audience change their physical locations in the space and also their personal biases and points of reference, the sound will change as well. I think his idea that listing is driven by the desire for understanding is shown here in a very elegant way. Also, the mirrors are able to generate eight channels of sound, which makes the sound very dimensional.
I think the idea of taking the listeners into account of sound generating is really appealing and interesting. It not only attracts the audience to pay attention on or play with your work, but also provides more opportunities for artists in creation.

yushano_Looking Outwards 10

Website

“We Make the Weather is an interactive breath-controlled installation created for New Cinema program hosted by Eyebeam and The Creator’s Project. Inspired by Hurricane Sandy, it uses seam carving, breath detection, motion capture, and the Unity game engine to explore the human impact on the environment”.
Karolina Sobecka is one of the main designers in this project. This project is teamed up by filmmakers, creative coders, artists, designers and motion graphics specialists to investigate the future of cinematic storytelling in the New Cinema hackathon. In We Make The Weather, the viewer wears a headset with a microphone sensor that monitors his or her breath and tracks its ebb and flow, and level of intensity, then uses this information to controls a virtual figure crossing a never-ending bridge, powering the visuals and sound within the 3D animated landscape.
I think this project is really amazing because it combines narrative and interactive themes together. It blends their idea that human beings are actually influencing and changing the environment no matter what you are doing, even breathing, into the movie-like scene. This project puts audience into a movie scene and let the audience feel and sense the effects that they can impose to the environment. The project idea is really amazing and meaningful. Also, the technology that they use are very broad. They use 3D animation tool, virtual reality technologies and so on to create the interactive scene. Such installation with both narrative and interactive theme should be more widely spread.

yushano_Project 10

sketch

var choice = [];
var buildings = [];
var trees = [];
var cars = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
 


function setup() {
    createCanvas(480, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}

function draw() {
    background(205,233,233); 


    // display the background
    stroke(0);
    strokeWeight(1);
    drawMountain();
    displayHorizon();
    

    // draw objects
    // Buildings
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    // Trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    // Cars
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();


    // snow
    drawSnow();

    // window frame
    strokeWeight(40);
    stroke(230);
    line(0,0,width,0);
    line(0,0,0,height);
    line(0,height,width,height);
    line(width,0,width,height);
}

function drawMountain() {
    fill(246,255,223); 
    beginShape(); 
    vertex(0, 200);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 30, 200);
        vertex(x, y);    
    }
    vertex(width, 200);   
    endShape();
}

function drawSnow() {
    var xS = 10;
    var yS;
    for (var i=0; i< 50; i++) {
        yS = 0;
        for (var j=0; j< 25; j++){
            fill(255);
            noStroke();
            ellipse(xS, yS, 5);
            yS += random(5,20);
        }
        xS += random(8,25);    
    }
}

    

function updateAndDisplayBuildings() {
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView() {
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.02; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255,255,0); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    var wGap = this.breadth/16;
    var xW = this.breadth/16;
    //draw the windows
    for (var j=0; j < 5; j++) {
        for (var i = 0; i < this.nFloors; i++) {
            fill(153,204,255);
            stroke(102,178,255);
            rect(xW, -15 - (i * floorHeight), wGap*2 , 10);
        }
        xW += wGap*3;
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                nFloors: round(random(3,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

// DRAW THE CHRISTMAS TREE
function updateAndDisplayTrees() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the current trees
}


function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.03; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}


// method to update position of tree every frame
function treeMove() {
    this.x += this.speed;
}
    

// draw the tree and some ornaments
function treeDisplay() { 
    stroke(0); 
    push();
    translate(this.x, 0-this.treeH/3);
    fill(0,102,51)
    triangle(0, height-40, this.breadth/2, height-this.treeH-80, this.breadth, height-40); 
    fill(108,22,22)
    rect(this.breadth/2-10, height-40, 20, this.treeH/3);
    var x0 = this.breadth/6;
    for (var i=0; i<5; i++){
        fill(255,0,0);
        ellipse(x0, height-40-5, 6);
        x0 += this.breadth/6;
    }
    pop();
}


function makeTree(birthLocationX) {
    var tree = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                treeH: round(random(30,80)),
                move: treeMove,
                display: treeDisplay}
    return tree;
}

// DRAW VEHICLES
function updateAndDisplayCars() {
    // Update the car's positions, and display them.
    for (var i = 0; i < cars.length; i++){
        cars[i].move();
        cars[i].display();
    }
}


function removeCarsThatHaveSlippedOutOfView() {
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep; // remember the current cars
}


function addNewCarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new car to the end.
    var newCarLikelihood = 0.02; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


// method to update position of car every frame
function carMove() {
    this.x += this.speed;
}
    

// draw the car
function carDisplay() {
    stroke(0); 
    push();
    translate(this.x, 0);
    fill(180)
    rect(0, height-40-this.carWid/6, this.carWid, this.carWid/6);
    rect(this.carWid/4, height-40-this.carWid/30*11, this.carWid/5*3, this.carWid/5); 
    ellipse(this.carWid/6, height-40, this.carWid/6);
    ellipse(this.carWid/6*5, height-40, this.carWid/6);
    
    
    pop();
}


function makeCar(birthLocationX) {
    var car = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                carWid: round(random(30,50)),
                move: carMove,
                display: carDisplay}
    return car;
}


// Draw the soil 
function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
    fill(132, 75,47);
    rect (0, height-50, width, 50);
}

So, I started from the example code that professor provided for us. I tried to understand how all the things work. Then, I added more elements into the landscape. First, I added the mountain landscape in the background. Then, I change the orientations of the windows in the house. Then, I added the Christmas trees into the scene. Next, I added vehicles- cars to make the picture more fun. At last, I was inspired by the movie “The Power of Ten”. So, I give the animation a picture frame, making it look like people watching outside of a window. Also, I simulated the feeling of snowing to add more fun.

yushano_Looking Outwards 9

Peer: Clair Sun
Peer’s Post: https://courses.ideate.cmu.edu/15-104/f2017/2017/10/01/sijings-lookingoutwards-06/

Artist’s Site: http://color-wander.surge.sh/

 


Form1 | 2016 | Matt Deslauriers


Form2 | 2016 | Matt Deslauriers


Form4 | 2016 | Matt Deslauriers

Matt Deslauriers is an artist from Toronto, Canada. This is a weekend project for him that shows the generative work of art and javascript. In his websites, the these works are all generated in realtime. The idea like noise and maps are implemented in this project. Basically, Clair introduces his project and talks about her appreciation towards Matt Deslauriers’s artwork which combines randomization, technology and aesthetics. I agree with her opinion that this is an interesting artwork. What’s more, I think this project is more relative to use as programming starters. He shows us his working process in his website; therefore, we can learn from his codes and his design ideas. This artist is really helpful as a learning source for our project. I think if I have seen this post earlier, I am able to do my projects better.

The idea of combining art and coding is not fresh anymore. Therefore, coding becomes a big part in digital art. Deslauriers’s experiments in his projects is worthy for us to learn and experiment by ourself as well.

yushano_Project09

sketch

var proPic =  "https://i.imgur.com/79iDeUB.jpg"; 
var x0;
var y0;
var dx;
var dy;
var colAtPoint;

function preload() {
    profilePic = loadImage(proPic);
}


function setup() {
    createCanvas(480, 480);
    background(0);
    profilePic.loadPixels();
    x0 = random(width);
    y0 = random(height);
    dx = random(-1,1);
    dy = random(-1,1);
    frameRate(20);
}



function draw() {   
    // constriants of the location of the ellipse 
    if (x0 >= width || x0 <= 0) {
        dx = -dx
    }  
    if (y0 >= height || y0 <= 0) {
        dy = -dy        
    } 

    // get the color of the ellipse
    ix = constrain(floor(x0), 0, width-1);
    iy = constrain(floor(y0), 0, height-1);
    colAtPoint = profilePic.get(ix, iy); 
    noStroke();
    fill(colAtPoint);
    ellipse(x0, y0, 10);

    // update the coordinates of the ellipse
    x0 += dx*5 ;
    y0 += dy*5 ;
}

// the ellipse starts at the point that the user clicks
function mousePressed() {
    x0 = mouseX;
    y0 = mouseY;
    dx = -dx;
    dy = -dy;
}

The idea of my project derives from one of the Looking Outwards, which I researched about a robot that create art automatically. So, my work basically follows a similar rule. The point start from a random place that is on the canvas. If you press the canvas, the start point will change to the point that you press but the direction will be opposite to the original directions. The canvas will be very geometrical during the drawing process because the drawing process has a certain pattern that organizes the canvas. Because of my personal preference towards geometries and order, the pattern that is being drawn can also serve as a drawing.

yushano_Looking Outwards 8

Website
Original Soundtrack

Speaker: L05

The speaker, L05 (Carlos Garcia), is an artist, performer, designer, and engineer. He is a vocalist and producer in hip hop/electronic duo Celsius Electronics and a co-founder of the Branch Out Collective. He leads creative research and design as a member of the University of Michigan’s Emerging Technologies Group, where he manages the GroundWorks Media Lab. L05 is a 2013 Creative Capital Grantee and a 2016 Kresge Artist Fellow. He is in an art group called Complex Movements, which is “a Detroit-based artist collective supporting the transformation of communities by exploring the connections of complex science and social justice movements through multimedia interactive performance work like science fiction, music, projections, animation, workshops, and organizing”.
I deeply admire their current project Beware of the Dandelions, a mobile art installation that functions as a performance, workshop space, and visual arts exhibition. As a project, Beware of the Dandelions exceeds the scope of the performances. The collective started the project very early in 2013 and finished in early this year. They reason why this project took so long is that it is not just a performance piece; rather, is a mobile platform that organizes social-justice movements. First, the Beware of of the Dandelious live performance is a very fictionalized synthesis of the social-justice movements. Second, it shows “community mode” through the members of the art collective who run workshops in partnership with local artists and activists of their performing cities in order to acknowledge the events that are happening there and to understand the needs of people living there. Third, in installation mode, they “present the stories they have gathered in the process of interacting with locals, documenting and sharing social-justice work that goes largely ignored by mainstream media”. Complex Movements uses such experience to show and present performances of Beware of the Dandelions to their audience, centering story progression around the difference in their work.
This kind of presentation is really appealing to me that it can actually affects or just leave impression in people’s hearts.