Stories on maker education and innovation 

Home creativity Bot Draw : Logo like framework for building VR experiences
formats

Bot Draw : Logo like framework for building VR experiences

Sample AFrame experience

Welcome to Bot Draw!(aka Project Dark Bat)

Looking for a fun way to practice your JavaScript skills and build cool VR experiences? InspiredToEducate.NET designed this code sample to enable you to play with very simple ideas in JavaScript. This sample uses a JavaScript framework called AFrame to build 3D content in your browser or mobile phone browser. The display engine supports major VR platforms including Google Cardboard, Vive, and Oculus. (Thank you AFrame community!)

In Bot Draw, you command a small bot who can travel in 3D space. The robot can place boxes, spheres, images, and other 3D shapes. This tool borrows ideas from popular code education tools like Logo, code.org, ScriptCraft by Walter Higgins.

You can review a sample scene here: https://dark-bat.glitch.me/

You can use the keys WASD to move around the scene.

You can edit and study the code here: https://glitch.com/edit/#!/dark-bat

If you make something cool, please let us know!

Hope you find this fun and helpful!

 

File Overview

  • views/index.html – This file contains HTML and JavaScript for the VR scene. To learn more about AFrame related content, please refer to AFrame.IO. Feel free to remix this glitch sample and start tinkering!!
  • public/demo.js – This file provides other demo functions using bot draw.
  • public/bot_aframe – Interested in enhancing the “Bot” code? This is the file for you!

Bot Draw methods

In order to draw, you start by creating an instance of the bot. The bot object has additional methods for drawing, turning, or moving.

Moving and turning:

  • moveUp(steps) – Move the bot upward a few steps
  • forward(steps) – Move bot forward a few steps
  • moveLeft(steps) – Move bot left
  • moveRight(steps) – Move bot right
  • setAngle(degrees) – Set angle of direction for the robot. Enter direction in degrees
  • getAngle() – Get current angle for the robot.
  • turn(angle) – Turn the robot a few degrees.

Drawing stuff:

  • drawBoxAt(width,height,depth,x,y,z) – Draw box at a particular location.
  • drawBox(width,height,depth) – Draw box at current robot location.
  • drawSphere(radius) – Draw sphere at current robot location.
  • drawSphereAt(radius,x,y,z) – Draw sphere at particular location
  • drawCone(radius,height)
  • drawCylinder(radius,height)
  • drawImageAt(strPath,width, height, x,y,z) – Draw image at particular location. The path should be a fully qualified path to a valid web image.
  • drawImage(strPath,width,height) – Draw image at bot location. The path should be a fully qualified path to a valid web image.

Remember locations, Return to locations

  • saveLocation(locationName) – Store bot location and give it a name.
  • moveToLocation(locationName) – Return to location by name

Change colors:

bot.drawColor = “red”

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
© Inspired To Educate
credit