Introducing Rigglin

JT Nimoy
JT Nimoy
Sep 5 · 6 min read

Blockly bindings for p5js

I’ve had Processing in my life for almost a couple decades, and sometimes I’ve taught it to others. Processing is available in many languages: Java, Javascript, and Python. I end up using all of them. For example, I prefer python for fast prototyping if I know there won’t have to be a lot of addons. If I know I need specific addons, I usually keep the project in Java. If I need it to be on the web, I used to use Processing.js, and now I use p5js, a boiled down reboot of the Javascript implementation. After years of seeing people struggle with learning the basics of programming syntax and foundational hurdles, I’ve grown to believe that this is the part that needs a drastically new approach. Enter Google Blockly, whose codebase is finally mature enough for easy integration. Rigglin is simply Google Blockly, fitted with new p5 blocks.

Hello World

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

Notice the buttons in the toolbar. Run and Stop control the execution of the program that you write by snapping blocks together. Save/Share will store your blocks in the cloud and give you a unique URL. Code will show you the javascript version of your blocks. It can be useful for debugging as well. Restore is a way to get back the blocks you lost in a browser reload. It stores them locally, rather than in the cloud, and can work complimentary with save/share.

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!

Conclusion

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

JT Nimoy

Written by

JT Nimoy

Creative Technologist Multiracial Queer Trans Womxn of Color, with negative levels of privilege.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade