Making JavaScript for Snap! stage

I'm learning both JavaScript and Snap!, but I'm having a hard time figuring out how Snap! takes the JavaScript code. I can call the alert(); function just fine but if I want to draw a line on stage and use the draw(); function, nothing seems to happen. I'm not sure if the JavaScript function code effects the whole website, or the stage. I think the draw(); function is working but I'm not understanding how to effect the stage with it.

For an example, I'd like to know hot I could create a costume block with JavaScript to draw a colored in triangle on the stage.

Edit:
I found out the JavaScript code effects the page you are on, but I'm still carious on how to draw on the Snap! canvas for optimizing performance.

if you want to learn javascript i'd recommend just making a webpage with a canvas and trying to make some simple games with that first.

afaik snap isn't designed to work nicely with javascript, and isn't a good place to learn it. the function block is only to add bits of functionality that can't already be done in snap.

if you really want to do this or need to do something with performance i would reccomend drawing to the stage trailsCanvas (run this.trailsCanvas on the stage)

Thanks! I'm trying to optimize some pen functions, for an example, drawing and filling a triangle. I'm making an engine that uses quite a bit of triangles and the method I'm using is effective, but I'd like to make it as efficient as I can.

I'll use this.trailsCanvas and see what comes of it. Would you mind letting me know how you found out, so I could better understand how the JavaScript function effects the stage?

If you read through the snap source code, you can learn how to use snap functions.

(click the snap logo, then click download source. You can then click on code in order to see the source code for snap (most of the js is in the src folder))

A small tip, whenever you see a function like this

IDE_Morph.prototype.setDefaultDesign = function () {
    MorphicPreferences.isFlat = false;
    SpriteMorph.prototype.paletteColor = new Color(30, 30, 30);
    SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230);
    StageMorph.prototype.paletteTextColor
        = SpriteMorph.prototype.paletteTextColor;
    ...
}

In order to access it, you use this function

this.parentThatIsA(IDE_Morph).setDefaultDesign();

Basically how it works is, take the object from the function definition, in this case IDE_Morph (it can also be StageMorph, and basically any morph), and put it in the function this.parentThatIsA(), in this case it would be this.parentThatIsA(IDE_Morph). Now you can get any property that object has, or use any function that object has. In this case it would be this.parentThatIsA(IDE_Morph).setDefaultDesign();.

Of course I like to get the IDE_Morph this way

world.children[0]

because it looks nicer, and also doesn't rely on the function to be ran inside a javascript function block.

To get the StageMorph this way, you need to do

world.children[0].stage

And to get a specific type of morph, like in the function defenitions, just do

world.children[0].childThatIsA(StageMorph)

(replace StageMorph with the morph you want).

returning this in any sprite gives the sprite itself, and this.parent is the parent of the sprite (stage parent seems to just be the whole editor), from there i just log it and look through it.

in that case i would reccomend creating a "draw triangle" block that uses javascript if it's enabled, but can use snap blocks if it's disabled. that way other people can still work with the code easily and shows that it's still possible as a pure snap project.

iirc you can use a try catch from the error catching library to test if javascript is enabled.

oh and since i forgot to make this clear, trailsCanvas is where snap draws pen trails, so you can use it with pen blocks, and it will overwrite any existing pen.

Aww maaaaaaaaaan
this is certainly not p5.js or canvas(it is a canvas but its not an unpurposed or blank one so you can't draw onto it)
Learn to use Morphic

edit:actually ur not the only stoopy guy,when i first got a copy of snap 4 arduino(actually that was a pirate >:C) i tried rect(100,200,100,100); and wondered why it workn't :confused:

The op wants to draw on the snap stage, using pen. I don't think learning morphic would help a whole lot.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.