HOW TO USE createImage()?

p5.js Beginners
1

I have an idea where I want user to draw something and make it an image. How to use it, possibly, it has something to do with createImage(), but I’m not familiar with it. Thanks for helping me with it in advance

1 Like
2

Hi,

Welcome to the community! :slight_smile:

Because the main canvas already acts as an image, I think that the simple way is just to use the save() function to save the canvas as an image after the user draw something on the screen :

function setup() {
  createCanvas(400, 400);
  
  // White background
  background(255);
}

// Draw a black circle each frame
function draw() {
  fill(0);
  ellipse(mouseX, mouseY, 10, 10);
}

// If you press enter, save the image
function keyPressed(){
  if(keyCode == ENTER){
    save("drawing.png");
  }
}
4 Likes
3

oh, that’s easy; thanks!!!

1 Like
4

will that image be transparent???

5

@josephh I don’t think so, it will be transparent
Any other way

6

If you want to make it transparent, the first thing is to save it with the .png format for the alpha channel.

Then, on the above example, if you save the image it has a white background because we said that in the setup() function. It’s not what we want.
The solution is to only draw your circles on another “buffer” (a p5.Renderer object) by using the createGraphics() function :

var drawing;

function setup() {
  createCanvas(400, 400);
  
  // Create a new buffer with the same size
  drawing = createGraphics(width, height);
}

// Draw a black circle each frame
function draw() {
  // White background
  background(255);
  
  // Call the ellipse function on the drawing buffer
  drawing.ellipse(mouseX, mouseY, 10, 10);
  
  // Display the buffer for user feedback
  image(drawing, 0, 0);
}

// If you press enter, save the buffer
function keyPressed(){
  if(keyCode == ENTER){
    drawing.save("drawing.png");
  }
}
5 Likes
7

@josephh did you right all this now, you’ve got speed!!! Anyways, that’s something I want. thanks for you’re help

1 Like
8

Ahah yes it’s real time conversation :grin:

Happy coding! :wink:

1 Like
9

@josephh couldn’t be happier!!!

10

@josephh Now, you’re idea perfectly worked… But I want that image to be loaded for a sprite. Clearly, I can’t do it in setup, because it is loaded only once and that too in the beginning. How to solve this??

11

@ARNAV_A_GUPTA I don’t really understand your question, you want the user to be able to draw on a buffer that is going to be used for a sprite, is that right?

12

You can load images at any time, but because it takes time it’s common practice to load them (once) in setup. You can store image to memory and use it later. Naturally if you need to store the image permanently you need to save it to a file.

2 Likes
13

yeah! most likely. Kinda like this idea

14

@josephh point to be noted… How would I use it, it downloads outside the folder…

15

@SomeOne Yeah, I can do that, but how
like this? =>
variable = image(img,0,0)
I know it’s wrong but what’s wrong in writing it!!!

16

oh! got it thanks for your help @SomeOne

1 Like