KEVIN LEE
KEVIN LEE
download (2).png

CREATIVE COMPUTING

 

"Code is a powerful tool for creative work"

 

Code is new language for future. I learned how to build blocks of creative computing within the visual and media environment. I have learned to create dynamic images, type and interfaces, that can translate into print, web and spatial forms. I also have learned fundamental of programming that translate in virtually all programming platforms. Primary software platform: JavaScript.

Computers are widely used in art and design. Almost all design work created today contains computationally generated/altered elements.

Many effects that were created by custom code in the past are now baked into Photoshop and After Effects. Coding can be used to create interactive experiences, animations, and even static illustration work. Code grants the ability to explore variations of complex themes quickly.

With traditional design and art media, you are constrained to a single expression of your intent. With digital media, you can codify your intent, and create works and forms that can change in response to unknown future contexts. You can create systems that can grow. You can build your intentions into your work and create a work that can not only speak at your audience but that can engage in a dialog.

By learning a programming, I have thorough and elaborate interactive concepts and techniques for applications. It is an extensive investigation in the interface, the mechanism, the controls and the aims of interactive works. I designed and developed several complex interactive projects, and now, I know how to undertake a comprehensive research and direct thinking process from brainstorming to final outcome. I also learned tools to conceive, plan and develop an interactive system and I am aware of the importance of my role in the development of interactive media.

 

From

Professor Justin Bakse’s
Creative Computing Class

 

 

 

JAVASCRIPT

function setup() {
    // create a place to draw (resclaed the background)
    createCanvas(640, 460);
    noStroke();
    noLoop();
}

function draw() {
  // set a background color for challenge 1 color
    background(50, 50, 50);

  // give a loop condition for 10 times for 10 square
    for(var i = 0; i < 10; i++){

  //give a white stroke attribute to the square
    strokeWeight(1);
  stroke(255, 255, 255);

    //give a fill color [ black to red spectrum - (255 / 10 = 25.5  )]
    fill(25.5 * i, 0, 0);

    //draw 10 squares using loop
    rect(10.5 + 63 * i, 204, 52, 52);
  }
}

 

 

function setup() {
    // create a place to draw
    createCanvas(640, 460);
    noStroke();
    noLoop();
}

function draw() {
  // change the background color for challenge_2
    background(130, 130, 170);

  // give a condition to white circle not to have fill but white stroke
    noFill();
    strokeWeight(1);
  stroke(255, 255, 255);

  //loop condition for 20 white circle
     for(var white = 0; white < 20; white++) {

  // draw the white ellipse
    ellipse(320, 230, 20 + 40 * white, 20 + 40 * white);
  }

  // give a condition to black circle not to have fill but black stroke
  noFill();
  strokeWeight(1);
  stroke(0, 0, 0);

  //loop condition for 20 balck circle
    for(var black = 0; black < 20; black++) {

    // draw the ellipse
  ellipse(320, 230, 40 + 40 * black, 40 + 40 * black);
  }
}

 

 

 

function setup() {
    // create a place to draw
    createCanvas(640, 450);
    noStroke();

}

function draw() {

  // give a condition to background to change the color if mouse-clicked
    if (mouseIsPressed) {
    background(50, 50, 100);

  } else {
    background(150, 0, 0);
  }

  //give a characteristics to drawing
  noFill();
    strokeWeight(1);
  stroke(255, 255, 255);

   //draw a horizontal line
      line(mouseX,0,mouseX,450);

   //draw a vertical line
    line(0, mouseY, 640, mouseY);

  //draw a circle that changes color when mouse-clicked
  if (mouseIsPressed) {
    fill(50, 50, 100);
  ellipse(mouseX, mouseY, 40, 40);

    } else {
    fill(150, 0, 0);
    ellipse(mouseX, mouseY, 40, 40);
  }
}

 

 

 

 //assign start position and speed for ball 1
  var BallX1 = 0;
  var BallY1 = 200;
  var BallSpeedX1 = 3;
  var BallSpeedY1 = 3;

  //assign start position and speed for ball 2
  var BallX2 = 0;
  var BallY2 = 100;
  var BallSpeedX2 = 2;
  var BallSpeedY2 = 2;

function setup() {
    // create a canvas to draw
    createCanvas(640, 450);
}

function draw() {

    //assign animation to the Ball 1
    BallX1 = BallX1 + BallSpeedX1;
    BallY1 = BallY1 + BallSpeedY1;

    //assign animation to the Ball 2
    BallX2 = BallX2 + BallSpeedX2;
  BallY2 = BallY2 + BallSpeedY2;

  //set-up the (horizontal) out of bound
    if (BallX1 > 640) {
    BallSpeedX1 = -BallSpeedX1;
    }
    if (BallX2 > 640) {
    BallSpeedX2 = -BallSpeedX2;
  }
    if (BallX1 < 0) {
    BallSpeedX1 = -BallSpeedX1;
    }
    if (BallX2 < 0) {
    BallSpeedX2 = -BallSpeedX2;
  }

    //set-up the (Vertical) out of bound
    if (BallY1 > 450) {
    BallSpeedY1 = -BallSpeedY1;
    }
    if (BallY2 > 450) {
    BallSpeedY2 = -BallSpeedY2;
    }
    if (BallY1 < 0) {
    BallSpeedY1 = -BallSpeedY1;
    }
    if (BallY2 < 0) {
    BallSpeedY2 = -BallSpeedY2;
    }

    // Background color black
    background(0, 0, 0);

    // draw Ball 1
    ellipse(BallX1, BallY1, 50, 50);

    // draw ball 2
    ellipse(BallX2, BallY2, 50, 50);
}

 

 

 

  //assign start position and speed for ball 1
  var BallX1 = 320;
  var BallY1 = 200;
  var BallSpeedX1 = 3;
  var BallSpeedY1 = 3;


function setup() {
  // create a canvas to draw
  createCanvas(640, 450);
  }

function draw() {

  //make the ball to follow x-cordinate of mouse cursur
  if (BallX1 < mouseX) BallSpeedX1 = 3;
  if (BallX1 > mouseX) BallSpeedX1 = -3;

  //make the ball to follow y-cordinate of mouse cursur
    if (BallY1 < mouseY) BallSpeedY1 = 3;
  if (BallY1 > mouseY) BallSpeedY1 = -3;

  // give animation to the ball
  BallX1 = BallX1 + BallSpeedX1;
  BallY1 = BallY1 + BallSpeedY1;

  // Background color black
  background(0, 0, 0);

  // draw Ball 1
  ellipse(BallX1, BallY1, 50, 50);
}

 

 

 

PAINT

CSS

body {
    padding: 0; 
    margin: 0;
    background-color: #222;
}

canvas {
    /*border: 1px solid blue;*/
} 

main {
    width: 900px;
    /*border: 1px solid red;*/
    margin: 2em auto;
}

.brushes {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 80px;
}   

.brushes {
    background-color: #555;
    margin-right: 4px;

}

.brushes button {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 2px;
    float: left;
    border: none;
    outline: none;
    color: white;
    border-radius: 4px;
    background-color: transparent;

}

.brushes button.active {
    -webkit-box-shadow: inset 0px 0px 4px 1px #222;
    background-color: #333;
}

#color-picker
{
    width: 74px;
    height: 74px;
    background-color: #444;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 1px #222;
    padding: 6px;
    margin: 3px;
    outline: none;
}

 

 

JAVASCRIPT

// Create base object for brushes
// plug-in brushes will create and customize an instance of Brush

function Brush(name, iconPath) {
    this.name = name;
    this.iconPath = iconPath;
}
Brush.prototype.setup = function(){}; // called when the appliation loads
Brush.prototype.activate = function(){}; // called when the user picks this brush
Brush.prototype.draw = function(){};
Brush.prototype.mouseMoved = function(){};
Brush.prototype.mouseDragged = function(){};
Brush.prototype.mousePressed = function(){};
Brush.prototype.mouseReleased = function(){};
Brush.prototype.mouseClicked = function(){};
Brush.prototype.mouseWheel = function(){};
Brush.prototype.keyPressed = function(){};
Brush.prototype.keyReleased = function(){};
Brush.prototype.keyTyped = function(){};


////////////////////////////////////////////////////////////////////
// State Variables

var brushes = [];
var currentBrush; 
var forecolor;


function setup() {
    // create canvas and insert it into the html document
    var canvas = createCanvas(800, 600);
    canvas.parent("main");

    // initial state setup
    background(255);
    cursor(CROSS);
    
    // initialize brushes and add toolbar buttons
    brushes.forEach( function(brush) {
        brush.setup();

        // create the html elements for the brush's button
        var li = $('<li><button><img src="'+brush.iconPath+'"></button></li>');
        var b = li.find("button");
        brush.button = b;

        // add a function to handle button click
        b.click( function() { 
            currentBrush = brush;
            currentBrush.activate();
            $(this).addClass("active").siblings().removeClass("active");
        });

        // add button to html document
        $(".brushes").append(b);
    });


    // simulate a click on a brush to activate an initial brush
    brushes[0].button.click();


    // pick an inital forecolor and create a color picker widget
    forecolor = color(0,0,0);
    var colorPicker = $('<input id="color-picker" type="color">');
    $(".brushes").append(colorPicker);
    colorPicker.change( function() {
        forecolor = color($(this).val());
    });

}

function draw() {
    currentBrush.draw();
}


////////////////////////////////////////////////////////////////////
// Forward events

function mouseMoved() {
    currentBrush.mouseMoved();
}

function mouseDragged() {
    currentBrush.mouseDragged();
}

function mousePressed() {
    currentBrush.mousePressed();
}

function mouseReleased() {
    currentBrush.mouseReleased();
}

function mouseClicked() {
    currentBrush.mouseClicked();
}

function mouseWheel() {
    currentBrush.mouseWheel();
}

function keyPressed() {
    currentBrush.keyPressed();
}

function keyReleased() {
    currentBrush.keyReleased();
}

function keyTyped() {
    currentBrush.keyTyped();

 

 

 

HTML

<html>
<head>
    <meta charset="UTF-8">
    <script language="javascript" type="text/javascript" src="jquery-2.1.3.min.js"></script>
    <script language="javascript" type="text/javascript" src="p5.min.js"></script>
    <script language="javascript" type="text/javascript" src="comp_paint.js"></script>

    <script language="javascript" type="text/javascript" src="brushes/fluffy/fluffy.js"></script>
    <script language="javascript" type="text/javascript" src="brushes/pencil/pencil.js"></script>
    <script language="javascript" type="text/javascript" src="brushes/paint/paint.js"></script>

    <script language="javascript" type="text/javascript" src="brushes/quink/quink.js"></script>
    <script language="javascript" type="text/javascript" src="brushes/test/test.js"></script>
    <script language="javascript" type="text/javascript" src="brushes/test2/test2.js"></script>

    <script language="javascript" type="text/javascript" src="brushes/fastfurious/fastfurious.js"></script>
    <script language="javascript" type="text/javascript" src="brushes/shakeyhands/shakeyhands.js"></script>

    <script language="javascript" type="text/javascript" src="brushes/splatter/splatter.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

</head>
<body>
    <main id="main">
        <ul class="brushes"></ul>
    </main>
</body>
</html>

 

 

BRUSH EXAMPLE

// fluffy.js
// fluffy tool: draws a fluffy random stroke
// author: Lee Hyeon Beom
// create and install brush

var fluffy = new Brush("fluffy", "./brushes/fluffy/fluffy.svg");
brushes.push(fluffy);


//verify the speed  distance = how fast it moved from Point to mouse X,Y
var speed = 1;
var Point = {
    x: 0,
    y: 0
};


////////////////////////////////////////////////////////////////////
// define brush behavior

fluffy.mouseDragged = function() {

    //decide the color for the brush
    stroke(red(forecolor), green(forecolor), blue(forecolor), 20);

    //give a style to the brush
    strokeCap(ROUND);

    //define speed
    speed = dist(Point.x, Point.y, mouseX, mouseY);

    //stroke weight(fluffiness) reacts to speed
    //if (speed < 1) {
    //  strokeWeight(speed * 0.01);
    //  } else {
    //      strokeWeight(speed * 0.1);
    //  }


    //draw a fluffy brush
    if (mouseIsPressed) {
        for (var i = 0; i < 150; i++) {
            line(pmouseX - random(-30, 30), pmouseY - random(-30, 30), mouseX, mouseY,
                50);
            line(pmouseX - random(-30, 30), pmouseY - random(-30, 30), mouseX, mouseY,
                50);
            line(pmouseX - random(-30, 30), pmouseY - random(-30, 30), mouseX, mouseY,
                50);


            Point = {
                x: mouseX,
                y: mouseY
            };
        }


        fluffy.mousePressed = function() {
            speed = 1;
            Point = {
                x: mouseX,
                y: mouseY
            };
        };
    }
};

 

 

 

FINAL PROJECT

SCENE 1

// list the illustration that i am going to use
var backhandImg;
var backgroundImg;
var bulletImg;
var fingerImg;
var fronthandImg;
var lowergunImg;
var uppergunImg;
var reloadSound;
var fireSound;
var reloadImg;
// touch
//place the bullet
var position = 400;

//preload the elements
function preload() {
    backgroundImg = loadImage("images_1/background.png");
    backhandImg = loadImage("images_1/backhand.png");
    bulletImg = loadImage("images_1/bullet.png");
    fingerImg = loadImage("images_1/finger.png");
    fronthandImg = loadImage("images_1/fronthand.png");
    lowergunImg = loadImage("images_1/lowergun.png");
    uppergunImg = loadImage("images_1/uppergun.png");
    reloadImg = loadImage("images_1/RELOAD.png");
    reloadSound = loadSound('images_1/reload.mp3');
    fireSound = loadSound('images_1/fire.mp3');
}

//draw the canvas
function setup() {
    createCanvas(640, 480);
}

//start drawing
function draw() {
    image(backgroundImg, 0, 0);
    image(backhandImg, 190, 250);
    image(lowergunImg, 40, 148);
    image(reloadImg, 400, 280);

    //give a attribute to bullet
    position = position + 3;
    if (mouseIsPressed) {
        position = 400;
    }
    if (mouseX > 205) {
        position = 400;
    }
    image(bulletImg, position, 130);

    //give a attribute to the upper gun
    if ((mouseX - 140) <= 45) {
        mouseX = 185;
    }
    if ((mouseX - 140) >= 90) {
        mouseX = 230;
    }
    if (mouseIsPressed) {
        image(uppergunImg, mouseX - 140, 91);
    } else {
        image(uppergunImg, 83, 91);
    }

    //give a attribute to the finger
    if (mouseX <= 190) {
        mouseX = 190;
    }
    if (mouseX >= 305) {
        mouseX = 295;
    }
    if (mouseIsPressed) {
        image(fingerImg, mouseX, 200);
    } else {
        image(fingerImg, 225, 200);
    }
    image(fronthandImg, 0, 200);
}

 

SCENE 2

// list the illustration that i am going to use
var armImg;
var backgroundImg;
var bullet1Img;
var bullet2Img;
var bullet3Img;
var bullet4Img;
var bullet5Img;
var wheelImg;
var policeImg;
var position = 160;
var bulletSpeed = 10;
var fireImg;
var reloadImg;
var criminalImg;
var healthImg;
var levelImg;
var hideImg;
var hp = 635;

//preload elements
function preload() {
    armImg = loadImage("images_2/arm.png");
    backgroundImg = loadImage("images_2/background.png");
    bullet1Img = loadImage("images_2/bullet1.png");
    bullet2Img = loadImage("images_2/bullet2.png");
    bullet3Img = loadImage("images_2/bullet3.png");
    bullet4Img = loadImage("images_2/bullet4.png");
    bullet5Img = loadImage("images_2/bullet5.png");
    policeImg = loadImage("images_2/police.png");
    wheelImg = loadImage("images_2/wheel.png");
    fireImg = loadImage("images_2/fire.png");
    reloadImg = loadImage("images_2/reload.png");
    criminalImg = loadImage("images_2/criminal.png");
    healthImg = loadImage("images_2/health.png");
    levelImg = loadImage("images_2/level.png");
    hideImg = loadImage("images_2/hide.png");
}

//draw the canvas
function setup() {
    createCanvas(640, 480);
}

//draw other elements
function draw() {
    image(backgroundImg, 0, 0);
    image(fireImg, 275, 5);
    image(reloadImg, 410, 45);
    image(healthImg, 535, 115);
    image(levelImg, 535, 100);

    //set the difficulty
    if (mouseIsPressed) {
        hp = hp - 0.2;
    } else {
        hp = hp + 0.1;
    }
    image(hideImg, hp, 115);

    //make the bullet go when FIRE! button is clicked
    if (mouseIsPressed &&
        mouseX > 280 &&
        mouseX < 360 &&
        mouseY > 20 &&
        mouseY < 80) {
        position = position + bulletSpeed;
        image(bullet1Img, position, 180);
    }

    //make the reload button to work
    if (mouseIsPressed &&
        mouseX > 410 &&
        mouseX < 590 &&
        mouseY > 50 &&
        mouseY < 90) {
        position = 160;
        image(bullet1Img, position, 180);
    }

    //move the police officer's arm
    if (mouseIsPressed) {
        image(armImg, 82, 195);
    } else {
        image(armImg, 90, 197);
    }

    //draw what is left
    image(criminalImg, 510, 130);
    image(policeImg, 10, 170);
}

SCENE 3

//bring illustration to the p5
var backgroundImage;
var blueImage;
var redImage;
var bluesirenImage;
var redsirenImage;
var carImage;
var wordImage;
var thanksImage;
var speed = 3;
var c = -50;
var r = 70;
var b = 95;
var rs = 37;
var bs = 62;
var w = 640;
var T = 1200;

//preload elements for the project
function preload() {
    backgroundImage = loadImage("images_3/background.png");
    blueImage = loadImage("images_3/blue.png");
    redImage = loadImage("images_3/red.png");
    bluesirenImage = loadImage("images_3/bluesiren.png");
    redsirenImage = loadImage("images_3/redsiren.png");
    carImage = loadImage("images_3/car.png");
    wordImage = loadImage("images_3/word.png");
    thanksImage = loadImage("images_3/thanks.png");
}

function setup() {
    createCanvas(640, 480);
}

function draw() {
    image(backgroundImage, 0, 0);

    //set up condition for the movement for later
    // c = car r=red b=blue rs=redsiren bs=bluesiren w=word T=thank
    if (mouseIsPressed) {
        c = c + speed;
        r = r + speed;
        b = b + speed;
        rs = rs + speed;
        bs = bs + speed;
        w = w - speed;
        T = T - speed;
    }

    //draw illustration
    image(carImage, c, 300);
    image(redImage, r, 295);
    image(blueImage, b, 295);
    image(wordImage, w, 100);

    //make it to stay at the end
    image(thanksImage, T, 250);
    if (T <= 50) {
        T = 50;
    }

    //make a siren to blink
    tint(255, random(0, 255));
    image(redsirenImage, rs - 2, 257);
    image(bluesirenImage, bs - 2, 257);


}
 

 

CREATIVE COMPLEX PROJECT

// illustration.js
//text: He was an old man who fished alone in a skiff in the Gulf Stream
//name of the book: the old man and the sea

var currentScene = "day";

// list the illustration that i am going to use
var backgroundImg;
var boatImg;
var cloud1Img;
var cloud2Img;
var cloud3Img;
var cloud4Img;
var fishImg;
var handImg;
var oldmanImg;
var skyblockImg;
var waterImg;
var waveImg;
var wheeImg;
var oldmanLeanImg;
var oldmanStandImg;
var fish2Img;
var fish3Img;
var darkbackgroundImg;
var darkskyblockImg;
var darkcloud1Img;
var darkcloud2Img;
var darkcloud3Img;
var darkcloud4Img;
var darkboatImg;
var darkwaterImg;
var darkwaveImg;
var darkwaterblockImg;
var thunderImg;
var mountainImg;
var darkmountainImg;

//give a starting position for the cloud 1,2,3,4
var cloud1X = -100;
var cloud2X = 100;
var cloud3X = 300;
var cloud4X = 500;
//give a starting position for the wave
var waveX = 300;
//give a attribute to the water
var waterY = 190;
var waterSpeedY = 0.5;
//give a attribute to the ship
var boatY = 235;
var boatSpeedY = 0.2;
//give a attribute to the dark ship
var darkboatY = 225;
var darkboatSpeedY = 1;

//giave a starting position for the fish 2,3
var fish2X = 800;
var fish2Xspeed = -0.5;
var fish3X = 0;
var fish3Xspeed = 0.5;
var i = random(33, 53);

function preload() {
    backgroundImg = loadImage("images/background.png");
    boatImg = loadImage("images/boat.png");
    cloud1Img = loadImage("images/cloud1.png");
    cloud2Img = loadImage("images/cloud2.png");
    cloud3Img = loadImage("images/cloud3.png");
    cloud4Img = loadImage("images/cloud4.png");
    fishImg = loadImage("images/fish.png");
    handImg = loadImage("images/hand.png");
    oldmanImg = loadImage("images/oldman.png");
    skyblockImg = loadImage("images/skyblock.png");
    waterImg = loadImage("images/water.png");
    waveImg = loadImage("images/wave.png");
    wheelImg = loadImage("images/wheel.png");
    oldmanLeanImg = loadImage("images/oldmanLean.png");
    oldmanStandImg = loadImage("images/oldmanStand.png");
    fish2Img = loadImage("images/fish2.png");
    fish3Img = loadImage("images/fish3.png");
    darkbackgroundImg = loadImage("images/darkbackground.png");
    darkskyblockImg = loadImage("images/darkskyblock.png");
    darkcloud1Img = loadImage("images/darkcloud1.png");
    darkcloud2Img = loadImage("images/darkcloud2.png");
    darkcloud3Img = loadImage("images/darkcloud3.png");
    darkcloud4Img = loadImage("images/darkcloud4.png");
    darkboatImg = loadImage("images/darkboat.png");
    darkwaterImg = loadImage("images/darkwater.png");
    darkwaveImg = loadImage("images/darkwave.png");
    darkwaterblockImg = loadImage("images/darkwaterblock.png");
    thunderImg = loadImage("images/thunder.png");
    mountainImg = loadImage("images/mountain.png");
    darkmountainImg = loadImage("images/darkmountain.png");
}

//draw the canvas
function setup() {
    createCanvas(800, 590);
}

//give a day and night
function draw() {
    if (currentScene === "day") {
        drawDay();
    } else if (currentScene === "night") {
        drawNight();
    }
}


//start drawing a day
function drawDay() {

    image(backgroundImg, 0, 0);

    //draw a mountatin
    image(mountainImg, 0, 190);


    //animate the water
    waterY = waterY + waterSpeedY;
    if (waterY > 240) {
        waterSpeedY = -waterSpeedY;
    }
    if (waterY < 190) {
        waterSpeedY = -waterSpeedY;
    }

    //place the water
    image(waterImg, 0, waterY - 45);
    image(waterImg, -100, waterY - 60);

    //animte the oldman
    image(oldmanImg, 300, 209);

    if (mouseIsPressed) {
        image(oldmanLeanImg, 280, 225);
    } else {
        image(oldmanStandImg, 300, 220);
    }

    //place the hand of old man
    // wind the fishing rod when clicked
    if (mouseIsPressed) {
        image(handImg, random(320, 340), 279);
    } else {
        image(handImg, 340, 279);
    }

    //animate the fishing rod
    if (mouseY > 235) {
        mouseY = 235;
    }
    if (mouseY < 80) {
        mouseY = 80;
    }

    //draw the fishing rod
    if (mouseIsPressed) {
        image(fishImg, random(401, 404), mouseY);
    } else {
        image(fishImg, 400, 235);
    }

    //hide the rope
    image(skyblockImg, 350, 74);

    //animate the boat
    boatY = boatY + boatSpeedY;
    if (boatY > 255) {
        boatSpeedY = -boatSpeedY;
    }
    if (boatY < 235) {
        boatSpeedY = -boatSpeedY;
    }

    //draw the boat
    image(boatImg, 50, boatY);


    //animate the water
    waterY = waterY + waterSpeedY;
    if (waterY > 240) {
        waterSpeedY = -waterSpeedY;
    }
    if (waterY < 190) {
        waterSpeedY = -waterSpeedY;
    }


    // animate the wave
    waveX += 0.8;
    if (waveX > 800) {
        waveX = -200;
    }

    //draw the wave
    image(waveImg, waveX, 365);
    image(waveImg, waveX - 200, waterY + 130);
    image(waveImg, waveX - 500, waterY + 110);
    image(waveImg, waveX - 800, waterY + 120);
    image(waveImg, waveX + 200, waterY + 100);
    image(waveImg, waveX + 500, waterY + 120);
    image(waveImg, waveX + 800, waterY + 130);

    // animate the water
    image(waterImg, 0, waterY + 30);


    //animate the fish
    fish3X = fish3X + fish3Xspeed;
    if (fish3X > 800) {
        fish3X = 0;
    }

    //draw the fish
    image(fish3Img, fish3X, waterY + 200);
    image(fish3Img, fish3X + 150, waterY + 230);

    // animate the wave
    image(waveImg, waveX, 365);
    image(waveImg, waveX - 300, 365);
    image(waveImg, waveX - 600, 365);
    image(waveImg, waveX - 900, 365);
    image(waveImg, waveX + 300, 365);
    image(waveImg, waveX + 600, 365);
    image(waveImg, waveX + 900, 365);

    // animate and draw the clouds
    cloud1X += 0.8;
    if (cloud1X > 800) {
        cloud1X = -200;
    }
    image(cloud1Img, cloud1X, 100);

    cloud2X += 0.5;
    if (cloud2X > 800) {
        cloud2X = -200;
    }
    image(cloud2Img, cloud2X, 50);

    cloud3X += 0.8;
    if (cloud3X > 800) {
        cloud3X = -200;
    }
    image(cloud3Img, cloud3X, 5);

    cloud4X += 0.6;
    if (cloud4X > 800) {
        cloud4X = -200;
    }
    image(cloud4Img, cloud4X, 80);

    //draw wheel that tell that the fish bited the rod
    image(wheelImg, 450, random(225, 227));

    //animate the fish
    fish2X = fish2X + fish2Xspeed;
    if (fish2X < 0) {
        fish2X = 800;
    }

    //draw the fish
    image(fish2Img, fish2X, waterY + 300);

}

//draw a night

function drawNight() {
    image(darkbackgroundImg, 0, 0);

    //lighting background
    if (mouseIsPressed) {
        fill(0, 0, 0);
        rect(0, 0, 800, 590);
    }

    //draw a dark mountain
    image(darkmountainImg, 0, 190);
    if (mouseIsPressed) {
        fill(random(175, 255), random(175, 255), random(175, 255), 90);
        rect(0, 0, 800, 590);
    }

    //animate the water
    waterY = waterY + waterSpeedY;
    if (waterY > 240) {
        waterSpeedY = -waterSpeedY;
    }
    if (waterY < 190) {
        waterSpeedY = -waterSpeedY;
    }

    //place the water
    image(darkwaterImg, 0, waterY);
    image(darkwaterImg, -100, waterY);


    //animte the oldman
    image(oldmanImg, 300, 209);

    if (mouseIsPressed) {
        image(oldmanLeanImg, 280, 225);
    } else {
        image(oldmanStandImg, 300, 220);
    }

    //place the hand of old man
    // wind the fishing rod when clicked
    if (mouseIsPressed) {
        image(handImg, random(320, 340), 279);
    } else {
        image(handImg, 340, 279);
    }


    //animate the fishing rod
    if (mouseY > 235) {
        mouseY = 235;
    }
    if (mouseY < 80) {
        mouseY = 80;
    }

    //draw the fishing rod
    if (mouseIsPressed) {
        image(fishImg, random(401, 404), 235);
    } else {
        image(fishImg, 400, 235);
    }


    //animate the boat
    darkboatY = darkboatY + darkboatSpeedY;
    if (darkboatY > 225) {
        darkboatSpeedY = -darkboatSpeedY;
    }
    if (darkboatY < 235) {
        darkboatSpeedY = -darkboatSpeedY;
    }

    //draw the boat
    image(darkboatImg, 70, darkboatY);


    //animate the water
    waterY = waterY + waterSpeedY;
    if (waterY > 240) {
        waterSpeedY = -waterSpeedY;
    }
    if (waterY < 190) {
        waterSpeedY = -waterSpeedY;
    }

    // animate the wave
    waveX += 0.8;
    if (waveX > 800) {
        waveX = -200;
    }

    //draw the wave
    image(darkwaveImg, waveX, 365);
    image(darkwaveImg, waveX - 200, waterY + 130);
    image(darkwaveImg, waveX - 500, waterY + 110);
    image(darkwaveImg, waveX - 800, waterY + 120);
    image(darkwaveImg, waveX + 200, waterY + 100);
    image(darkwaveImg, waveX + 500, waterY + 120);
    image(darkwaveImg, waveX + 800, waterY + 130);

    // animate the water
    image(darkwaterImg, 0, waterY + 30);


    //animate the fish
    fish3X = fish3X + fish3Xspeed;
    if (fish3X > 800) {
        fish3X = 0;
    }

    //draw the wish
    image(fish3Img, fish3X, waterY + 200);
    image(fish3Img, fish3X + 150, waterY + 230);

    // animate the wave
    image(darkwaveImg, waveX, 365);
    image(darkwaveImg, waveX - 300, 365);
    image(darkwaveImg, waveX - 600, 365);
    image(darkwaveImg, waveX - 900, 365);
    image(darkwaveImg, waveX + 300, 365);
    image(darkwaveImg, waveX + 600, 365);
    image(darkwaveImg, waveX + 900, 365);


    //draw a clouds
    image(darkcloud3Img, -200, 5);
    image(darkcloud4Img, -100, 80);
    image(darkcloud4Img, 0, 80);
    image(darkcloud2Img, 100, 50);
    image(darkcloud1Img, 200, 100);
    image(darkcloud3Img, 300, 5);
    image(darkcloud4Img, 400, 80);
    image(darkcloud2Img, 500, 50);
    image(darkcloud1Img, 600, 100);
    image(darkcloud3Img, 700, 5);
    image(darkcloud4Img, 800, 80);

    // animate and draw the clouds
    cloud1X += 0.8;
    if (cloud1X > 800) {
        cloud1X = -200;
    }
    image(darkcloud1Img, cloud1X, 100);

    cloud2X += 0.5;
    if (cloud2X > 800) {
        cloud2X = -200;
    }
    image(darkcloud2Img, cloud2X, 50);

    cloud3X += 0.8;
    if (cloud3X > 800) {
        cloud3X = -200;
    }
    image(darkcloud3Img, cloud3X, 5);

    cloud4X += 0.6;
    if (cloud4X > 800) {
        cloud4X = -200;
    }
    image(darkcloud4Img, cloud4X, 80);

    //draw wheel that tell that the fish bited the rod
    image(wheelImg, 450, random(225, 227));

    //draw fish
    fish2X = fish2X + fish2Xspeed;
    if (fish2X < 0) {
        fish2X = 800;
    }
    image(fish2Img, fish2X, waterY + 300);


    // thunder when mouse clicked
    if (mouseIsPressed) {
        image(thunderImg, random(mouseX - 30, mouseX + 30) - 300, random(-400, 0));

    }
}

//changes day and night by clicking mouse
function mouseReleased() {
    if (currentScene === "day") {
        currentScene = "night";
    } else {
        currentScene = "day";
    }
}