Het is nacht en een met aliens overbevolkte aarde

Het is nacht en een met aliens overbevolkte aarde

 

 

de code in de p5Live Editor van Ted Davis

de code in de p5Live Editor van Ted Davis

 

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; }
   }
 }
}