How do Snap! blocks convert to JavaScript?

How do Snap! blocks and scripts convert to JavaScript? How does the placement of blocks affect the JavaScript? I want to create my own block-based visual programming language, but I'm not sure about this part...

If you want to know how snap works, maybe you should try reading the source code.

What folder and/or file contains the scripts for Snap! blocks?

I'm pretty sure morphic.js is what stores the position of a block (or morph). The actual block classes are in byob.js.

Yikes. The morphic.js file has over 1,000 lines of code.

@bh or @jens, could you please explain how Snap! blocks convert to JavaScript?

Aw, c'mon, you know that's not a useful answer. You usually do much better than this!

I know, I just know that jens doesn't like it when people talk about the snap source code on the forums. Of course, I have also learned how parts of snap work by reading the source code so...

You have a fundamental misunderstanding of how Snap! works. It's not a skin over Javascript; the blocks are not compiled into Javascript, or into anything else. The blocks are the program, in its final form.

Because it runs in a browser, Snap! itself is implemented in Javascript, but that's a different thing.

To say this in CS-speak: Snap! is an interpreter, not a compiler.

The easiest way to do what you're interested in would be to use Blockly, which is a block language implementation language; that's how almost everyone does it these days, including Scratch.

You're off by an order of magnitude. Ten thousand. More than ten thousand lines of code :slight_smile:
The comment at the beginning of that file is over a thousand lines of explanation, though. Did you read it? I've written it in English.

What's the "yikes" about, though? If you don't want to read go watch some movies, and if you don't want to think go play with some chat bot. But don't tag me here with questions about JavaScript or about how things works if you're too lazy to think. This about hard fun. I'm sorry if you're not ready for "hard".

Jens. Be nice.

@blockpointstudios: Even 10K lines isn't very much to implement a programming language. If you seriously want to write such a thing, you first have to learn how to read a large program, namely, not straight through from beginning to end, but in layers of abstraction, from big chunks (evaluate this script) down to details (look up the block in a table).

I just have one more question. How are the blocks the program?

EDIT: I think I understand now. As a block runs, it gets interpreted for computers to understand. Instead of compiling the whole project into another language, only one line is interpreted.

On another topic, I do understand that my comment about morphic.js was quite rash, and I'm currently reading the documentation. I have heard from other sources that Blockly is the best way to create a similar visual programming language, but I'd like to attempt this without it. I'll probably use morphic.js, as it was created for easier use of JavaScript.

I was like you, but before you made your question, I did it myself without asking to the forums, and yes, Snap! is not a compiler, is an interpreter, because, the Javascript is only for the block processes, not for the execution of the entire script, lambda and rings are just like containers of the copy of the blocks to execute the copies and get results of them. The ring object is the Context, that object have Context.prototype.toBlock to get a RingMorph based of the Context, and the Context to contain the blocks and continuations are in the expression of the Context. The RingMorph heirs from ReporterBlockMorph, that's why the reporter and ring blocks are too similar. The Context is on threads.js, and the block morphs are on blocks.js. Take care, this is just a clue for you. See ya! :wink:


Did you make your own visual programming language? If so, would you say that morphic.js is vital for creating one...?

Well, I'm creating one, public will be soon, but is just another fork of Snap!, but yes, morphic.js is the base to create morphs, animations with them, any use to them is possible, but only at your manner to demonstrate it. My programming language extends and revitalizes Snap! to a better one, with goods and bads, but yes, the name of it, is Super-Snap!. Search only in the forums, and you will be impressed!!! :wink:

Besides the documentation, are there any tutorials?

To the self Snap! and my fork, no, but discover it by yourself. :slightly_smiling_face: :lambda:


Does the placement of blocks in the editor affect how the project runs? Also, do you need to create a separate id for each instance of the same block?

Yes, the blocks in different placements can change the interpreting of them, but no, the ID is not necessary for the execution the blocks, also the blocks run in different processes, any block is similar to another one but not equal to them, only by itself.

And if do you wanna to view a post with a Super-Snap! beta, just go to this one... True Fullscreen request? (and more other features)