lachspiegel

Met de slider veranderen de rechthoekjes in ellipsen waarbij ook de kleuren veranderen (rood wordt groen)

lachspiegel. terug naar de inleiding

In de schets wordt een geschaald webcam beeld aangemaakt. De size van het beeld is (640/16 x 480/16) dit is (40 x 30) pixels, zie coderegel 3 , 7 en 10

Deze pixels worden mbv LoadPixels (regel 17) in een pixelarray gestopt. In regel 18 t/m 20 worden de indices van de pixelarray berekend.

De informatie van iedere pixel komt in vier cellen 1) Rood, 2) Groen, 3) Blauw, 4) alpha.

R, G en B worden aan de variabelen r, g en b gegeven waarna de grijstinten (regel 26) worden berekend.

De ellipse en rect (regel 30 en 36) worden gevuld met de kleur waarbij, afhankelijk van de ingestelde drempel, voor een ellipse of rect wordt gekozen.

De grote grap is hier dat het beeld van 40 x 30 pixels als rechhoekjes en ellipsen in het canvas van 640 x 480 komen, dus iedere rechthoek is een pixel.

Door de zwart wit ratio te mappen (regel 26) naar de vScale (16) ratio en de gemapte ratio "w" als lengte en breedte in de rect en ellipse functies (regels 30 en 36)

in te voeren ontstaan in grootte en kleur variërende cirkels en vierkantjes.

Zie ook de p5.js tutorial van Daniel Shiffman en het video capture voorbeeld op de p5.js site

In de schets zijn vele variaties mogelijk door bijvoorbeeld gebruik te maken van andere "pixel" vormen of een andere "zw" (regel 26) formule te gebruiken.

Je kan ook een alpha toevoegen zodat de overlappende ellipsen of rechthoekjes deels doorzichtig zijn, of de hoeken van de rechthoekjes afronden zodat de achtergrond deels zichtbaar is.

 

let video
let vScale = 16;
let slider;
 
function setup() {
  createCanvas(640, 480);
  pixelDensity(1);
  video = createCapture(VIDEO);
  video.size(width/vScale,height/vScale);
  video.hide();
  //slider 1) min waarde, 2) max waarde 3) instel waarde
  slider = createSlider(0, 255, 127)
}
 
function draw() {
  video.loadPixels()
   for (let y = 0; y < video.height; y++) {
     for (let x = 0; x < video.width; x ++) {
      let loc = 4*(x + y * video.width);
      let r = video.pixels[loc+0];
      let g = video.pixels[loc+1];
      let b = video.pixels[loc+2];
      let zw = (r+g+b)/3;
      let drempel = slider.value();
   // let w = map(zw, 0, 255, 0, vScale);
 
      if (zw < drempel) {
         fill(b,r,g);
         ellipse(x*vScale,y*vScale, vScale+30, vScale);
    }
        else
     {
         fill(r,g,b);
        // ellipse(x*vScale,y*vScale, vScale, vScale+30);
         rect(x*vScale,y*vScale, vScale, vScale);
     }
   }
  }
}

Flevopink