The Image is based on how Octopus uses their camouflage:
So Basically I created a bunch of particles that ages and disappear eventually:
when those particles first appear they growth rapidly then they slowly shrink and fade away
Base Image:
/*
* Andrew J Wang
* ajw2@andrew.cmu.edu
* Section A
*
* This Program is Face
*/
//face image for preload the data
let faceImage;
//array of global particles
var particles = [];
//preload image
function preload(){
faceImage = loadImage("https://i.imgur.com/i3WmsKd.jpeg");
}
function particleStep() {
//age of the particles
this.age++;
//shrine slowly after 45 age
if (this.age % 2 == 0 & this.age >= 45)
{
this.sz = this.sz * 0.98;
}
//grow rapidly before 45 age
else if (this.age % 2 == 0 & this.age < 45)
{
this.sz = this.sz * 1.1;
}
}
function particleDraw() {
push();
//grab color based on the location on the image
var kolor = faceImage.get(this.x*2, 220+this.y*2);
fill(kolor);
noStroke();
rectMode(CENTER);
//create rectangle based on location size and color
rect(this.x, this.y, this.sz, this.sz);
pop();
}
//create color particles
function makeParticle(px, py, size) {
p = {x: px, y: py,
age: 0,
sz: size,
stepFunction: particleStep,
drawFunction: particleDraw
}
return p;
}
function setup() {
createCanvas(480,480);
frameRate(120);
}
function draw() {
background(220);
stroke(0);
//create 30 particles per fram just to fill the whole image with particles
for (var n=0; n<30; n++)
{
//create particles at random location on the canvas, origin size = 1
var p = makeParticle(random(480), random(480),1);
particles.push(p);
}
//new particles to refresh
newParticles = [];
for (var i = 0; i < particles.length; i++){ // for each particle
var k = particles[i];
//draw and refresh particles
k.stepFunction();
k.drawFunction();
if (k.age < 250) {
//if younger than 250 keep them if not they are gone
newParticles.push(k);
}
}
// particles refreshed by the new particles
particles = newParticles;
}