VideoSwatch

For the 27th day of MinaCoding2024 : "CodeInCode" , VideoSwatch is coded in P5js with videos that were previously coded in SonicPi, LiveCodingYoutube & Hydra.

This fits the Code In Code prompt while also adding Video in Video by having these videos chaotically moving within the P5js code while being overlaid.

Poetry

The Limits
Make Pivots
Code in Code
Video in Video
Beyond a threshold
To work around the code

Video

P5js Code

let cnv; 
let vid = '<<iframe width="200" height="200" src="https://www.youtube.com/embed/muFte6podUM" title="Kangaroos in 16s   Hydra Remix 1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>'

let vid_rest = '<iframe width="200" height="200" src="https://www.youtube.com/embed/pwB9PVW59ow" title="MinaCoding Under 10 Minutes: Under400Remixed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>'

let vid_rest2 = '<iframe width="200" height="200" src="https://www.youtube.com/embed/jX1LQUxrGrY" title="MinaCoding Word Limit: Under400" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>'

function setup() {
  createCanvas(800, 800);

  createCanvas(windowWidth, windowHeight);

  cnv = createDiv(vid);
  cnv2 = createDiv(vid_rest);
  cnv3 = createDiv(vid_rest2);
  cnv4 = createDiv(vid_rest);
  cnv5 = createDiv(vid);
  cnv6 = createDiv(vid_rest);
  cnv7 = createDiv(vid_rest2);
  cnv7 = createDiv(vid);
  cnv8 = createDiv(vid_rest2);
}

function draw() {

cnv.position(400,400);

  if (second()  % 10 == 5)
    {
      cnv2.position(random(0,600),random(0,800))
      cnv5.position(random(0,600),random(0,800))
    }

   if (second()  % 10 == 3)
    {
      cnv3.position(random(0,600),random(0,800))
      cnv4.position(random(0,600),random(0,800))
    }

 if (second()  % 10 == 7)
   {
     cnv7.position(random(0,600),random(0,800))
    cnv8.position(random(0,600),random(0,800))
   }


}

function mouseClicked() {

  cnv.position(0,0);
}

function pixelattempt()
{
  // Get the color of a random pixel.
  cnv.loadPixels();
  img2.loadPixels();
  img3.loadPixels();

  const pixelX = random(width);
  const pixelY = random(height);
  const pixelColor = img.get(pixelX, pixelY);

    fill(pixelColor);
  rect(pixelX, pixelY, 20,20);

}