How to load my canvas so I can do pixel manipulation

p5.js Coding Questions
1

Hi,

I’d like to play around with an existing sketch which uses:

function preload() {
img = loadImage(url + str(windowWidth) + random(keywords));
}

Excepted that I don’t want to use an external image, I would like to work on the generated drawings from my sketch.

Here is a very simple code to illustrate what I got:

let pg;
let size = 300;

function setup() {

createCanvas(size, size);
pg = createGraphics(size,size)
pg.background(random(255));
art();
noLoop();

}

function draw() {
image(pg,0,0, width, height);

}

function art(){

for (let i = 0; i < 100; i++) {
pg.fill(random(250),random(250),random(250));
pg.strokeWeight(1.15);
pg.circle(random(size),random(size),random(100));

}
}

I would have assumed that adding everything into my pg object would be the equivalent of loadImage but apparently it’s not.

Thanks for your help

1 Like
2

Can you be specific about what is not working, or what you are observing when you run this code? Your code looks like it should work, but I’m not in a position to test it right now.

3

Hi Paul,
I’ve found a solution, I’m using get() to import my final canvas back into an object that I can pass later on into the post processing functions.
My only remaining issue is the image quality.
When I display again the content of the variable containing the result of get() I have a very poor image quality.