Here is an example lesson plan on how to run Blot in your classroom. It could be as short as one day or extended over several weeks. To use Blot in multiple classes set the goal of each student creating their own artwork and submitting it to receive a Blot drawing robot.
For a one day schedule:
- Introduce Blot and Hack Club to your class [5 minutes]
- Get familiar with the Blot editor
- Make a simple shape together
- Learn different levels of drawing techniques [20 minutes]
- Work through Square Disarray guide
- Work through feather guide
- Work through the Blot visual puzzles [25+ minutes]
For the quickest introduction check out this video trailer for Blot.
Blot is a gateway to making physical things with machines through programmatic art. The process starts by using JavaScript in a web-based editor to create a line drawing that is generated with code. When you submit the line drawing to the virtual gallery Hack Club will send you the parts to build a drawing robot. That drawing robot can then draw your line drawing in real life. Check out this video to get a sense of the creative process and to see Blot in action.
See what you can make in Blot here.
Blot is made by Hack Club and is free to participate in to teenagers all over the world. We’re on a mission to create high quality publicly available engineering tools which inspire young people to pursue projects they didn’t know were possible. We’re funded by donors like the founder of GitHub who allow us to provide these tools to the world for free. Everything we make is open-source. That means it’s built in public (with teenage contributors) and every aspect of the project from the hardware and electronics to the web editor and finances is online in the open.
This video will orient you to the Blot editor and demonstrate the most basic Blot drawing.
To start head over to:
https://blot.hackclub.com/editor
You'll see this window:
We recommend making an account to save your files in the cloud. You’ll just need an email.
Click log in to save
Your program will live on the left. It's JavaScript.
And the drawing output on the top-right.
In the bottom right you can find information about what functions are available in the editor.
You can run your program by clicking Run (shift+enter) or with the hotkey shift+enter.
To center the view area on your document you can hit the button in the top right of the view window.
This will only work if you've called setDocDimensions in your code.
If I hover and drag over a number I can watch the drawing update in real time.
To save my document I can got to File -> Save to the cloud
Let’s make some drawings.
Blot includes a number of drawing functions in the Toolkit. Let's familiarize ourself with them by making some drawings.
Below we will walk through two tutorials.
The first one, Square Disarray, we will recreate a classic digital art piece. It is aimed more at beginners and will rely on programming concepts like variables, loops, and functions.
In the second guide, Intro to the Blot Toolkit, we will draw feathers. The guide will cover more of the drawing functions provided in the Blot editor. It will rely on concepts like randomness and mutation.
We'll start with drawing inspired by Georg Nees' Cubic Disarray.
Head over to:
https://blot.hackclub.com/guides
You'll see this page.
Open up Square Disarray.
The editor will ask if you want to reset the code you have cached. Resetting will make it easier to follow along with the guide. Make sure you've saved the code to the cloud if you want to keep it.
You'll see a new tab in the bottom right called workshop.
Follow along with the guide.
You can find a video of me walking through the Square Disarray below. This will show you how to work through guides in the Blot editor.
Watch how to use a guide here.
Head back over to https://blot.hackclub.com/guides and select Intro to the Blot Toolkit.
Work through the guide in a manner similar to Square Disarray.
Below are a series of visual puzzles. Try to recreate them.
When you've mastered these try to recreate your favorite piece from the gallery.
