Writing on sand

Requests
1

Hello. Is it possible to create a simulation of writing on sand? With pen or physics. Is this possible with ZIM?

2
1 Like
3

Thank you very much. It's very nice.

4

image
image892×591 100 KB

I want it to be like this. I don't want the pencil lines to be visible while I'm dragging.

1 Like
5

Looks better without the pen lines, agreed.

6

image
image912×495 85.5 KB

I made a few changes and finally made it like this. Everything is great. But there is a problem. After drawing the first horizontal line while making "z", when I raise my hand and want to draw the second line, it does not start from the end point of the first line. When you press a little to the side, it becomes a line. How can I solve this?

1 Like
7
8

The student may want to draw exactly where it ends. The student may not think that he/she will draw from the lighter side.

1 Like
9

Almost looks like the MotionController() is not drawing on the Pen. Try setting pen.paper.noMouse();

10

This didn't work. Also, penType:"splatter" doesn't seem to work for you. I'd also like to increase the density of the particles.

11 
var pen1=new Pen({

    color:[brown,brown.darken(.2)],
    penType:"splatter",
    size:{min:5,max:16},
    spread:{min:2, max:5},
    move:false,


})

pen1.paper.noMouse()

var motionCont= new MotionController((pen1).addTo(), "pressmove");

motionCont.speed=10


var pen2=new Pen({
    //color:[brown.darken(.4),brown.darken(.6),brown.darken(.8)],

    
    color:[brown,brown.darken(.2)],
    penType:"line",

    size:{min:2,max:5},
    spread:{min:2, max:5},
    move:false,

    borderWidth:50,
})

pen2.paper.noMouse()
var motionCont2= new MotionController((pen2).addTo(), "pressmove");

motionCont2.speed=10

my latest code

12

Oh - the Pen is adding back the mouse(). You can use:

S.on("stagemouseup", ()=>{
    pen1.paper.noMouse();
    pen2.paper.noMouse();
})

BTW - this issue only comes up because we are using 2 pens, one on top of another. The solution for drawing on itself is built in to one pen.

13
14

For increasing the density of the splatter, I guess make a couple of them - I do not think there is access to the interval we are using - which is odd... but Pen was always supposed to evolve to have more types and a way to customize them and add your own.

15

Thank you for your answer. I was adding the MotionController to the container, not to the stage. That's why noMouse() was not working. It works now, thank you.

16

But when there is a little too much drawing on the scene it slows down.

17

nice idea made a refresh button, window.location.reload("Refesh") but how to remove only the pen, what is drawed?

18

Your example is also very nice. But when there is a little bit too much drawing, it slows down a lot.

19

maybe it can be cached while drawing
idea is also to have a back button when you draw a wrong line
@abstract any idea how to cache the pen?

20

I tried to cache. I couldn't succeed. I couldn't do uptaceCache() with "stagemousemove". If the background of the scene is noMouse(), motionController doesn't work. If the background of the scene is noMouse, this "stagemousemove" doesn't trigger.

I think that even if cached, performance may be low. Because the pen creates a new object with every movement.

I'm not actively using the pen that is demoed on the createjs site right now. Since its working logic is a single graphic, its performance is very good.
@abstract Is it possible to rewrite ZIM.Pen? Or is it possible to make it like ZIM.Pen2 for testing purposes?