Assignment requirement:

How to process your oringinal pixel video

1-3 words discribe difference

Create and/or manipulate an image or video

Building blocks by your mouse

Matter.js

2D physics engine

Matter.Bodies Module - Matter.js Physics Engine API Docs - matter-js 0.20.0

//video capture function generate by Claude
let video;
let capturedFrames = []; // save capture frame
let isVideoRunning = true;
let lastFrame; // save frame, current useless
//----- Matter.js -----
let Engine = Matter.Engine,
  World = Matter.World,
  Bodies = Matter.Bodies;

let engine, world;
let ball, ground;
//-----
let ballArray = [];
let scaleFactor = 5;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  //low res
  video.size(width / scaleFactor, height / scaleFactor);
  // video.size(width, height);
  video.hide();
  MatterWorldSetup();
}

function draw() {
  background(0);
  Engine.update(engine); //update engine
  VideoOpen();
  drawelements();
  tint(20,250,255);
  // need fix
  //gradientEdit();
  
}
function gradientEdit(){
  //generate by chatGPT
  video.loadPixels(); // 加载视频像素
  loadPixels(); // 加载画布像素
   // 定义蓝绿渐变的起始和结束颜色
  let colorStart = color(0, 0, 255); // 青色
  let colorEnd = color(0, 255, 255); // 蓝色

  // 遍历每个像素，修改为蓝绿渐变
  for (let y = 0; y < video.height; y++) {
    for (let x = 0; x < video.width; x++) {
      let index = (x + y * video.width) * 4;
      let brightnessValue = (video.pixels[index] + video.pixels[index + 1] + video.pixels[index + 2]) / 3;
      
      // 根据亮度在蓝绿之间渐变
      let col = lerpColor(colorStart, colorEnd, brightnessValue / 255);

      let px = x * scaleFactor;
      let py = y * scaleFactor;
      fill(col);
      noStroke();
      rect(px, py, scaleFactor, scaleFactor);
      // 应用渐变后的颜色
       // pixels[index] = red(col);
       // pixels[index + 1] = green(col);
       // pixels[index + 2] = blue(col);
       // pixels[index + 3] = 255; // 不透明
    }
  }

  updatePixels(); // 更新画布像素
}

function VideoOpen() {
  if (isVideoRunning) {
    image(video, 0, 0, width, height);
  } else if (capturedFrames.length > 0) {
    //show saved frame
    image(capturedFrames[capturedFrames.length - 1], 0, 0, width, height);
 
  }
}
function mousePressed() {
  isVideoRunning = !isVideoRunning;
  mouseAddBalls();
  if (!isVideoRunning) {
    let frame = video.get(); // get current video moment
    capturedFrames.push(frame); // save current pic in array
  }
}
function mouseAddBalls(){
  let ball = Bodies.circle(mouseX, mouseY, 10, { restitution: 0.8 });
  World.add(world, ball);
  ballArray.push(ball);
}
function keyPressed() {
  if (key === " ") {
    // save screen image
    let currentFrame = get();
    currentFrame.save("YourAmazingWork!!.png");
  }
}
function creatBoundary() {
  // creat ground and walls
  ground = Bodies.rectangle(width / 2, height, width, 50, {
    isStatic: true, // solid
  });
  wallLeft = Bodies.rectangle(0, height / 2, 50, height, {
    isStatic: true, // solid
  });
  wallRight = Bodies.rectangle(windowWidth, height / 2, 50, height, {
    isStatic: true, // solid
  });
}
function drawelements() {
  //draw mouse added elements
  for (let i = 0; i < ballArray.length; i++) {
    let pos = ballArray[i].position;
    ellipse(pos.x, pos.y, 20, 20); 
  }
  //draw generate blocks
  fill(127);
  rect(block.position.x, block.position.y, 200, 200);
  ellipse(ball.position.x, ball.position.y, 80, 80);
  ellipse(ball2.position.x, ball2.position.y, 40, 40);
  fill(100);
  rectMode(CENTER);
  //hiden ground
  //rect(wallLeft.position.x, wallLeft.position.y, 50, height);
}
function MatterWorldSetup() {
  //https://brm.io/matter-js/docs/classes/Bodies.html#method_fromVertices
  // generated by ChatGPT 4O
  //The initial position of elements
  // create physical engine and world
  engine = Engine.create();
  world = engine.world;

  // create balls
  ball = Bodies.circle(320, 50, 40, {
    restitution: 0.9, // elasticity value
  });
  ball2 = Bodies.circle(80, 0, 20, {
    restitution: 0.99, // elasticity value
  });
  block = Bodies.rectangle(200, 200, 200, 200, { restitution: 0.7 });

  creatBoundary();

  // input objects into physicals world
  World.add(world, [ball, ball2, ground, block, wallLeft, wallRight]);
}

adding falling collision body and tint and ball color replace

week 8 picture edit effect v2 by sairamved -p5.js Web Editor