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:
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)
}