P5.play - Create Sprite on a drawing canvas

Hi everyone,

I’m trying to figure out if it is possible to use createSprite/makeSprite from the p5.play library and render that on top of a drawing canvas I already have.

Right now I call drawSprites() inside the draw() function, and the problem I’m running into is that when I include the background color in setup(), you can draw (with mousePressed) just fine, but the sprites (which are moved with arrow keys) leave a trail across the page. When the background color is in draw(), then the sprites no longer leave a trail, but of course the drawings are drawn over with the background.

What is the solution to this? Is there a solution to this? Any help is appreciated

when use
background in DRAW()

drawing mode

the canvas is cleared and you have to draw all again,
( means also you have to remember all what you need to draw like by array or arraylist / for loops )
and the draw will show it ( at about 60 times per sec. )

without background you are in

painting mode

means the canvas is your memory
and you only have to ADD something.
( still on keyPressed ‘c’ can do a single background(0); for reset )

im sorry this reply didnt make total sense to me. im still not sure what to do. could you explain a little bit more some actions i should take?

so i should set the background in draw(), and then store the history of where the mouse has been clicked and display that also in draw()?

that would depend on WHAT you draw now at mousePressed()
if you draw like a single rectangle at each click, yes , remember the mouse position to a array ( best of PVector )
and in draw make a for loop over the array and draw all the rectangles you remembered.

why you not link to your project?

but not all is black or white,
there is a way to combine painting with drawing,
if you paint on ( to ) a extra graphic buffer ( and not to canvas )

here is my project: https://ansible-web.herokuapp.com/

ii want it so that you are both able to move around a sprite (rectangle) on the same space that you draw on. i stored all the lines drawn into an array which get rendered in a loop inside of the draw() function. that way, you do not see the trail the sprite was leaving behind.

right now i havent transmitted the sprite movements to the server yet so you cannot see other people move. i will also be adding some collision. my idea in the long run was to try to add collision to HTML objects.

1 Like


1 Like

get error on that one?, pls repair

sorry, am new to sharing, i dont think i ever have before. you can click the link and see the source code but im not sure how you can host it on your own.

1 Like

no, not see source code,
get 404 error here? is it a private ( payed ) github account or just a network error?