combining graphics

[sullen void]

scouring the internet for a solution and seemingly no answer.

to be as concise as possible I wont go into what the project is doing.

I have a graphics instance and a video instance running, these need to run separate for the project to run. but later in the execution they need to be combined as one graphics instance to feed into some ml5.js stuff i've got going on.

how do i go about this?

[tawny tree]

ffmpeg?

this tells us literally nothing

what is an "instance"?

[sullen void]

like an instance of a p5.graphics object

[tawny tree]

ah

[sullen void]

ill show some code if that helps

i just thought it may confuse things

so if i have these 3 here

[tawny tree]

well, I would have recommended ffmpeg, but using this new context, that wont work

[sullen void]

how would i put both drawinjg and video into combined

[tawny tree]

what do you mean with combine?

[sullen void]

i want to create a graphics instance which is the combined video feed of drawing and video

if that makes sense

[tawny tree]

it doesnt

what do you mean with combine?

[sullen void]

as in join them together

[tawny tree]

how?

side by side? add all the pixel values? overlay?

[sullen void]

add all the pixel values exactly

as if it were a screen capture

ill explain the project maybe to help:

[tawny tree]

easiest way would be looping over all the pixels every frame and adding them together

[sullen void]

ok

perfect

would that be calling load pixels

on both graphics instances

and adding them together

how would i then go about taking that data and putting it inside my combined graphics instance

[tawny tree]

hang on

[sullen void]

okee

[tawny tree]

this is really not well documented

what you need to figure out how to do is:

• get a pixel from a graphic
• get a pixel from a capture
• write a pixel to a graphic

I cant figure out how to do any of those tho, sry

[sullen void]

thank uu

[lucid steppe]

You can just draw the graphics on top of the video and make the capture invisible

Something like this

let cap, img, camReady = false;

function setup() {
  createCanvas(400, 400);
  cap = createCapture(VIDEO, () => camReady=true);
  img = createGraphics(width, height);
  cap.elt.style.display = 'none';
}

function draw() {
  if(!camReady) return;
  
  const x = random(width)|0, y = random(height)|0;
  img.loadPixels();
  img.set(x, y, color(255));
  img.updatePixels();
  
  image(cap, 0, 0);
  image(img, 0, 0);
}

[tawny tree]

but they said they need it in another graphics instance