What is the simplest way to integrate p5.js into Blockly?

ToshiTeru HOMMA

unread,

May 23, 2021, 7:12:25 AM5/23/21

to Blockly

Hi,

I'm interested in Blockly blocks using p5.js, and have looked up relevant infomation on github and previous posts here. On Github, I found

1. zlindenbaum/blockly-p5js

2. ycatch/blockp5.js

3. jtnimoy/rigglin

I forked and ran 2 and 3. As for 3, I have an issue (can't complete gulp).

In this group's posts, I found

4. https://app.code-it-studio.de

which seems to be complete, but I cannot find its source code.

My immediate target is to resolve the gulp issue on 2, and run its Japanese version for kids. I hope to learn how it works, but not much information is available for a beginner on javascript/node.js/gulp/grunt/MAVEN etc.

While I'm willing to learn the structures/conventions/frameworks of these programs, it seems to be hard for beginners like me. I naively think that creating blocks using p5.js has to be very simple because p5.js is written in Javascript.

So my question is... what is the simplest way of integrating p5.js into Blockly.

I'll appreciate information/attempts/pointers/discussions relating to this subject.

Best regards,

Teru

ToshiTeru HOMMA

unread,

May 23, 2021, 7:26:24 AM5/23/21

to Blockly

Hi,

Corrections to my previous post:

1. " I forked and ran 2 and 3. As for 3, I have an issue (can't complete gulp)" to "I forked and ran 2 and 3. As for 3, I have an issue (can't complete gulp)".

2. "My immediate target is to resolve the gulp issue on 2" to "My immediate target is to resolve the gulp issue on 3".

Best regards,

Teru

2021年5月23日日曜日 20:12:25 UTC+9 ToshiTeru HOMMA:

Boris Ettinger

unread,

May 23, 2021, 5:37:16 PM5/23/21

to Blockly

I don't think you should try to address the gulp problem in #3. It is a very impressive project but the packaging is not great - they added their work straight into the source code of the Blockly library itself.

Adding support for a javascript library has two steps:

1.Define your blocks https://github.com/jtnimoy/rigglin/blob/master/blockly/blocks/p5.js

2. Define the Javascript code https://github.com/jtnimoy/rigglin/blob/master/blockly/generators/javascript/p5.js

After these two steps, you can translate the blocks into code and run it. The author of #3 does it here https://github.com/jtnimoy/rigglin/blob/master/blockly/appengine/static/index.html#L544 but I believe there is a better way using a safe sandbox.

I would suggest that instead of trying to fix the packaging of #3, do the following:

Create a simple static html page, include Blockly and P5js from a CDN like unpkg
Include the two scripts that I mentioned above (remove the lines with goog.require)
Inject blockly into a div. Use toolbox definitions from here https://github.com/jtnimoy/rigglin/blob/master/blockly/appengine/static/index.html#L69

Hope it helps.

ToshiTeru HOMMA

unread,

May 23, 2021, 7:54:55 PM5/23/21

to Blockly

Thank you for your comment and advice. I really appreciate them.

Sorry about mentioning the gulp issue here. I raised it in the repo, and hoped to get some advice there. It may be just a version problem in a library or something, but I' afraid I don't have enough skill to resolve it by myself.

Your explanation about the rigglin's structure was very helpful. I'll try to follow your suggestion and hopefully get a good result.

Cheers,

Teru

2021年5月24日月曜日 6:37:16 UTC+9 ettinge...@gmail.com:

Uwe K

unread,

May 24, 2021, 6:03:37 AM5/24/21

to Blockly

Hello, I'm the author of #4. Unfortunately our code isn't open yet. I agree with the static page approach, it should be possible without using a build system like gulp. If you have further questions, I'm happy to help.

ToshiTeru HOMMA

unread,

May 24, 2021, 11:07:46 PM5/24/21

to Blockly

Thank you for chiming in. Very encouraging :)

Cheers,

Teru

2021年5月24日月曜日 19:03:37 UTC+9 Uwe K:

ToshiTeru HOMMA

unread,

May 24, 2021, 11:49:54 PM5/24/21

to Blockly

Hi,

Regarding methods to insert Blockly and P5.js scripts into a static HTML page,

Use URLs in CDN at https://unpkg.com/ (for both Blockly and P5.js)
Use URLs in CDN at https://www.jsdelivr.com (for both Blockly and P5.js)
Use *_compressed.js files in node_modules after executing `npm install blockly` (for Blockly)
Use local compressed js files whether built or downloaded somewhere... (for both Blockly and P5.js)

Which one is the best, the simplest, or the fastest?

Cheers,

Teru

2021年5月24日月曜日 19:03:37 UTC+9 Uwe K:

Hello, I'm the author of #4. Unfortunately our code isn't open yet. I agree with the static page approach, it should be possible without using a build system like gulp. If you have further questions, I'm happy to help.

Boris Ettinger

unread,

May 26, 2021, 12:15:22 PM5/26/21

to Blockly

There is no best or fastest in web applications - it really depends on the way you deploy the app and under what conditions.

Pulling things from CDN is the simplest since you only need to manage the files that you've created, also if your server is not very sophisticated then cdn will take part of the load off your server.

If download size is a concern then you should use a bundler such as webpack , which will do all kinds of optimizations on your code. Weigh this against the learning curve needed to setup it up and use it.

ToshiTeru HOMMA

unread,

May 30, 2021, 6:40:01 PM5/30/21

to Blockly

I really appreciate comments. It seems OK to change local blocks_compressed.js to CDN's as below (its site here works).

1 <script src="storage.js"></script>

2

3 <script src="blockly_compressed.js"></script>

4 <script src="https://unpkg.com/blockly/blocks_compressed.js"></script>

5 <script src="javascript_compressed.js"></script>

6 <script src="msg/js/en.js"></script>

7

8 //<script src="closure-library/closure/goog/base.js"></script>

9 //<script src="blockly/blocks/p5.js"></script>

10 //<script src="blockly/generators/javascript/p5.js"></script>

11

12 <script src="p5js/p5.js"></script>

13 <script src="p5js/sketch.js"></script>

:

However, changing blockly_compressed.js (or javascript_compressed.js) to CDN's and uncommenting corresponding lines above results in failure. Console log shows

en.js:5 Uncaught ReferenceError: goog is not defined

at en.js:5

:

The line 5 in msg/js/en.js is

5 goog.provide('Blockly.Msg.en');

Is it a simple/trivial bug? I'm afraid that my knowledge on goog.* and "closure" stuff is still insufficient.

Meanwhile I've learned how to create custom blocks in blockly, and tried here, adding a p5 block. The block's definition and generating stub were taken from rigglin's and put into customblocks.js, which are then imported into index.html. What remains seems to be just figuring out a div area for sketching the p5 code. The method shown in rigglin's index.html for doing it should be helpful. Am I right? If I succeed in it, adding other p5 blocks can be done likewise.

As a newbie in javascript and node.js, I'm learning a lot, but the amount of stuff to just find out how the program works is somewhat overwhelming for me...

I'm still hoping to find a simple solution, which may help other newbies understand and join the activity in blockly development.

Cheers,

Teru

2021年5月27日木曜日 1:15:22 UTC+9 ettinge...@gmail.com:

ToshiTeru HOMMA

unread,

May 30, 2021, 7:00:01 PM5/30/21

to Blockly

Correction to my previous post: the starting lines in index.html at the working site are as follows:

1 <script src="storage.js"></script>

2

3 <script src="blockly_compressed.js"></script>

4 <script src="https://unpkg.com/blockly/blocks_compressed.js"></script>

5 <script src="javascript_compressed.js"></script>

6 <script src="msg/js/en.js"></script>

7

8 <script src="closure-library/closure/goog/base.js"></script>

9 <script src="blockly/blocks/p5.js"></script>

10

Cheers,

Teru

2021年5月31日月曜日 7:40:01 UTC+9 ToshiTeru HOMMA:

Boris Ettinger

unread,

May 31, 2021, 4:03:57 PM5/31/21

to blo...@googlegroups.com

Don't use blockly_compressed.js, that's an internal file. You want to
use https://unpkg.com/blockly/blockly.min.js which is the fully build
package.

> --
> You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/oM2l3v5QaMI/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/bbda9fc8-fd31-4d37-b62a-7769c64dd8c0n%40googlegroups.com.

ToshiTeru HOMMA

unread,

Jun 1, 2021, 8:38:39 AM6/1/21

to Blockly

Thank you for your comment.

I tried https://unpkg.com/blockly/blockly.min.js and it works better :)

With the script tags of index.html like below, workspace seems to work (all the blocks are present in toolbox, and drag-and-drop works). But, when I hit "run", nothing happens.

Console issues error:

variables_dynamic.js:23 Uncaught Error: Language "JavaScript" does not know how to generate code for block type "p5_background".

at Blockly.Generator.blockToCode (variables_dynamic.js:23)

at Blockly.Generator.workspaceToCode (variables_dynamic.js:23)

at runCode (index.html:558)

at HTMLImageElement.onmouseup (index.html:32)

There are other errors like

base.js:2889 Uncaught Error: goog.require could not find: Blockly.JavaScript.p5

at goog.DebugLoader_.load_ (base.js:2889)

at Object.goog.require (base.js:903)

at p5.js:3

and

en.js:5 Uncaught ReferenceError: goog is not defined

at en.js:5

Any advice to fix these?

If resolving these is too hard or too time-consuming, I feel I'd better work on extendig the original blockly.

p5.js and blockly used in the repo seem old.

2021年6月1日火曜日 5:03:57 UTC+9 ettinge...@gmail.com:

ToshiTeru HOMMA

unread,

Jun 4, 2021, 10:43:58 PM6/4/21

to Blockly

Hi,

Started to work on extending Blockly to p5.js by adding custom blocks for p5.js.

As a test, adding a couple of p5.js custom blocks (createCanvas and background) in the generator demo worked as expected (as shown here). It was done by adding customblocks.js to the generator demo's root directory, and edited sample1.html, which included script tags for p5.js and customblocks.js as well as other necessary blockly scripts. This way, p5.js blocks need not be integrated into the blockly build process.

I created a Github repo, pBlockly, in order to do some experiments to make portable Blockly examples and extend Blockly to p5.js. I'm new to git, and will appreciate any comments/suggestions about how to go about a repo like this.

To make the demos in the repo as much as portable, I tried to delete unnecessary files/folders in the Blockly repo. My question now is whether retaining the playground and custom field demos. By deleting these demos, more files/foders in the repo, which are mostly relating to building Blockly, can be deleted. Even without them, custom blocks are made through the Blockly Developer Tools (blockFactory) demo.