Aliens invasie. terug naar de inleiding
ga naar de animatie in full screen
Aliens invasie
In setup is de p5.js pixelarray aangemaakt Iedere pixel heeft 4 cellen (Rood, Groen, Blauw, Alpha) (regel 8 t/m 19)
In een pde schets zit iedere pixel in een cel van de pixelarray zie : "twee soorten aliens met een blauwe zon"
mbv de dist() (regel 11) (distance) functie wordt zo de blauwe zon in het midden van het canvas gemaakt
De fadeout() methode zorgt er voor dat bij toeneme van het aantal aliens de zon verdwijnt en het donker wordt
De aliens vermenigvuldigen zich steeds snellen omdat de frameRate door de teller steeds hoger wordt (regel 82)
In de regels 82 t/m 94 wordt een nieuwe zon aangemaakt en begint alles weer opnieuw.
Hier de link naar de animatie in de p5LIVE editor van Ted Davis
//Aliens invasie
let a1;
function setup() {
createCanvas(windowWidth, windowHeight);
pixelDensity(1);
//de code voor de blauwe zon
loadPixels();
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let d = dist(x, y, width/2, height/2);
let index = (x + y * width)*4; //de pixel array
pixels[index+0] = 0; //rood
pixels[index+1] = d-100; //groen
pixels[index+2] = d+100; //blauw
pixels[index+3] = 250; //alfa
}
}
updatePixels();
a1 = new Alien();
}
function draw() {
a1.ellipseAlien();
a1.rectAlien();
a1.fadeout();
}
class Alien {
//lege constructor
constructor(){this.teller = 0;}
ellipseAlien() {
let hoofd = color(random(0, 200), random(0, 200), random(0, 200), random(0, 200));
let oren = color(random(0, 200), random(0, 200), random(0, 200), random(0, 200));
let lichaam = color(random(0, 200), random(0, 200), random(0, 200), random(0, 200));
let ogen = color(255, 0, 0);
let mond = color(random(0, 200), random(0, 100), random(0, 100));
let x = random(width); let y = random(height);
let dx = random(20, 100); let dy = random(20, 100);
fill(hoofd); ellipse(x, y, dx, dy); // hoofd
fill(oren); ellipse(x+dx/2, y, dx/6, dy/5); // rechter oortje
ellipse(x-dx/2, y, dx/6, dy/5); // linker oortje
fill(ogen); ellipse(x+dx/4, y-dy/4, dx/6, dy/6); // re oogje
ellipse(x-dx/4, y-dy/4, dx/6, dy/6); // li oogje
fill(lichaam); ellipse(x, y+dy, dx, 2*dy); // lichaam
fill(mond); ellipse(x, y+dy/4, dx/2, dy/6); // Mondje
ellipse(x, y-dy/8, dx/8, dy/8); // Neus
}
rectAlien() {
let hoofd = color(random(0, 200), random(0, 200), random(0, 200), random(0, 200));
let oren = color(random(0, 200), random(0, 200), random(0, 200), random(0, 200));
let lichaam = color(random(0, 200), random(0, 200), random(0, 200), random(0, 200));
let ogen = color(255, 0, 0);
let mond = color(random(0, 200), random(0, 100), random(0, 100));
let neus = color(random(0, 100), random(0, 1-100), random(0, 200), random(0, 200));
let x = random(width); let y = random(height);
let dx = random(20, 100); let dy = random(20, 100);
rectMode(CENTER);
fill(hoofd); rect(x, y, dx, dy, 20, 20, 0, 0); // hoofd
fill(oren); ellipse(x+dx/2, y, dx/6, dy/5); // rechter oortje
ellipse(x-dx/2, y, dx/6, dy/5); // linker oortje
fill(ogen); ellipse(x+dx/4, y-dy/4, dx/6, dy/6); // re oogje
ellipse(x-dx/4, y-dy/4, dx/6, dy/6); // li oogje
fill(lichaam);rect(x, y+dy, dx, 2*dy, 20, 20, 20, 20); //lichaam
fill(mond); rect(x, y+dy/4, dx/2, dy/6); //Mondje
fill(neus); triangle(x-dx/6, y-dy/8, x, y-dy/2, x+dx/6, y-dy/8); //Neus
}
fadeout() {
const fadeAmount = 10; const fadeInterval = 5;
if (frameCount%fadeInterval==0) {
fill(255-this.teller, 255-this.teller, 255-this.teller, fadeAmount);
//Een rechthoek die het hele canvas bedekt)
rectMode(CENTER);
rect(width/2, height/2, width, height);
this.teller = this.teller + 1;
//door de teller neemt de frameRate toe en verschijnen de aliens steeds sneller
frameRate(this.teller);
//Het is donker alles begint weer met een nieuwe zon
if (this.teller > 300) {loadPixels();
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let d = dist(x, y, width/2, height/2);
let index = (x + y * width)*4;
pixels[index+0] = 0;
pixels[index+1] = d-100;
pixels[index+2] = d+100;
pixels[index+3] = 250;
}
}
updatePixels();
this.teller = 0; }
}
}
}