# Blockly javascript code

**URL:** <https://discourse.processing.org/t/blockly-javascript-code/13288>\
**Category:** Coding Questions\
**Created:** [August 10, 2019, 7:29am UTC](https://discourse.processing.org/t/blockly-javascript-code/13288 "2019-08-10T07:29:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![deseingalt](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@deseingalt](https://discourse.processing.org/u/deseingalt)\
**Post date:** [August 10, 2019, 7:29am UTC](https://discourse.processing.org/t/blockly-javascript-code/13288/1 "2019-08-10T07:29:45Z")

</div>

Hi,  
Does anybody know how to adapt a blockly javascript code to P5.Js…?  
Thanks

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 12, 2019, 6:14pm UTC](https://discourse.processing.org/t/blockly-javascript-code/13288/2 "2019-08-12T18:14:35Z")

</div>

> [@deseingalt](#):
>
> a blockly javascript

Possibly – which blockly webservice was it written on?

---

<div class="post-metadata">

**Author:** ![deseingalt](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@deseingalt](https://discourse.processing.org/u/deseingalt)\
**Post date:** [August 15, 2019, 7:53pm UTC](https://discourse.processing.org/t/blockly-javascript-code/13288/3 "2019-08-15T19:53:08Z")

</div>

Thanks for your interest… in fact the blockly javascript is not far from p5 one. changes can be made manualy , figures , circle and rect (rectangle) for wich colour are included and some other things, nothing difficult , only need to put things in the right place

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 15, 2019, 8:46pm UTC](https://discourse.processing.org/t/blockly-javascript-code/13288/4 "2019-08-15T20:46:33Z")

</div>

Sorry I was unclear. I know what [Blockly](https://github.com/google/blockly) is.

I was asking which blockly code you are trying to adapt – what, from from where.

There have been multiple experiments with integrating blockly and processing / p5.js.

see for example blockp5.js, and blockly-processing, and Code It Studio

- [https://forum.processing.org/two/discussion/23821/blockp5-js-p5-js-blockly](https://forum.processing.org/two/discussion/23821/blockp5-js-p5-js-blockly)
- [https://github.com/archive-for-processing/blockp5.js](https://github.com/archive-for-processing/blockp5.js)
- [https://github.com/kut-tktlab/blockly-processing](https://github.com/kut-tktlab/blockly-processing)
- [https://forum.processing.org/two/discussion/26863/block-editor-for-processing](https://forum.processing.org/two/discussion/26863/block-editor-for-processing)
- [https://app.code-it-studio.de/](https://app.code-it-studio.de/)

There are also lots of things written in blockly – so the question is what kind of blockly you are trying to adapt.

If you solved your problem, that is good!

---

<div class="post-metadata">

**Author:** ![deseingalt](https://avatars.discourse-cdn.com/v4/letter/d/c5a1d2/32.png) [@deseingalt](https://discourse.processing.org/u/deseingalt)\
**Post date:** [August 16, 2019, 5:26pm UTC](https://discourse.processing.org/t/blockly-javascript-code/13288/5 "2019-08-16T17:26:39Z")

</div>

![49](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7b72b978b0f48eb4c77ab45477033c8172ed7d7c.png)  
 ![26](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/79918ae7348c0535cf77c8a7250c043cd0ecbdfe.png)

here is “coding with chrome” that I use on my chromebook…  
I have seen a lot of examples programing with blocks, but did’nt find the ergonomy of the guenuine blocky…  
I have a lot of programs writen this way that I will copy and adapt in p5 editor to access mouse management and share option , I have posted my first recently.  
Thanks for your interest…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 16, 2019, 5:55pm UTC](https://discourse.processing.org/t/blockly-javascript-code/13288/6 "2019-08-16T17:55:33Z")

</div>

> [@deseingalt](#):
>
> coding with chrome” that I use on my chromebook

Neat. I wasn’t familiar with the Coding with Chrome extension.

[https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed?hl=en-US](https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed?hl=en-US)

> **[GitHub - google/coding-with-chrome: An Open Source Educational IDE.](https://github.com/google/coding-with-chrome)**
>
> An Open Source Educational IDE. Contribute to google/coding-with-chrome development by creating an account on GitHub.

Looks like it can be installed in Desktop Chrome as well.

Their built-in Blockly editor is vanilla blockly – it has its own JavaScript draw functions, so it isn’t using p5.js for drawing the way some of the projects that I linked above are. The Coding for Chrome \> Blockly \> draw menu contains:

> clear, Circle, Rectangle, Point, Line, Ellipse, Triangle, Text

In p5.js those would be lowercase: point, line – also, Rectangle() is rect().

Blockly draw objects also take a direct color argument, while in p5.js you set fill() and stroke() separately before drawing geometry.

In the “Colour” menu, you get “colour with” – in p5.js that is color(). It can be RGB, like in Blockly, or you can use colorMode() to set it to HSB and/or change the range values.

Finally, there are a _lot_ more available functions in p5.js. See the reference for details:

> **[reference | p5.js](https://p5js.org/reference/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.