Rules:

https://preview.redd.it/q26m7wdkqhyd1.png?width=1592&format=png&auto=webp&s=d8594fad67f6a5003b15b340ae39281318765d91

https://preview.redd.it/bsfeo81sqhyd1.png?width=1054&format=png&auto=webp&s=13b3b432d87165defdfe9afdb9fa38864353a570

Dear all, I would like to share with you guys, for fun and some feedback, my latest work called BYON. It was made entirely with Pure Data and Processing. I started to learn Processing specifically for this, and this community helped me when I got stuck.

My official fancy description of the project is: "BYON (or Bring Your Own Number) is an audiovisual piece with 1,000,001 movements. Little by little, these movements are being discovered, and whoever discovers a movement has the right to name it. Each movement consists of stereo music and video, both generated by computer code and based only on a numeric input. The music and video are unique for each number, ranging from (and including) 0 to 1,000,000. Yet, despite the seemingly random nature of the process, the sounds and visuals are not entirely chaotic. Through careful planning, coherence emerges across the movements, even in the absence of direct human control, making BYON an exploration of compromise with the unknown and an exercise in acceptance."

This is one of my favorite numbers so far, and I am uploading every new submission to this channel: https://youtu.be/ZLpDYavUFHI

If you want to discover and title your own movement, submit any number you’d like to see featured on this channel using this form: https://forms.gle/21mcnpsVA737aqTS7

A couple of people suggested that I added a BYON channel on my discord and we are experimenting with that. Link is in the video description as well.

Please let me know if you have any question or feedback.

I have reinstalled the library and the software over and over again but to no avail.

https://preview.redd.it/uuq4rdroi7yd1.png?width=1104&format=png&auto=webp&s=d47ec6462df2e180921b6b8cc49e97e27d9ca42c

Hello, I have an assignment on Open Processing. We need to follow the guideline of 50x50 pixels.

Please let me know what I can improve; I really don't like the colors, I find them very dull. I want something pastel and more girly, but I'm stuck. It's driving me crazy:

void settings() {
  size(500, 500);
}

void setup() {
  loadLevel(1);
}

void draw() {
  background(200);
  drawMap();
}

boolean solved() {
  return true; // To be completed later
}

void loadLevel(int lev) {
  // Load the level (to be completed later)
}

void drawMap() {
  drawMur(0, 0);     // Wall
  drawCaisse(0, 50); // Box
  drawSol(0, 100);   // Floor
  drawAvatar(0, 150); // Avatar
}

// Function to draw the box
void drawCaisse(int x, int y) {
  fill(184, 134, 11); // Box color
  rect(x, y, 50, 50);
  
  stroke(139, 69, 19); // Outline
  strokeWeight(4);
  line(x + 5, y + 5, x + 45, y + 45);
  line(x + 5, y + 45, x + 45, y + 5);
  
  strokeWeight(2);
  line(x, y + 10, x + 50, y + 10);
  line(x, y + 25, x + 50, y + 25);
  line(x, y + 40, x + 50, y + 40);
  
  strokeWeight(1); // Reset line thickness
}

// Function to draw the wall
void drawMur(int x, int y) {
  fill(169, 169, 169); // Wall color
  rect(x, y, 50, 50);
  
  fill(105, 105, 105); // Brick color
  // Each brick is drawn to stay within the 50x50 pixels limit
  rect(x + 2, y + 2, 20, 10);
  rect(x + 28, y + 2, 20, 10);
  rect(x + 2, y + 14, 20, 10);
  rect(x + 28, y + 14, 20, 10);
  rect(x + 2, y + 26, 20, 10);
  rect(x + 28, y + 26, 20, 10);
  rect(x + 2, y + 38, 20, 10);
  rect(x + 28, y + 38, 20, 10);
}

// Function to draw the floor
void drawSol(int x, int y) {
  fill(211, 211, 211); // Floor color
  rect(x, y, 50, 50);
  
  fill(169, 169, 169); // Stone texture
  ellipse(x + 25, y + 25, 30, 30); // Central stone
  ellipse(x + 15, y + 15, 10, 10); // Small stones
  ellipse(x + 35, y + 35, 10, 10);
  ellipse(x + 20, y + 35, 7, 7);
}

// Function to draw the avatar
void drawAvatar(int x, int y) {
  fill(255, 215, 0); // Hair
  arc(x + 25, y + 20, 40, 40, PI, TWO_PI);
  rect(x + 10, y + 20, 30, 25);
  
  fill(255, 224, 189); // Face
  ellipse(x + 25, y + 20, 25, 25); // Reduced to avoid overflow
  
  fill(147, 112, 219); // Eyes
  ellipse(x + 18, y + 18, 6, 6); // Adjusted size
  ellipse(x + 32, y + 18, 6, 6);
  
  fill(255);
  ellipse(x + 16, y + 16, 2, 2); // Highlights in the eyes
  ellipse(x + 30, y + 16, 2, 2);
  
  fill(255, 182, 193, 150); // Cheeks
  ellipse(x + 15, y + 23, 5, 4); // Reduced size
  ellipse(x + 35, y + 23, 5, 4);
  
  stroke(255, 105, 180); // Mouth
  strokeWeight(2);
  noFill();
  arc(x + 25, y + 25, 8, 8, 0, PI);
  
  fill(255, 105, 180); // Hair accessories
  ellipse(x + 10, y + 10, 6, 6);
  ellipse(x + 40, y + 10, 6, 6);
  
  noStroke();
  fill(255, 182, 193); // Dress
  triangle(x + 15, y + 45, x + 25, y + 30, x + 35, y + 45); // Adjusted to avoid overflow
  
  stroke(255, 224, 189); // Arms
  strokeWeight(2);
  line(x + 15, y + 35, x + 10, y + 40); // Left
  line(x + 35, y + 35, x + 40, y + 40); // Right
  
  line(x + 22, y + 45, x + 22, y + 50); // Left leg
  line(x + 28, y + 45, x + 28, y + 50); // Right leg
}

void keyReleased() {
  // To be completed later
}

void mouseClicked() {
  // To be completed later
}

class Player {
  // Atribute
   float xPos;
   float yPos;
   int speed;
   PImage pImg;
  
   Keylistener kh;

  //Konstruktormethode
  public Player(Keylistener keyL) {
  kh = keyL;
  speed = 3;
  xPos = 0;
  yPos = 0;
  pImg= loadImage("player.png");
  }
  
  void update(){
    if (kh.w == true) {
    xPos = xPos - speed;
  }
    if (kh.a == true) {
    yPos = yPos - speed;
  }
    if (kh.s == true) {
    xPos = xPos + speed;
  }
    if (kh.d == true) {
    yPos = yPos + speed;
    
   
  }
  
  
  } 
  void draw(){
    
    if (pImg != null){
      image(pImg,yPos,xPos);}
    
  
  
  
  
  }

This is the code for the player of my game. Right now I am trying to load the image every time i try it does not load . Please help me I really don't know what to do.

Whenever I run some boiler plate code for a window, it works, but as soon as I draw any primitive, processing throws:

sphere() is not available with this renderer.

I'm running windows 11, do ya'll have any Idea why this doesn't work?

This is a prototype game about a goose who has to keep the temperature right or else the world ends. I'm trying to add in more mechanics in but I really can't move on because the lag gets worse the more you play. Is there anything I can reduce or simplify?

let gabHeatColor = 0;
let gabThermoStat = 30;

var gooseHonk;
let laserHue = 0;

//denaplesk2 game timer
let timerValue = 30;
let startButton;

let timerBar = 0; //will appear @ top screen

function preload() {
  soundFormats('wav');
  gooseHonk = loadSound('spacejoe_bird-honk-2.wav');
}

function mousePressed() { //plays goose honk
  gooseHonk.play();
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  // textAlign(CENTER);
  setInterval(timeIt, 1000);
}

function timeIt() {
  if (timerValue > 0) {
    timerValue--;
  }
}

function draw() {
  // frameRate(20);
  background(140, 140, 72);
  strokeWeight(0);
  
  fill(107, 94, 43); //floor background
  rect(0, windowHeight/1.3, windowWidth, windowHeight);
  
  fill(140, 213, 237); //window
  rect(windowWidth/3, windowHeight/7, 200, 450);
  
  //timer > winstate or gameover
  fill(0);
  if (timerValue <= 60) {
    text(timerValue + " SECONDS", width / 3, height / 10);
  } else {
    text(timerValue + " SECONDS, You WIN!", width / 3, height / 10);
    frameRate(0);
  } 
  
  if (gabThermoStat > 100) {
    gabThermoStat = 999;
    text("oops world heated", 50, 50);
    text("Oh no SECONDS, You LOSE!", width / 3, height / 10);
  } if (gabThermoStat <= 0) {
    gabThermoStat = -99;
    textSize(windowWidth/20);
    text("oops world frozen", 50, 50);
    text("NO SECONDS, You LOSE!", width / 3, height / 10);
    frameRate(2);
  }
  
  gabFan();
  gabGooseBod();
}

function gabGooseBod() {
  push(); //goose neck
  stroke(240);
  strokeWeight(30);
  line(0, windowHeight, mouseX-(mouseX/2), mouseY-25);
  pop();
  
  fill(240); //goose torso
  circle(0, windowHeight, 300);
  fill(300); //gooseHead
  rect(mouseX-(mouseX/2), mouseY-25, 50, 50); 
  circle(mouseX-(mouseX/2), mouseY-25, 100);
  fill(0);
  circle(mouseX-(mouseX/2), mouseY-25, 40); //eye
  fill(255,166,0);
  circle(mouseX-(mouseX/2)+50, mouseY, 50); //goose bill & mouth
  
  fill(300,0,0,laserHue);
  rect(mouseX-(mouseX/2), mouseY-40, mouseX-(mouseX/2), 30);
  if (mouseIsPressed === true) {
    laserHue = laserHue + 40;
  } else {
    laserHue = 0;
  }
}

function gabFan() {
  fill(220);
  rect(windowWidth/2,windowWidth/2,windowWidth/2,windowHeight/2);
  
  fill(0);
  textSize(windowWidth/20);
  text("Thermostat: " + gabThermoStat + "/100", windowWidth/2+25, windowHeight/2)
  gabThermoStat = gabThermoStat + 1;
  
  let button0 = createButton("-1"); //heats up
  // button.mouseClicked(fanButton[0]);
  button0.size(90, 70);
  button0.position(windowWidth/2, windowHeight/2);
  button0.style("font-size", "48px");
  
  let button3 = createButton("3"); //3 button
  button3.mousePressed(fanButton);
  print(button3.mousePressed(fanButton));
  button3.size(90, 70);
  button3.position(windowWidth/2, windowHeight/2 + 70);
  button3.style("font-size", "48px");
  
  let button2 = createButton("2"); //2 button
  // button.mouseClicked(fanButton[1]);
  button2.size(90, 70);
  button2.position(windowWidth/2, windowHeight/2 + 140);
  button2.style("font-size", "48px");
  
  let button1 = createButton("1"); //1 button
  // button.mouseClicked(fanButton[2]);
  button1.size(90, 70);
  button1.position(windowWidth/2, windowHeight/2 + 210);
  button1.style("font-size", "48px");
}

function fanButton() {
  gabThermoStat = gabThermoStat - 20;
  print("-20, temp lowered");
}

Hello! New to Processing for Comp Sci I. For my midterm, I created a dice rolling simulator. I cannot get the first animation array scene that says "Click to Shake" to come back after clicking twice. Instead, it just gives you a new roll right away. How do I fix this?

import processing.sound.*; //imports sound library

SoundFile diceshaking, dicerolling; //declare sound variables

PImage roll0, roll1, roll2, roll3, roll4, roll5; //declare image variables

int numFrames = 6; //amount of images in the initial animation

PImage[] images = new PImage[numFrames]; //declaring an array for the animation

int frame = 0;

String shake = "Click to Roll"; //text for the first scene

String rolltext = "Click to Roll Again"; //text for the second scene

PFont engraved; //the font for the text

int x = 10; //variables to help the flow of the scenes

int y = 10;

void setup(){

size(700,700); //size of the canvas

frameRate(14); //the amount of frames shown per second

roll0 = loadImage("diceroll00.jpg"); //loading in images of the final dice roll

roll1 = loadImage("diceroll01.jpg");

roll2 = loadImage("diceroll02.jpg");

roll3 = loadImage("diceroll03.jpg");

roll4 = loadImage("diceroll04.jpg");

roll5 = loadImage("diceroll05.jpg");

diceshaking = new SoundFile(this, "diceshaking.mp3"); //loading in the shaking and rolling sound effects

dicerolling = new SoundFile(this, "dicerolling.mp3");

engraved = loadFont("AcademyEngravedLetPlain-48.vlw"); //loading in the font of the text

textFont(engraved); //naming the font

for(int i = 0; i < images.length; i++){ //for loop for the initial animation

String imageName = "diceshake" + nf(i, 2) + ".jpg"; //the array will take images based on the name and number of the file

images[i] = loadImage(imageName);

}

imageMode(CENTER); //makes images and text in center mode

textAlign(CENTER);

diceshaking.loop();

}

void draw(){

if(y == 10){

frame = frameCount % numFrames; //prints the images of the animation to the frame rate

println(frame);

image(images[frame], 350, 350);

fill(255);

textSize(40);

text(shake,width/2,height-30); //prints the String text

}

if (mousePressed == true && x == 10){ //if the mouse is pressed, a random interger 0-6 will be chosen

x = 15;

y = int(random(0,6));

}

if(x == 15 && y == 0){ //calling the dice roll function to display image and text based on interger associated

roll(roll0);

}

if(x == 15 && y == 1){

roll(roll1);

}

if(x == 15 && y == 2){

roll(roll2);

}

if(x == 15 && y == 3){

roll(roll3);

}

if(x == 15 && y == 4){

roll(roll4);

}

if(x == 15 && y == 5){

roll(roll5);

}

}

void mousePressed (){ //when the mouse is pressed, it shows a random dice roll and will give another when clicked again

if(x == 20){

dicerolling.pause();

diceshaking.loop();

x = 10;

y = 10;

}

}

void roll (PImage result){ //function that pauses the shaking sound, plays rolling sound, and displays the dice roll image

diceshaking.pause();

dicerolling.play();

image(result, 350, 350);

text(rolltext,width/2,height-30);

x = 20;

}

I'm trying to make one of those 2D car games where there are obstacles along the road and if one hits the car then game over, I created a class called obstacles and made an array containing 5 obstacles, I created this function to detect collisions with the car:

void crash(Car c){

if(dist(obstLocation.x,obstLocation.y,c.carLocation.x,c.carLocation.y) < 5){

textSize(128);

fill(255,0,0);

text("Game Over", 100,200);

hasCrashed = true;

}

}

When I run the code it seems that only one of the obstacles actually ends up calling this function (I'm guessing its the last object in the array?) whilst the rest do nothing.

Any advice on how I should go about fixing this issue?

I have the code working to the point of this video, https://youtu.be/MUM8_4mWxng?si=MgqxrN8TLcfzVu27 but am lost on what to do after it ends. it explains how to map the joy sticks to the getSlider code and such. the video says nothing about how to map the A, B, Y, and X buttons, the D-pad, the bumpers, or the triggers on the controller. i have looked at the example text included with the libraries I have added, but my pea sized brain cant read them. i need the a button to move a servo as long as i am pressing it, and the b button to do the same the opposite way. if i can get the code for that, i can copy it for the rest. any help would be appreciated

Is there any way I can center the scene (similar to how you can change where you view from using the camera function in p3d) in p2d? Where I am now it would require a lot of work to implement this such that I am drawing my objects relative to the cameras view. I'm wondering if theres any way I can just move the camera in p2d.

I've been experimenting with P2D and P3D instead of using the default renderer, and absolutely love the effect it has on my main program. Using anything but the default renderer makes my text stutter though. I can accept not using those renderers, but I'm still so curious as to why. Can anyone here help me?

void setup() {
  size(800, 800, P2D);  //THIS IS WHERE I'M CHANGING THE RENDERER options: -leave blank- for default, P2D, and P3D
  frameRate(60);
}

void draw() {
  background(0);
  pulseText();
}

void pulseText() {
  //flexible variables

  //text to display
  String text = "CLICK TO CHARGE WARP DRIVE!";

  //pulse settings
  float pulseSpeed = 0.05; //default: 0.01
  float pulseIntensity = 5; //default: 5

  //text formatting
  int textSize = width / 20; //default: width / 20
  int textColor = 255; //default: 255

  //text placement
  int textAlignment = CENTER; //options: CENTER LEFT RIGHT default: CENTER
  float textX = width / 2;
  float textY = height * .9;

  //set variables
  float pulse;

  //text formatting
  textAlign(textAlignment);
  fill(textColor);

  //oscillate the text size back and forth
  pulse = textSize + pulseIntensity * sin(frameCount * pulseSpeed);
  println("frameCount: " + frameCount);
  textSize(pulse);

  //display text
  text(text, textX, textY);
}

Hi, I’m a newbie-ish to processing. For my final project, I want to make a game like ace attorney (much lower in complexity and different characters, but still)! However, an issue has arisen. I’m unsure how to create a certain system.

During the trial scenes, a “cross examination” feature exists, where each witness will repeat their testimony continuously. On each line, you can either “press”, which will ask for more information, create a dialogue brach, and then send you back to the testimony, or you can “present evidence” (choose an item from your inventory to contradict it). However, I have… no idea how to program it. My system currently only has dialogue and a system to pan to each of the different locations in the court. How do I code the cross examination and the inventory menu? Also, how do I make it possible to be able to present any piece of evidence, but only one works in order to progress?

https://editor.p5js.org/dipsha.sanu.2103/sketches/EEZsSYi6U

here's one for a preview

so we are learning processing in school but it is just way to confusing and hard for me, i have asked my sir many time, he explains it well ngl without any issue but it just confuses me... processing in general just confuses me... any video on youtube which explains how it works in depth or something?

Hi! I'm trying to create a function in void mousepressed where another function will go off 5 seconds after clicking. Is there any way to do this? (I am using processing java).

For the love of life can anybody help me figure out why my N-Body simulator is acting so weirdly? Stuff getting ejected at mach 2 and stuff staying stationary, or, depending on how I configure things, gravity being opposite (but not even correctly opposite). Would kill for some help. I had things working in 2D but then my transition to 3D just killed it.

NBody PDE:

private Planet earth;
private Planet mars;
private Planet venus;
private Planet[] planets;
void setup(){
  size(1400,1000, P3D);
  int[] white = new int[3];
  white[0] = 255;
  white[1] = 255;
  white[2] = 255;
  earth = new Planet(100,300,0,0,0,0,2000,10,1, white);
  venus = new Planet(100, 5,0,0,0,0,2000,19,1, white);
  mars = new Planet(-20,40,0,0,0,0,2000,35,1, white);
}

void draw(){
  background(0,0,0);
  lights();
  camera((float)mars.getCenter().getX()+20,(float)mars.getCenter().getY()+20,(float)mars.getCenter().getZ()+40,(float)earth.getCenter().getX(),(float)earth.getCenter().getY(),(float)earth.getCenter().getZ(),0,1,0);
  //camera(20,20,40,(float)earth.getCenter().getX(),(float)earth.getCenter().getY(),(float)earth.getCenter().getZ(),0,1,0);

  for(int i = 0; i < 10000; i++){
    venus.appGrav(earth);
    mars.appGrav(earth);
    venus.appGrav(mars);
    earth.appGrav(mars);
    mars.appGrav(venus);
    earth.appGrav(venus);
    earth.movePlanet();
    venus.movePlanet();
    mars.movePlanet();
  }
  
  earth.drawPlanet();
  mars.drawPlanet();
  venus.drawPlanet();
  
}

Planet PDE:

class Planet{
 
  private Point center;
  private double mass;
  private Vector velocity;
  private double radius;
  private int divisor;
  private int[] rgb;
  private static final double G = 6.67430e-11d;
 
  public Planet(double xi, double yi, double zi, double dxi, double dyi, double dzi, double massi, double radiusi, int divisori, int[] rgbi){
    center = new Point(xi,yi,zi);
    velocity = new Vector(dxi,dyi,dzi);
    mass = massi;
    radius = radiusi;
    divisor = divisori;
    rgb = rgbi;
  }
 
  public double findFGrav(Planet body){
    double distance = body.getCenter().subtract(center).length();
    double force = G*((mass*body.getMass())/(Math.pow(distance,2)));
    return force;
  }
  public void appGrav(Planet body){
    double force = findFGrav(body);
    Vector dir = body.getCenter().subtract(center).normalize();
    //Vector dir = center.subtract(body.getCenter()).normalize();
    double accel = force/mass;
    dir = dir.scale(accel);
    velocity = velocity.add(dir);
  }
  public void setColor(int[] rgbn){
    rgb = rgbn; 
  }
  public void setCenter(double xn, double yn,double zn){
    center = new Point(xn,yn,zn);
  }
  public void setMass(double massn){
    mass = massn; 
  }
  public void setRadius(double radiusn){
     radius = radiusn;
  }
  public int[] getColor(){
    return rgb;
  }
  public Point getCenter(){
    return center;
  }
  public double getRadius(){
    return radius;
  }
  public int getDivisor(){
    return divisor;
  }
  public double getMass(){
    return mass;
  }
  public void drawPlanet(){
    fill(255,0,0);
    translate((int)(center.getX()/divisor),(int)(center.getY()/divisor),(int)(center.getZ()/divisor));
    sphere((int)radius);
  }
  public void movePlanet(){
    center = center.add(velocity);
    
  }
  
 
}

Point PDE:

public class Point {
    //instance variables storing location
    private double x;
    private double y;
    private double z;
    //constructor
    public Point(double x, double y, double z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }
    //getters and setters
    public double getX() {
        return x;
    }

    public double getY() {
        return y;
    }
    public double getZ() {
        return z;
    }

    public void setX(double x) {
        this.x = x;
    }

    public void setY(double y) {
        this.y = y;
    }
    public void setZ(double z) {
        this.z = z;
    }

    //adding vector to a point (moving point by vector magnitude in vector direction)
    public Point add(Vector v) {
        double newX = x + v.getDX();
        double newY = y + v.getDY();
        double newZ = z + v.getDZ();
        return new Point(newX, newY,newZ);
    }
    //Getting vector from subtracting two points (getting vector magnitude and direction by looking at difference in location between two points i.e. how far do i have to move and in what direction from where I am now to reach that other point?)
    public Vector subtract(Point p) {
        double newDX = x - p.getX();
        double newDY = y - p.getY();
        double newDZ = z - p.getZ();
        return new Vector(newDX, newDY,newDZ);
    }

    
}

Vector PDE:

//essential fundamental class
public class Vector {
    //initialize instance variables for storing properties of vector
    private double dx;
    private double dy;
    private double dz;
    //constructor for vector
    public Vector(double dx, double dy, double dz) {
        //store passed in values in instance variables
        this.dx = dx;
        this.dy = dy;
        this.dz = dz;
        
    }

    //Getters
    public double getDX() {
        return dx;
    }

    public double getDY() {
        return dy;
    }

    public double getDZ() {
        return dz;
    }

    //setters
    public void setDx(double dx) {
        this.dx = dx;
    }

    public void setDy(double dy) {
        this.dy = dy;
    }
    public void setDz(double dz) {
        this.dz = dz;
    }

    //Scale value of vector by scalar by multiplying the derivative for all axis by
    //the scalar
    public Vector scale(double scalar) {
        double newDX = dx * scalar;
        double newDY = dy * scalar;
        double newDZ = dz * scalar;
        return new Vector(newDX, newDY, newDZ);
    }

    //get two vectors added by adding together the derivatives for all axis (isolated by axis)
    public Vector add(Vector v) {
        double newDX = dx + v.getDX();
        double newDY = dy + v.getDY();
        double newDZ = dz +v.getDZ();
        return new Vector(newDX, newDY, newDZ);
    }

    //get two vectors subtracted from eachother by subtracting the derivatives for all axis(isolated by axis)
    public Vector subtract(Vector v) {
        double newDX = dx - v.getDX();
        double newDY = dy - v.getDY();
        double newDZ = dz - v.getDZ();
        return new Vector(newDX, newDY, newDZ);
    }

    // get dot product by squaring derivatives for all axis and adding them together
    public double dot(Vector v) {
        return ((dx * v.getDX()) + (dy * v.getDY()) + (dz * v.getDZ()));
    }

    ////get cross product
    //public Vector cross(Vector v) {
    //    double newDX = (dy * v.getDZ()) - (dz * v.getDY());
    //    double newDY = (dz * v.getDX()) - (dx * v.getDZ());
    //    return new Vector(newDX, newDY);
    //}
    
    //get length of vector by taking square root of the dot product of the vector with itself
    public double length() {
        return Math.sqrt(dot(this));
    }

    //normalize vector by scaling vector by 1/its length
    public Vector normalize() {
        double length = this.length();
        return this.scale(1.0 / length);
    }

   
}

So i have made this code using tim rodenbröker's tutorial on youtube but I want to input a video or live capture video instead of a photo but whenever I do that it keeps messing up the dither.

Please help me it's for a school proje

    PGraphics pg;
    float posX;
    float posY;
    PImage img;
    float scaling = 1;
    
    void settings() {
      fullScreen(P2D);  // Fullscreen with P2D renderer
    }
    
    void setup() {
      img = loadImage("image1.jpeg");  // Load your image here
      img.resize(width, height);  // Resize the image to fullscreen dimensions
      pg = createGraphics(width, height);  // Use fullscreen dimensions for graphics buffer
    }
    
    void draw() {
      rectMode(CENTER);
    
      // Set background color to white
      background(255);  // White background
    
      // Resize the image to fit the fullscreen size dynamically
      img.resize(width, height);
    
      pg.beginDraw();
      pg.background(255);  // Clear the graphics buffer to white
      pg.noStroke();
    
      // Set the resolution and step size
      float pg1res = map(mouseX, 0, width, 1, 500);
      float pg1step = width / pg1res;
    
      for (float x = 0; x < img.width; x += pg1step) {
        for (float y = 0; y < img.height; y += pg1step) {
          int pixelX = int(x + (posX * scaling));
          int pixelY = int(y + (posY * scaling));
    
          // Ensure pixel coordinates are within bounds
          if (pixelX >= 0 && pixelX < img.width && pixelY >= 0 && pixelY < img.height) {
            color pixel = img.get(pixelX, pixelY);
            float bri = brightness(pixel);
    
            // Map brightness to size and fade effect based on distance to mouse
            float distToMouse = dist(x, y, mouseX, mouseY);
            float size = map(bri, 0, 255, map(mouseY, 0, height, 0, 12), 0) * map(distToMouse, 0, width / 2, 2, 0); // Larger close to mouse
            float opacity = map(distToMouse, 0, width / 2, 255, 50);  // More visible close to mouse
    
            pg.pushMatrix();
            pg.translate(x, y);
    
            // Set the fill color to blue with variable opacity
            pg.fill(0, 0, 255, opacity);  // Blue color with variable opacity
            pg.rect(0, 0, size, size);
            pg.popMatrix();
          }
        }
      }
      pg.endDraw();
    
      // Adjust the tiling with mouse interaction
      float tilesX = map(mouseX, 0, width, 1, 84);
      float tilesY = map(mouseY, 0, height, 1, 48);
      float tileW = width / tilesX;
      float tileH = height / tilesY; // Changed to height for vertical tiling
    
      float rangeX = map(mouseX, 0, width, 0, 220);
      float rangeY = map(mouseY, 0, height, 0, 150);
    
      float acc = 3;
    
      // Tile and copy the image with displacement
      for (int x = 0; x < tilesX; x++) {
        for (int y = 0; y < tilesY + 10; y++) {
          int verschiebungX = (int)map(sin(radians(frameCount * acc + (x * 16 + y * 11))), -1, 1, -rangeX, rangeX);
          int verschiebungY = (int)map(cos(radians(frameCount * acc + (y * 10))), -1, 1, -rangeY, rangeY);
    
          copy(pg, x * (int)tileW + verschiebungX, y * (int)tileH + verschiebungY, (int)tileW, (int)tileH,
            x * (int)tileW, y * (int)tileH, (int)tileW, (int)tileH);
        }
      }
    
      // Keyboard controls for movement and scaling
      if (keyPressed) {
        if (keyCode == RIGHT) {
          posX -= 5;
        } else if (keyCode == LEFT) {
          posX += 5;
        } else if (keyCode == UP) {
          posY -= 5;  // Fixed movement direction for UP
        } else if (keyCode == DOWN) {
          posY += 5;
        } else if (key == '+') {
          scaling += 0.2;
        } else if (key == '-') {
          scaling -= 0.2;
        }
      }
    }