Blockly bindings for p5js
In the first demonstration, we will change the color of the canvas.
This screenshot shows the web app when you first launch it. The right white pane is a blank canvas. The grid is where the blocks will go.
You may also point a browser to http://rigglin.appspot.com
Near the top right, find the word “Color” and click it. The menu will expand. Three new options will appear under “Color”, now click “Creating & Reading”.
Notice the puzzle piece with the red rectangle on it. That’s the one we want to start out with. With this menu open, click and drag the color puzzle piece out onto the grid.
You should have this puzzle piece on your grid. Now click the red rectangle to see a color picker pop up. Choose a different color. Now choose a new block, this time from Color > Setting . It’s called “Background” and it should be right at the top.
Now with background and color blocks both on the grid, we can try to snap them together.
Mouse drag one of the blocks over and bring the jigsaw puzzle connectors closer, until they snap together. Then release the mouse.
You should feel a satisfying “click.” And now that you’ve formed a full statement, press the play button and see what ensues.
The entire canvas has been painted mint green. Now choose a different color and hit play again.
Notice that you have to hit play each time to make the statement “background” execute.
We will now modify the statement so that the color is created a different way. Highlight the color block and press Delete. It should vanish with an animation. Next, add a few more blocks. Find “Color” from Color > Creating & Reading. Find the number units under Math.
When you press play, you’ll see the canvas turn pink, and that’s ok.
In this case, a b c d are generic labels, and they are being used as red, green, blue, and alpha. Defaultly, p5js sets its color channel maximum to 255 for legacy reasons, but you can always change that. For example, let’s define a color where the maximum channel values are 1 by using colorMode() found in Color > Setting.
I’ve snapped the colorMode statement just above the background statement and that is the order that they will execute in. first the colorMode is set to RGB with max 1, then I can use a b c d differently with my number inputs. If I chose HSB, they would be different as well.
Now that we are in the 0–1 range, let’s make that more interesting by creating some “random fraction” blocks, from the Math menu.
With random fraction on each color channel, the background will be different each time you hit play.
Okay, so what if we want this to execute forever? Let’s put it inside a draw() function. From the Structure menu, go ahead and pull out a draw, and wrap it around your statements. This indicates that the statements will execute once per animation frame, after you hit play.
When you hit play, you’ll see a flickering of random colors happen. When you press Stop, the draw() loop will stop executing. Everything inside “draw” will execute repeatedly!
In this tutorial, we learned how to place blocks for the first time and press play/stop. We saw custom colors change a canvas, then an animated version of that. p5js has a lot more features than that. If you are interested in going forward, I recommend digging into basic 2D Primitives under Shapes. Don’t forget to press Save/Share and post what you worked on. Blockly is surprisingly easy to use, even for folks who haven’t done a lot of programming. p5js is a simple but powerful graphics and new media toolkit for the web whose flexibility enables satisfying integrations such as this one. I hope to see the tool grow more complete in its coverage of the p5js reference list. That said, this project has managed to reach the highest coverage amongst similar efforts to bring blockly to processing. That coverage is thanks to a generous grant from COSA.
Clinic for Open Source Arts Contributor Grant/Grantee
If you’d like to contribute to the development of Rigglin, here it is on Github: https://github.com/jtnimoy/rigglin