Category: Section A

hdw – Project 10 – Landscape

sketch

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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


function draw(){
  background(0, 29, 76);

//draw sun
  sun();

//draw landscape
    noStroke()
    fill(44, 0, 206);
    beginShape();
    for (var x = 0; x < width; x++) {
      var u = x * terrainDetail + millis() * terrainSpeed;
      //restrict map to bounded range
      var y = map(noise(u), 0,1, 110, height/2);
      //bring waves up
      vertex(x,y+100);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

//draw the lines in the front of the landscape
    for (var k = 0; k < 30; k++){
    stroke(255);
    beginShape();
    for (var x = 0; x <width*5; x++) {
      var u = x * terrainDetail + millis() * terrainSpeed;
      var y = map(noise(u), 0,1, 110, height/2);
      //make lines start left of each other, y modified to start beyond canvas
      vertex(x-5*k,y+100+5*k);
    }
    vertex(width*5,height);
    vertex(0,height);
    endShape();
}
}

//draw sun
function sun() {
  fill(255, 59, 0);
  ellipse(240,290,400,400);
  //white circle outlines
  for (var j = 0; j < 36; j++){
  noFill();
  stroke(255);
  strokeWeight(1);
  ellipse(240,290,400 + 10*j,400 + 10*j);
  }
}

This was kinda hard so I kept it simple. I have an object sun in the back, and layered the foreground to create a sense of depth, instead of doing so with different colors.

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

HaeWanPark-LookingOutwards-10

Changing Waters by Nathalie Miebach

Nathalie Miebach is a women data artist who is usually working with weather data with interdisciplinary execution. She incorporates data, science, visualization, and music. She visually articulates weather data into complex weaved sculptures. Then, she makes these sculptures into musical scores. Changing Water is a series of sculpture that visualizes seasonal variation in marine life based on the data about meteorological and oceanic interactions within the Gulf of Maine. She gathered these data from weather stations along the coast and buoys within the Gulf of Maine. Information about geographical location and relationship between ecosystem and weather are plotted on all the installations. I admire her because she combined multiple disciplines in translating data. Incorporation of the data, scientific knowledge, sculpture, and music composing is very unique.

Changing Waters

thlai-LookingOutwards-10

An interfaith mandala DIMONscape® based on the crucifixion
Roz Dimon
Now that it was brought to my attention, most or all of my looking outwards for the past 10 weeks have been about men creators, so it’s a breath of fresh air to focus on something different. Roz Dimon is a digital artist based in NYC – her work has a very unique style that I like, which is why it drew my eye.
Dimon works in a collage style for a lot of her projects, which result in multilayered images and textures composed in a single image. As a communication designer, I find her work engaging and exciting. One of her most recent works is still on exhibition now until November 18th in Connecticut – the exhibition aims to bring together her works that embody multiculturalism and inter-religious unity. I not only like the pieces in this exhibition (which include the works of several artists, Dimon being one of them), but also the message of highlighting the aspects of humanity that unite us rather than divide us. I’ve included an image of Dimon’s piece that is exhibited. It has the same collage-y feel of her other works, although I wish she didn’t write the words “peace, love, justice”. I just don’t think it’s necessary in the context of the piece.

mjeong1-Project-10-SectionA

sketch



var terrainSpeed = 0.001;
var terrainDetail = 0.009;
var terrainDetail2 = 0.003;
var stars = [];
var clouds=[];

function setup() {
    createCanvas(500,500);
    frameRate(10);
    for (var s = 0; s < 3000; s++) {
        stars.push(new Star());
    }
    //array for stars
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }
    //array for clouds
}


function draw() {
    stroke(255);
    strokeWeight(3);    

    var bgColor2 = color(164,174,224);
    var bgColor1 = color(66, 38, 89);
    gradient(0,0,width,height,bgColor1,bgColor2);
    //draw background gradient
    DrawStar();
    drawmountains();
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    train();
}

function Star() {
    //randomized stars

    this.x = random(width);
    this.y = random(height);
    this.di = random(0,1);
    this.speed = 0.5;
    this.border = random(0, 0.3);
    this.vol = 0; 
    this.move = function() {
    this.x += random(-this.speed, this.speed + this.vol);
    this.di = this.di +this.vol;
    var prob = random(0, 1);
    if (this.di <= 0.16) {
      this.vol = 0.001;
    }else if(this.di>=0.16){
    this.vol=0;}

  }

  this.display = function() {
    strokeWeight(this.border);
    stroke(255);
    fill(255);
    ellipse(this.x, this.y,  this.di,  this.di);

  }
}

function DrawStar() {
  for (var i = 0; i < stars.length; i++) {
    stars[i].move();
    stars[i].display();
  }
}


function gradient(x,y,wid,y2,c1,c2){
    noFill();
    for (var i = y; i < y+y2; i++){
        var inter = map(i,y,y+y2,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(x,i,x+wid,i);
    }

}
function drawmountains() {
    noStroke();
    fill(232,183,239,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.6);
        vertex(x, y+100); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(163,123,186,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.7);
        vertex(x, y+200); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    fill(153,71,117,100);
    beginShape();
    for (var x=0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height*0.1);
        vertex(x, y+400); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}

function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


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


function addNewCloudsWithSomeRandomProbability() {
    
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function buildingMove() {
    this.x += this.speed;
}
    


function buildingDisplay() {
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight; 
    
    fill(255,90); 

    push();
    fill(255,20)
    translate(this.x, height - 40);
    ellipse(30, - bHeight -200, this.breadth, bHeight);
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(100, 300),
                speed: -random(1,3),
                nFloors: round(random(2,10)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function train() {
    fill(106,67,132);
    for (var i = 0; i < 3; i++){
        rect(i * 105,400,100,50);
        push();
        fill(255,206,173);
        rect(i * 105 +10,405,80,20);
        pop();
        beginShape();
        vertex(305,400);
        vertex(305,400);
        curveVertex(325,410);
        curveVertex(345,430);
        curveVertex(350,450);
        vertex(305,450);
        vertex(305,450);
        endShape();
    }
    for(var i = 0; i  < 315; i+= 30){
        ellipse(i+5,450,10,10);
    }
    rect(295,380,15,20);
    fill(255,150);
    ellipse(270,370,50,20);
    ellipse(210,350,70,30);
    ellipse(130,330,90,40);

}
//creating train and smoke

For this assignment I created a 2D animation. I wanted the train remain unmoving and the back ground terrain so that the combination of two can create an illusion. The randomized size and speed of the stars made shiny effect for the stars. Also I lowered the opacity of terrains and clouds to highlight the movement of the train.

 

keuchuka – project -10

project10

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-10

var plates = [];
var plates2 = [];
var plates3 = [];

var sushi = [];
var sushi2 = [];
var sushi3 = [];

var salmon;
var roe;
var egg;
var seaweed;

//preload all images of sushi and gradients
function preload(){
	var bgLink = "https://i.imgur.com/alDAyjZ.jpg"
	var bar1Link = "https://i.imgur.com/60amesK.png"
	var bar2Link = "https://i.imgur.com/fghTsKQ.png"
	var bar3Link = "https://i.imgur.com/SCIYqYe.png"

	var salmonLink = "https://i.imgur.com/Cb4N5Lb.png"
	var roeLink = "https://i.imgur.com/rJjcqJo.png"
	var eggLink = "https://i.imgur.com/FMF2QvN.png"
	var seaweedLink = "https://i.imgur.com/QbnIWmr.png"

	salmon = loadImage(salmonLink)
	roe = loadImage(roeLink)
	egg = loadImage(eggLink)
	seaweed = loadImage(seaweedLink)

	bg = loadImage(bgLink)
	bar1 = loadImage(bar1Link)
	bar2 = loadImage(bar2Link)
	bar3 = loadImage(bar3Link)
}


function setup() {

	createCanvas(480, 360)
		
	}

//make new plates for first belt
function makenewPlates(){
	//even-ish chance of getting different types of sushi
	if(random(0,2)<0.0025 & random(0,2)> 0.000){
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, salmon))

	} else if(random(0,2)<0.005 & random(0,2)> 0.0025) {
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, egg))

	} else if(random(0,2)<0.0075 & random(0,2)> 0.005) {
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, roe))

 	} else if(random(0,2)<0.01 & random(0,2)> 0.075) {
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, seaweed))
 
	}
}

//make new plates for second belt
function makenewPlates2(){

	if(random(0,2)<0.0025 & random(0,2)> 0.000){
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, salmon))

	} else if(random(0,2)<0.005 & random(0,2)> 0.0025) {
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, egg))

	} else if(random(0,2)<0.0075 & random(0,2)> 0.005) {
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, roe))

 	} else if(random(0,2)<0.01 & random(0,2)> 0.075) {
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, seaweed))
 
	}
}


//make new plates for third belt
function makenewPlates3(){

	if(random(0,2)<0.0025 & random(0,2)> 0.000){
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, salmon))

	} else if(random(0,2)<0.005 & random(0,2)> 0.0025) {
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, egg))

	} else if(random(0,2)<0.0075 & random(0,2)> 0.005) {
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, roe))

 	} else if(random(0,2)<0.01 & random(0,2)> 0.075) {
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, seaweed))
 
	}
}


function draw(){

	// sushi travels slowly
	frameRate(25)

	//background image
	image(bg, 0,0)

	//call to push plates into array
	makenewPlates();
	makenewPlates2();
	makenewPlates3();

	//conveyor belt 1
	image(bar1, 0,0)

	//move and display sushi and plates in first set of array
	for (var i = 0; i < plates.length; i++){
		plates[i].move();
		plates[i].display();
		sushi[i].move();
		sushi[i].display();
	}

	//conveyor belt 2
	image(bar2, 0,0)

	//move and display sushi and plates in second set of array
	for (var i = 0; i < plates2.length; i++){
		plates2[i].move();
		plates2[i].display();
		sushi2[i].move();
		sushi2[i].display();
		}

	//conveyor belt 3
	image(bar3, 0,0)

	//move and display sushi and plates in third set of array
	for (var i = 0; i < plates3.length; i++){
		plates3[i].move();
		plates3[i].display();
		sushi3[i].move();
		sushi3[i].display();		
		}
	}
	

// constructing the plates and their behavior
function makePlates(makeX, makeY, speedX, speedY){

	this.x = makeX
	this.y = makeY


	this.Xspeed = speedX
	this.Yspeed = speedY

	this.color = color(255,0,0)

	this.move = function() {

	this.x += this.Xspeed
	this.y += this.Yspeed
	
	}
	this.display = function(){
		noStroke();
		fill(170, 170, 170);
		ellipse(this.x-5, this.y+12, 102, 57)		
		fill(199, 222, 202)
		ellipse(this.x, this.y+2, 113,66)
		fill(240, 249, 250)
		ellipse(this.x, this.y, 113, 66)
		fill(203,233,230)
		ellipse(this.x, this.y, 95, 56)
		fill(240, 249, 250)
		ellipse(this.x, this.y+3, 89, 51)
	}
}

// constructing the different sushis and their behavior
function makeSushi(makeX, makeY, speedX, speedY, top){

	this.x = makeX
	this.y = makeY

	this.fish = top

	this.Xspeed = speedX
	this.Yspeed = speedY

	this.color = color(255,0,0)

	this.move = function() {

	this.x += this.Xspeed
	this.y += this.Yspeed
	}

	this.display = function(){

		image(this.fish,this.x, this.y)
	}
}


initial sketches

I didn’t really want a traditional landscape, so I thought about representing either faces or food. The phrase “stuff passing by” really reminded me of a sushi conveyor belt, so I decided to use that as my landscape. Having one felt like the conveyor belt was more an object, therefore I made three in order to make the piece a bit more spatial and landscape-y. I started by drawing the bars and sushi itself with code, but it wasn’t too efficient and I couldn’t get to the level of detail I wanted. I ended up drawing it somewhere else and animating it with p5. The result is some abstract land with some sushi flying around on colorful carousels.

ljkim looking outward 10


Wirel by Tina Frank.

“Tina Frank is a graphic designer and media artist aswell as professor for graphic design at the University of Art and Design in Linz, Austria. Her roots are in webdesign and cover designs for experimental electronic music during the mid 1990’s when she also started to work with digital realtime-visualisation, video & multimedia. The focus of her work lies in Print, Corporate Design, Signage Systems and within the experimental field of music visualisations.”

For this looking outward, I wanted to focus on Tina Frank. WIREL (short for WIEN / vienna and RELIGION) is a research project visualizing the increasing religious diversity in Vienna.

I appreciate her work because she was able to take something sterile and, dare I saw boring, into beautiful infographics. Being able to supply information but in an aesthetic manner is truly what I think is good design. Where as her work is less creative, I appreciate how she is able to delicately talk about religion.

I appreciate this post being dedicated to women, but I wish it didn’t have to still be an issue to shed a light on women not being appreciated in tech/cs.

thlai-Project-10-Landscape

Generative Landscape

I struggled a lot with this project. There were so many little things I wanted to do but didn’t know how to execute. I wanted to create a calming lake and mountains landscape with the sun in the background and used a purple color scheme and gradients to achieve this. The starter code helped me a lot with the clouds.  The most difficult part, I think, was creating the reflections in the water – I used the noise() function to create them and used a similar code to the mountains. In the end, I used fog image to spice things up and create atmosphere.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 10 - Landsape

var clouds = []; // array for clouds
var waterX = []; // array for x position of reflection lines
var waterY = []; // array for y position of reflection lines
var speed1 = 0.0002; // for mountain1
var peaks1 = 0.03; // for mountain1
var speed2 = 0.0005; // for mountain2
var peaks2 = 0.03; // for mountain2
var boatX = 250; // x coordinates of boat
var img; // variable to store fog filter

function preload() {
	img = loadImage("https://i.imgur.com/aoZ4YwF.png"); // fog image
}

function setup() {
	createCanvas(480, 480);
	// initial collection of clouds
	for (var i = 0; i < 5; i++) {
		var rx = random(width);
		clouds[i] = makeClouds(rx);
	}
	for (var i = 0; i < 50; i++) {
		var sparkleX = random(0, width);
		var sparkleY = random(height * 2 / 3, height);
		waterX.push(sparkleX);
		waterY.push(sparkleY);
	}
}

function draw() {
	var num = height; // number of lines for gradient bg
	// gradient background
	for (var i = 0; i < num; i++) {
		strokeWeight(2);
		stroke(100 + 1.2 * i, 50 + i, 100 + 0.7 * i);
		line(0, i, width, i);
	}
	sun(); // draw sun
	updateClouds(); // update and display clouds
	removeClouds(); // remove clouds that have slippsed out of view
	addClouds(); // add new clouds with random probability
	mountain1(); // draw first mountains
	mountain2(); // draw second mountains
	water(); // draw water and reflections
	boat(boatX); // draw boat
	boatX -= 0.5; // boat speed
	if (boatX < -50) { // if boat exits left, make it come in right
		boatX = width;
	}
	image(img, 0, 0, width, height); // load fog
}

function sun() { // sun and rays
	noStroke();
	fill(255, 200);
	ellipse(width / 3, height / 3, 170, 170); // sun
	for (var i = 0; i < 55; i++) { // sun rays
		strokeWeight(1);
		stroke(color(220 + 2 * i, 120 + i, 130 + 1 * i, 100)); // gradient
		noFill();
		ellipse(width / 3, height / 3, 170 + i * i * 0.2, 170 + i * i * 0.2); // distance between circles
	}
}

function updateClouds() {
	for (var i = 0; i < clouds.length; i++) {
		clouds[i].move();
		clouds[i].display();
	}
}

function removeClouds() {
	var keepClouds = [];
	for (var i = 0; i < clouds.length; i++) {
		if (clouds[i].x + clouds[i].breadth > 0) {
			keepClouds.push(clouds[i]);
		}
	}
	clouds = keepClouds;
}

function addClouds() {
	// probability of cloud appearing
	var cloudChance = 0.007;
	if (random(0, 1) < cloudChance) {
		clouds.push(makeClouds(width));
	}
}

function moveClouds() { // speed of clouds
	this.x += this.speed;
}

function displayClouds() {
	fill(255, 50);
	noStroke();
	ellipse(this.x, this.y, this.width, this.height);
	ellipse(this.x + 10, this.y + 10, this.width - 10, this.height - 10);
	ellipse(this.x + 20, this.y - 10, this.width / 2, this.height / 2);
	ellipse(this.x - 20, this.y, this.width - 20, this.height - 10);
}

function makeClouds(cloudX) {
	var cloud = {
		x: cloudX,
		y: random(0, height / 2 - 100),
		speed: random(-1, -0.1),
		width: random(40, 100),
		height: random(20, 50),
		breadth: 50,
		move: moveClouds,
		display: displayClouds,
	}
	return cloud;
}

function mountain1() { // background mountains
	noStroke();
	fill(135, 86, 110);
	beginShape();
	for (var x = 0; x < width; x++) {
		var t = (x * peaks1) + (millis() * speed1);
		var y = map(noise(t), 0, 1, height / 5, height / 2);
		vertex(x, y);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}

function mountain2() { // middleground mountains
	// noStroke();
	stroke(70, 63, 86);
	strokeWeight(1);
	// beginShape();
	for (var x = 0; x < width; x++) {
		var t = (x * peaks2) + (millis() * speed2);
		var y = map(noise(t), 0, 2, height / 2, height / 3);
		line(x, 330 + y / 2, x, 330 - y / 2);
	}
}

function water() { // water and reflections
	noStroke();
	fill(170, 120, 126, 100);
	rect(0, height - height / 3, width, height);

	for (var i = 0; i < 15; i++) {
		var t = (i * peaks2) + (millis() * speed2);
		var widthChange = (map(noise(t), 0, 1, 0, 100));
		stroke(255, 70);
		line(waterX[i] - widthChange, waterY[i], waterX[i] + widthChange, waterY[i]);
	}
}

function boat(boatX) { // make boat
	noStroke();
	fill(50, 43, 76);
	triangle(boatX + 31, 367, boatX + 31, 393, boatX + 16, 393);
	triangle(boatX + 33, 374, boatX + 34, 393, boatX + 47, 393);
	quad(boatX + 15, 396, boatX + 23, 405, boatX + 40, 405, boatX + 47, 396);

	stroke(255, 50);
	line(boatX + 15, 405, boatX + 45, 405);
}

heeseoc-LookingOutwards-10

I decided to write a post about Lorna Barnshaw, a 3D designer from London, United Kingdom. She earned her degree for Bachelor of Fine Arts at Winchester School of Art, and also studied at the University of Northampton. She creates virtual, glitch sculptures, which I thought was interesting because a lot of her works generate different looks depending on the perspective that the viewers are looking at which could be skewed at some point but still makes sense. She creates these mask-like sculptures, with characteristics unique to the different programs that she uses. Some of her studies look very realistic, and some are highly abstracted, geometric reinterpretation of the human face. They are very experimental, often uncanny, but I think that’s the thing that is enticing about her work and differentiates them from everything else.

 

https://www.behance.net/gallery/7149765/Layar-Basic-Trial