BlocksCAD

The educational technology and digital learning wiki
Jump to navigation Jump to search

Introduction

BlocksCAD is a scratch-like programming environment to create 3D objects. It was developed with the sponsorship of the Defense Advanced Research Projects Agency (DARPA) and the code is licensed GPLv3 or later. At the bottom of a project page (oct. 2018) we found the following definition: “BlocksCAD is an education technology company dedicated to creating tools that help students of all ages pursue their love of science, technology, engineering, art, and math (STEAM). Our signature product, BlocksCAD, is a cloud-based 3D modeling tool that encourages users to learn math, computational thinking and coding concepts through visualization and designing models to be 3D printed.”

The ownership and copyright of user-created models is not clear (to us).

If we understood right, BlocksCAD is implemented with Blockly, a a JavaScript library for building visual programming editors like Scratch. BlocksCad code will generate OpenSCAD code that one can export (code button on top right or the design window). Otherwise the STL model will be generated on the server. Playing with BlocksCAD is therefore also a way to learn OpenSCAD.

Beetle Blocks is a similar environment.

Application to education

Initially, BlocksCAD was designed to teach computer science. In this sense, their [1] offers various resources both free and paid to promote learning in this area.

The Blockscad Youtube channel is a free resource with about 20 videos for all levels ranging from a "quick start" to "training videos" dealing with more complex features. The BlocksCAD community is also an important resource for learning by downloading projects and sharing information and questions through their forum.

BlocksCAD offers paid online courses, including BlocksCAD 101, specifically aimed at teachers wishing to learn in the field.

Finally, the platform also seeks to promote the teaching of programming by supporting institutions wishing to launch such a project. Thus, courses from 4 hours to 2 days, either face-to-face or online, are offered. These courses offer the possibility to acquire better personal knowledge as well as ideas for activities to be carried out with students. To go even further, BlocksCAD offers to implement their project in schools. This implementation includes instructor onboarding, lessons aligned to a common core, and a management dashboard for an initial fee of approximately $7.50 per student per year.

More specific information can be found on the BlocksCAD for Education and Training Resources and Professional Development pages.

Interface

The BlockCAD interface is divided into four parts:

  1. On the left, vertically, a block toolbar (blue)
  2. In the middle, your workspace (white space with red box)
  3. On the right, a visual rendering window (orange)
  4. At the top, horizontally, a menu to manage your project and profile (green)

Block toolbar

The block toolbar contains 11 groups of blocks, each represented by a different color. It is possible to divide them into three categories :

  1. Basic blocks which are defined by parameters defining their shape
    • 3D shapes (Sphere, cubes, cylinders, torus)
    • 2D shapes (circle, rectangles)
    • Text (2D and 3D writing)
    • Experimental (triangles)
  2. The "overblocks" which generate an action on the basic blocks. They are therefore necessarily composed of basic block
    • Transformations (positioning, rotations, scale, color)
    • Constructive solid geometry operations (merge and subtract objects)
    • Loops
    • Functions (creation of subprograms and functions)
  3. Expressions, variables and constants, used for example to define dynamic parameters
    • Math (constants and arithmetic blocks)
    • Logic (logical and conditional operators)
    • Variables (defining a variable)

Workspace

The workspace is located in the middle of the screen. To insert elements, simply click on the desired block and drag it into the workspace. At the bottom right, you have three buttons to manage the zoom and positioning of your project in the workspace.

Rendering window

The rendering window is used to visualize the objects created in the workspace. It is a system of orthonormal axes in which :

  • The x axis is green
  • The y axis is red
  • The z axis is black (vertical)

The three axes x, y and z intersect at the origin, i.e. the center of your rendering window defined by the following coordinate (0;0;0). When the line is dashed, it means that the coordinate is negative. There is no unit (cm, mm) because it is chosen at the time of printing.

The visualization does not work interactively, so it is necessary to press the "Generate rendering" button to visualize the changes. A small horizontal toolbar allows you to change colors (1), to make the axes appear and disappear (2), to zoom (3), to change the point of view (4) or to take a picture (5).

Finally, this is also the place where you can export your project in STL format by clicking on the "Generate STL" button

Horizontal menu

This menu is divided into two lines. The first one allows you to change the language (sphere), to download projects or to connect and save your account. The second line allows you to name your project and to navigate in your workspace. Note that the keyboard shortcut CTRL+Z to go back also works as it is possible to delete a block with the delete key of the keyboard.

On the right hand side, you can choose to display either "blocks" to view your elements in the workspace or "code" to have access to your code. However, this code cannot be modified.

Examples

A simple flower

The "flower" described below was created to explore basic functionality. It took a few attempts to understand how to use loop variables (tip: check under "variables", then drag them).

  • It demonstrates subtractive geometry
  • Rotation and translation needed to position objects
  • A loop to create a curved object from cubes (using "hull" option) in the loop
  • A loop to rotate the same arm six times.
BlocksCAD flower code and rendering

View the https://edutechwiki.unige.ch/mediawiki/images/9/95/Fleur.stl

The generated STL seemed to be error free and the printer happily started printing it:

BlocksCAD flower printing
BlocksCAD flower printed

A flower that is parameterized

The next example shows how to use parameters, i.e. a user can change seven different parameters to create different shapes. See the comments in the exported OpenSCAD code below.

Octopus flower generator

One generated example can seen in the following picture:

Octopus flower with 10 petals

Generated OpenSCAD code:

//!OpenSCAD

// Number of petals. A number between 2 and 15 maybe.
n_petals = 8;
// Building block of a petal. Each petal is defined as a string of block with a "hull" around it.
block_width = 10;
// Building block of a petal. Height should be anything that is printable, e.g. between 0.5 and 20.
block_height = 2;
// Radius of the hub. A good value is 10, i.e. a width of 2cm.
hub_radius = 10;
// Radius of the hole. 4-5 mm is about the size of a pen. Must be at least 1.5 smaller than radius.
hole_radius = 5;
// Height of the hub in the middle. Something between 5 and 30 ?
hub_height = 15;
// Petal length in terms of blocks. Try between 2 and 10.
N_petal_blocks = 5;
deg_petals = 360 / n_petals;
difference() {
  // Flower without the hole. It has a hub plus petals.
  union(){
    translate([0, 0, hub_height]){
      // Sphere embedded on top of the hub
      sphere(r=hub_radius);
    }
    // The lower part of the hub
    cylinder(r1=hub_radius, r2=hub_radius, h=hub_height, center=false);
    // Loop to create N petals. Each  one is rotated
    for (rot = [0 : abs(deg_petals) : 360 - deg_petals]) {
      rotate([0, 0, rot]){
        // Untick hull for a postmodern experience...
        // chain hull
        for (pos = [0 : abs(1) : N_petal_blocks - 1]) {
          hull() {
          // This formula  will create a curved line. You can try others....
          translate([(pos * (2 * block_width)), ((pos * pos) * 1), 0]){
            cube([block_width, block_width, block_height], center=false);
          }
          // This formula  will create a curved line. You can try others....
          translate([((pos + 1) * (2 * block_width)), (((pos + 1) * (pos + 1)) * 1), 0]){
            cube([block_width, block_width, block_height], center=false);
          }
          }  // end hull (in loop)
         } // end loop

      }
    }

  }

  // Three objects that will be subtracted to create the hole. One stick plus a ball on top. The cylinder at the bottom will shave off stuff that inhibits 3D printing.
  union(){
    translate([0, 0, (1 * hub_height)]){
      sphere(r=hole_radius);
    }
    translate([0, 0, (0 - hub_height)]){
      cylinder(r1=hole_radius, r2=hole_radius, h=(2 * hub_height), center=false);
    }
    translate([0, 0, (0 - 3 * hub_height)]){
      cylinder(r1=hub_radius, r2=hub_radius, h=(3 * hub_height), center=false);
    }
  }
}

Alternatives

  • OpenSCAD (non visual programming language)
  • Beetle Blocks (Romagosa et al.), built on top of Snap

Links

Official

In french

Others

  • BlocksCAD (In German) A concise introduction.

Bibliography

  • Berdik, C. (2017). Kids Code Their Own 3D Creations with New Blocks-Based Design Program. Tech Directions, 76(9), 23.
  • Williams, K. (2015). Girls, Boys, and'Bots: The St. Clare's robotics team [Pipelining: Attractive Programs for Women]. IEEE Women in Engineering Magazine, 9(1), 25-28.
  • Chytas, C., Diethelm, I., & Tsilingiris, A. (2018, April). Learning programming through design: An analysis of parametric design projects in digital fabrication labs and an online makerspace. In Global Engineering Education Conference (EDUCON), 2018 IEEE (pp. 1978-1987). IEEE.
  • Chytas, C., Diethelm, I., & Lund, M. Parametric Design and Digital Fabrication in Computer Science Education.
  • Romagosa Carrasquer, Bernat. (2016). From the turtle to the beetle. Universitat Oberta de Catalunya http://openaccess.uoc.edu/webapps/o2/handle/10609/52807