Project 9 – Computational Portrait- Fish and Man

It was pretty challenging to come up with original ideas on what
can be creative for me , while we just using the color of pixels to
create a blurry version of original picture. After all, I decided
fishes are fun to draw, and if I can make them moving, I can generate
the picture very quickly as shown in the canvas.

It’s very laggy to view all the posts, so here is a picture:

Final Work
sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
var head;
var fish = [] //array for fish
function preload(){//load the image
    head = loadImage('https://i.imgur.com/VAEIjHv.jpeg');
}

function setup() {
    createCanvas(480, 480); 
    imageMode(CENTER); //exist because I don't know if it's important
    head.loadPixels(); //load pixels
    background(220);
    head.resize(480,480); //resize head size to canvas size
}

function draw(){
    var x =floor(random(0,480));//a random x value
    var y =floor(random(0,480));//a random y value

    fish.push(makeFish(x,y)); //create more fishes

    for (var i = 0; i < fish.length; i++) { //draw all the fishes 
        fish[i].stepFunction();
        fish[i].drawFunction();
    }
    if(fish.length==1000){
        noLoop();
    }
}

function makeFish(fx,fy){
    var f = {x: fx, y: fy,
             stepFunction: stepFishes,
             drawFunction: drawFishes
         }
    return f;
}

//draw fishes according to pixel color
function drawFishes(){ 
    var o=this.x
    var p=this.y    
    push();
    noStroke();
    c= head.get(o,p)
    fill(c);
    ellipse(o,p,20,10);//body
    line(o-2,p-5,o-2,p+5);
    triangle(o+10,p,o+13,p+2,o+13,p-2)//tail
    eyeball(o,p);
    pop();

}


//fishes eye
 function eyeball(x,y){
    stroke('white')
    circle(x-5,y,1)
    ellipse(x-5,y,3,3)
 }

function stepFishes(){ //fishes moving
    this.x = this.x + random(-3,3)
    this.y = this.y + random(-3,3)
}

Leave a Reply