BlocksCAD

De EduTech Wiki
Aller à la navigation Aller à la recherche
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.

Introduction

BlocksCAD est un environnement de développement qui propose un accès à la construction assistée par ordinateur (CAO en français, CAD en anglais pour Computer Aided Design). Il se base sur Blockly, un logiciel permettant un accès facilité à la programmation par un assemblage graphique de bloc, comme Scratch par exemple. Ce logiciel est donc pensé pour être utilisé par des enfants ainsi que des personnes ayant peu de connaissances en informatique et en programmation. Il est notamment utilisé par Einstein’s Workshop, un atelier pour enfants destiné à promouvoir les compétences techniques.

Dans le pied de page d’un projet (oct 2019), il est écrit que: “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.”

BlocksCAD fonctionne dans le navigateur web avec HTML 5. Il ne dépend donc pas d’Adobe Flash. Toutefois, sur Google Chrome ou Firefox, il nécessite l’activation de WEbGL. BlocksCAD génère des fichiers STL (StereoLythography) et XML. Le code peut également être exporté et utilisé dans OpenSCAD.

Il a été développé dans le cadre du Einstein’s Worskhop aux Etats Unis avec l’aide financière de la DARPA (Defense Advanced Research Projects Agency). Il est publié en tant que projet open source sous GPL v3.

Actuellement, BlocksCAD est disponible en 11 langues différentes.

Application à l'éducation

Initialement, BlocksCAD a été conçu pour enseigner l'informatique. En ce sens, leur site internet propose différentes ressources aussi bien gratuites que payantes afin de promouvoir un apprentissage dans ce domaine.

La chaine Youtube de Blockscad (anglais) est une ressource gratuite proposant une vingtaine de vidéos pour tous les niveaux allant d'un "quick start" à des "training video" traitant de fonctionnalités plus complexes. La communauté BlocksCAD est également une ressource importante permettant aussi bien d'apprendre en téléchargeant des projets qu'en partageant des informations et des questions grâce à leur forum.

BlocksCAD met à disposition des cours en ligne payants dont BlocksCAD 101, expressément adressés aux enseignants souhaitant se former dans le domaine.

Enfin, la plateforme cherche également à promouvoir l'enseignement de la programmation en soutenant les institutions souhaitant se lancer dans un tel projet. Ainsi, des cours de 4h à 2 jours, en présentiel ou en ligne sont proposés. Ceux-ci offrent aussi bien la possibilité d'acquérir de meilleures connaissances personnelles que des idées d'activités à mener avec ses étudiants. Pour aller encore plus loin, BlocksCAD propose d'implémenter leur projet dans les écoles. Cette mise en œuvre comprend l'intégration des instructeurs, des leçons alignées sur un tronc commun ainsi qu'un tableau de bord de gestion pour un premier montant d'environ 7,50 $ par élève et par an.

Des informations plus précises peuvent être obtenues en consultant les pages BlocksCAD for Education et Training Resources and Professional Development.

Interface

Blockscad: fenêtre de travail depuis Firefox (2019)

L’interface de BlockCAD se divise en quatre parties:

  1. A gauche à la verticale, une barre d’outil blocs (bleu)
  2. Au milieu, votre espace de travail (espace blanc avec encadré rouge)
  3. A droite, une fenêtre de rendu visuel (orange)
  4. En haut à l’horizontale, un menu pour gérer son projet et son profil (vert)

Barre d’outil blocs

La barre d’outil blocs contient 11 groupes de blocs, chacun représenté par une couleur différentes. Il est possible de les classer en trois catégories :

Barre d'outils blocs BlocksCAD.png
  1. Les blocs de base qui sont définis par des paramètres définissant leur forme
    • Formes 3D (Sphère, cubes, cylindres, tore)
    • Formes 2D (Cercle, rectangles)
    • Texte (écriture 2D et 3D)
    • Expérimental (triangles)
  2. Les « surblocs » qui engendrent une action sur les blocs de base. Ils sont donc obligatoirement composés de blocs de base
    • Transformations (positionnement, rotations, échelle, couleur)
    • Opérations de type constructive solid geometry (fusionner et soustraire des objects)
    • Boucles
    • Fonctions (création de sous-programmes et fonctions)
  3. Des expressions, variables et constantes, utilisées par exemple pour définir des paramètres dynamiques
    • Maths (constantes et blocs arithmétiques)
    • Logique (opérateurs logiques et conditionnels)
    • Variables (définir une variable)

Espace de travail

L’espace de travail se situe au milieu de l’écran. Pour insérer des éléments, il suffit de cliquer sur le bloc désiré et de le glisser dans l’environnement de travail. En bas à droite, vous avez trois boutons à disposition pour gérer le zoom et le positionnement de votre projet dans l'espace de travail.

Fenêtre de rendu

La fenêtre de rendu permet de visualiser les objets créés dans l’espace de travail. Il s’agit d’un système d’axes orthonormés dans lequel :

  • L’axe x est en vert
  • L’axe y est en rouge
  • L’axe z est en noir (vertical)

Les trois axes x, y et z se coupe à l’origine, soit au centre de votre fenêtre de rendu définit par la coordonnée suivante (0;0;0). Lorsque le trait est en traitillés, cela signifie que la coordonnée est négative. Il n’y a pas d’unité (cm, mm) car celle-ci se choisit au moment de l’impression.

La visualisation ne fonctionne pas de manière interactive de telle sorte qu’il est nécessaire d’appuyer sur le bouton « Générer un rendu » pour visualiser les modifications. Une petite barre d’outil horizontale permet de changer de couleurs (1), de faire apparaitre et disparaitre les axes (2), de zoomer (3), de changer le point de vue (4) ou de faire une photo (5).

Pour finir, c’est également l’endroit ou vous pouvez exporter votre projet en format STL en cliquant sur le bouton « Générer STL »

Menu horizontal

Ce menu se divise en deux lignes. La première permet de changer la langue (sphère), de télécharger des projets ou encore de se connecter de sauvegarder son compte. La deuxième ligne vous permet de nommer votre projet et de naviguer dans votre espace de travail. A noter que le raccourcis clavier CTRL+Z pour revenir en arrière fonctionne également tout comme il possible de supprimer un bloc avec la touche de suppression du claiver.

Tout à droite, il est possible de choisir son affichage soit « blocs » pour visualiser vos éléments dans l’espace de travail ou « code » pour avoir accès à votre code. Celui-ci n’est toutefois pas modifiable.

Créer un projet

Pour programmer un projet, trois différentes approches sont possibles:

  1. Par combinaison de blocs
  2. Par extrusion linéaire et circulaire de formes en 2D
  3. Par importation de fichier (format dxf par exemple)

Afin de commencer un projet, rendez-vous sur la page d’édition de BlocksCAD. Vous pouvez également vous rendre sur la page principale puis cliquer sur le bouton orange « Create Now » en haut à droite.

Combinaison de blocs

Ce sous-chapitre s'intéresse aux fonctionnalités de base de combinaison des blocs. Pour aborder ces notions, nous allons analyser différentes pièces d’un memory tactile utilisant les notions suivantes :

  • Déplacement et rotation d’objets
  • Union et soustraction d’objets
  • Boucle pour répétition d'objets

Exemples

Pièce 1 et 2

La première pièce est un cylindre de 10 de hauteur au milieu duquel se situe une sphère. Cette dernière a donc été déplacée de 10 sur l’axe de Z afin qu’elle s’intègre à moitié dans le cylindre. Le bloc « union » permet d’unir ces objets permettant ainsi de déplacer les deux objets ensemble. La deuxième pièce utilise les deux mêmes éléments unis par le bloc « soustraction ». Celui-ci permet de soustraire la sphère au cylindre créant un trou. L’ordre des éléments est ici important : l’objet soustrait doit se trouver sous l’objet présent.


Memory tactile: pièce n°1
Memory tactile: pièce n°2


Pièce 3

Pour cette pièce, la sphère est réduite et répliquée par

  • une boucle (0 à 9 signifie qu’il y a 10 objets. Le point 0 compte!)
  • une formule mathématique
  • une variable (« pos » pour position)

La sphère mesurant 1, il est nécessaire de la dupliquer 10x pour atteindre le diamètre de 10 du cylindre. La variable a été crée en cliquant sur la flèche violette du bloc « boucle ».

Memory tactile: pièce n°3


Pièce 4, 5 et 6

Cette quatrième pièce fait appel à la fonction de rotation, elle même englobée dans une boucle afin de tourner plusieurs la ligne de sphères. La variable « rot » correspond cette fois ci à une rotation allant de 0 à 360. La boucle agit tous les 90° ce qui crée la croix. La pièce 5 change uniquement le nombre de rotation effectuée. La pièce 6 coche l’option « coque » ce qui pour effet de lier les sphères.

Memory tactile: pièce n°4
Memory tactile: pièce n°5
Memory tactile: pièce n°6


Importer un projet

Grâce à la communauté de Blockscad, vous avez accès à une galerie depuis laquelle vous pouvez importer des projets, les modifier puis les imprimer. Il s’agit d’une solution intéressante afin d’apprendre à maitriser des fonctionnalités plus complexes.

Exemple

A titre d'exemple, nous allons ici paramétrer une fleur afin de l'adapter selon nos envies. Cette fleur utilise les fonctions décrites dans le chapitre précédent. Chaque bras est constitués d'un cube qui est déplacé sur les axes x & y permettant de faire des vagues et qui est transformé avec la coche "coque" pour créer un bras unique.

Pour ajouter un paramètre, cliquez sur le menu bloc brun "variable" et insérer un élément "fixer (...) à" au sommet de l'élément "soustraction". Ajouter la variable en cliquant sur la flèche. Vous pouvez ici choisir le nom de vos variables. Ensuite, ajouter depuis le menu bloc "math" en bleu l'élément vous permettant de définir votre variable. Vous obtenez ainsi des variables (brun) définie par des chiffres absolu (bleu)

La fleur possède 8 éléments paramétrables.

  1. n_petale: nombre de pétales
  2. bloc_l: largeur des blocs formant les pétales
  3. bloc_h: hauteur des blocs formant les pétales
  4. tube_r: rayon du tube central
  5. tube_h: hauteur du tube central
  6. trou_r: rayon de trou (soit, de la sphère soustraite)
  7. n_petale_bloc: nombre de bloc formant chaque pétale
  8. deg_petales = 360 / n_petals: nombre de bras

La dernière étape consiste à insérer les variables à la place de chaque élément définit auparavant par un chiffre absolu. Vous pouvez ensuite paramétrer votre fleur en changeant les variables dans les éléments bruns au sommet de votre code. Vous obtenez ainsi différents modèles de fleur (code disponible sous les images).

Fleur avec 10 pétales constitués de 3 cubes par pétale
Fleur avec 6 pétales constitués de 6 cubes par pétale

Code de la deuxième fleur:

//!OpenSCAD

// Les variables
n_petales = 6;
bloc_l = 6;
bloc_h = 3;
tube_r = 10;
tube_h = 15;
trou_r = 5;
n_petale_bloc = 6;
deg_petales = 360 / n_petales;

difference() { //pour soustraire le trou (à la fin du code)

  union(){ //union du cylindre, de la sphère et des blocs de pétales

    translate([0, 0, tube_h]){ //sphère
      sphere(r=tube_r);
    }
    cylinder(r1=tube_r, r2=tube_r, h=tube_h, center=false); //cylindre

    for (rot = [0 : abs(deg_petales) : 360 - deg_petales]) { //boucle et rotation d'un pétale 
      rotate([0, 0, rot]){ 

        for (pos = [0 : abs(1) : n_petale_bloc - 1]) { // boucle et déplacement d'un bloc avec coque (hull) pour former un pétale
          hull() {
          translate([(pos * (2 * bloc_l)), ((pos * pos) * 1), 0]){
            cube([bloc_l, bloc_l, bloc_h], center=false);
          }
          translate([((pos + 1) * (2 * bloc_l)), (((pos + 1) * (pos + 1)) * 1), 0]){
            cube([bloc_l, bloc_l, bloc_h], center=false); //cube de base du pétale
          }
          }  
         } 

      }
    }

  }

  translate([0, 0, (0 - tube_h)]){ // le trou à soustraire
    cylinder(r1=trou_r, r2=trou_r, h=(2 * tube_h), center=false);
  }
}

Enregistrement, exportation

Afin d’enregistrer votre projet sur la plateforme, vous êtes obligé de vous enregistrer. Vous pouvez également télécharger votre projet en fichier XML ou STL et l’enregistrer ainsi directement sur votre ordinateur. Le fichier STL vous permet ensuite d’imprimer directement votre projet avec une imprimante 3D.

Il est possible d'exporter le projet en OpenSCAD et de travailler ainsi avec le code. Cette solution est conseillée pour les projets complexes car travailler avec le code devient alors plus simple pour réaliser le projet en question. Toutefois, il n'est pas possible d'importer un projet OpenSCAD.

Alternatives

OpenSCAD (langage de programmation non-visuel)

Beetle Blocks (Romagosa et al.) construit sur en:Snap!

Liens

Tutoriels

Pour aller plus loin dans la programmation, des tutoriels sont à votre disposition.

Officiel (en anglais)

En français

Autre

Cette page a été traduite et documentée depuis les sources suivantes:

Bibliographie

  • Berdik, C. (2017). Kids Code Their Own 3D Creations with New Blocks-Based Design Program. Tech Directions, 76(9), 23.
  • Chytas, C., Tsilingiris, A., & Diethelm, I. (2019, April). Exploring Computational Thinking Skills in 3D Printing: A Data Analysis of an Online Makerspace. In 2019 IEEE Global Engineering Education Conference (EDUCON) (pp. 1173-1179). IEEE.
  • 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.
  • Williams, K. (2015). A Smarter Way to Play: Einstein's Workshop is a techie community center [Pipelining: Attractive Programs for Women]. IEEE Women in Engineering Magazine, 9(1), 23-25.
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=BlocksCAD&oldid=153858 »