Emily Kramer – Final Project Documentation

Day One

  • Concept presentation: drawing robot that teaches middle school students how to code and build circuits
    • Initial version: students build the robot and circuits, then use Processing to control the robot’s movements
    • Guided by a physical instruction booklet
    • My final project will be an example of what a student could create given the instructions

Day Two

  • First round of feedback (from Cassie)
  • Best suggestion: use Processing to create an interactive instruction booklet rather than a physical booklet and have students deal solely with Arduino; makes a lot of sense and would probably alleviate a lot of confusion
    • Will base the booklet around videos of me putting together components
    • storyboard: 

Day Three

  • Started to make the videos of me putting together the robot itself
    • Materials: cup, markers, cut-up Styrofoam ball, 150 motor from Arduino kit, popsicle sticks
    • decided to have it so that motor will be pre-attached to cup, since kids will probably get frustrated trying to attach it themselves (it does take a lot of time and patience)
  • initial booklet instruction order: welcome screen, materials checklist, robot head, robot body video, robot composite video, breadboard-to-Arduino circuit video, breadboard circuit video, breadboard-to-motor circuit video, coding skeleton video, coding combination video, connection video, finished project video
    • Before each section (robot, circuit and coding), there will be text describing what the student will be doing
    • videos will feature some degree of explanation, especially the ones pertaining to the circuit
    • created a list of materials for each section and wrote down the specific steps for my videos for the first two sections (these will act as “scripts” for the videos)

Day Four

  • Second round of feedback (from Antonius and Tyson)
  • Look into block coding (available on the Arduino website, making the whole project even more accessible) to control the robot
    • Much easier than physically typing out the code and would mitigate frustration due to difficult syntax
    • The mix-and-match element might also encourage students to get creative with their own robot
  • Talk to other people about how best to create the transitions between the instruction videos; use paper prototyping
    • Should beginning materials checklist be words with check boxes or pictures that disappear when you click on them?
    • Should you click the screen or press a key to go to the next video?
  • Suggestions from Tyson: have the forward arrow key press to go to the next step
    • went with the spacebar instead (bigger)
  • Also not sure if I should include multiple examples or just one
    • ultimately had to go with just one example because of time constraints

Day Five

  • Used recitation time to explore the online block coding option ArduBlock
  • Definitely a headache to download
  • Have to decide how to configure the display of my project (whether to keep the instructions on the same computer that the user will use or have it run on a separate computer)
  • figured out that ArduBlock doesn’t work with the latest version of Arduino or the Arduino Uno board; as far as I know, the most recent version available for public download is the 2011 beta version
    • decided that instead of having program instruction videos, I would just have one screen with the actual Arduino code written out so that students could go back and forth between the instructions and their Arduino window as much as they need to, and because the syntax is so specific (they can copy-paste if they really need to)

Day Six

  • first figured out the circuit and Arduino code to control the motor speed with a potentiometer (got help from an Arduino for Dummies page)
  • filmed circuit videos (pretty straightforward)
    • split the circuit process into many videos because it’s a little more complex than the robot, and doing one or two steps per video can help keep things clear
  • started digital instruction booklet
    • first figured out how to create a series of screens where the user can go to the next screen by pressing the spacebar
    • IMG_1405 (video of progress so far)
  • finished booklet
    • inserted videos based on how we learned to do it in class
    • NOTE: at the time of user testing, the videos worked (please take my picture and video as proof), but after toggling with the code a little, they stopped working and I didn’t have time to fix it and film a new demo video. Here are the individual videos:
    • here are screenshots of the instruction booklet’s text screens:

Day Seven

  • user testing!
  • tested on my roommate Kate, because she had no prior experience in coding or electronics
  • I gave her the materials and had her go through the instructions to build her own robot
  • she had to go through twice, but she eventually did it
  • she responded well to the booklet, but had some good suggestions
    • I was most encouraged by the creative response she had; she immediately wanted to start making new things with Arduino, which to me represents the fulfillment of my original goal (to get kids excited about robotics and programming).
    • IMG_1380 (video of her with her final bot)
    • IMG_1381 (video of her feedback)

What I would do differently next time:

  • give myself more time and procrastinate less
  • do more organizational work and planning on the front end
  • do more user tests (preferably with actual kids)
  • try to make the instructions more visually attractive
int screen = 0;
PFont f;
import processing.video.*;
Movie amyMovie;
Movie bmyMovie;
Movie cmyMovie;
Movie dmyMovie;
Movie emyMovie;
Movie fmyMovie;
Movie gmyMovie;
Movie hmyMovie;
Movie imyMovie;
Movie jmyMovie;
Movie kmyMovie;
Movie lmyMovie;
Movie mmyMovie;
Movie nmyMovie;
Movie omyMovie;


void setup() {
  size(1000, 1000);
  f = createFont("Arial",14,true);
  amyMovie = new Movie(this, "IMG_1354.MOV");
  amyMovie.play();
  bmyMovie = new Movie(this, "IMG_1347.MOV");
  bmyMovie.play();
  cmyMovie = new Movie(this, "IMG_1355.MOV");
  cmyMovie.play();
  dmyMovie = new Movie(this, "IMG_1357.MOV");
  dmyMovie.play();
  emyMovie = new Movie(this, "IMG_1361.MOV");
  emyMovie.play();
  fmyMovie = new Movie(this, "IMG_1362.MOV");
  fmyMovie.play();
  gmyMovie = new Movie(this, "IMG_1364.MOV");
  gmyMovie.play();
  hmyMovie = new Movie(this, "IMG_1366.MOV");
  hmyMovie.play();
  imyMovie = new Movie(this, "IMG_1367.MOV");
  imyMovie.play();
  jmyMovie = new Movie(this, "IMG_1368.MOV");
  jmyMovie.play();
  kmyMovie = new Movie(this, "IMG_1369.MOV");
  kmyMovie.play();
  lmyMovie = new Movie(this, "IMG_1370.MOV");
  lmyMovie.play();
  mmyMovie = new Movie(this, "IMG_1371.MOV");
  mmyMovie.play();
  nmyMovie = new Movie(this, "IMG_1372.MOV");
  nmyMovie.play();
  omyMovie = new Movie(this, "IMG_1373.MOV");
  omyMovie.play();
}

void draw() {
  background(#39AEF5);
  textFont(f,14);
  fill(0);
  if(screen == 0) {
  text("Welcome! Today you'll be creating and programming your own drawing robot! This is your video instruction book.",10,100);
  text("In this project, you'll learn the basics of robotics, circuit-building, and coding.",10,150);
  text("Your teacher or acticity leader will hand out kits with all the materials you need.",10,200);
  text("This project will be divided into three sections: the robot, the circuit, and the code.",10,250);
  text("Make sure you pay attention to the checklist at the beginning of each section, so you know what you need to use.",10,300);
  text("Watch each video carefully and repeat the actions you see. After each step, press your spacebar to continue to the next step.",10,350);
  text("Let's begin. Good luck!",10,400);
  }
 if(screen == 1) {
   background(#0AF753);
   textFont(f,14);
   fill(0);
   text("Section One: Building Your Robot", 10, 100);
   text("In this section, you will be building the body of your robot in a few simple steps.",10,150);
   text("You will need:",10,200);
   text("3 markers",10,220);
   text("tape",10,240);
   text("cup with motor attached",10,260);
   text("styrofoam piece",10,280);
   text("popsicle stick",10,300);
 }
 if(screen == 2) {
   if (amyMovie.available()) {
    amyMovie.read();
  }
  image(amyMovie, 0, 0);
 }
 if(screen == 3) {
   if (bmyMovie.available()) {
    bmyMovie.read();
  }
  image(bmyMovie, 0, 0);
 }
 if(screen == 4) {
   if (cmyMovie.available()) {
    cmyMovie.read();
  }
  image(cmyMovie, 0, 0);
 }
 if(screen == 5) {
   if (dmyMovie.available()) {
    dmyMovie.read();
  }
  image(dmyMovie, 0, 0);
 }
  if(screen == 6) {
   background(#F21198);
   textFont(f,14);
   fill(0);
   text("Section Two: Building Your Circuit", 10, 100);
   text("In this section, you will be building the circuit that will power your robot.",10,150);
   text("Pay close attention to where the components are placed so that your circuit works!",10,200);
   text("You will need:",10,250);
   text("F/M wires (2 black, 2 red)",10,300);
   text("M/M wires (4 black, 4 red, 1 green, 1 blue)",10,350);
   text("breadboard, Arduino board and connector cable",10,400);
   text("150 motor, diode and transistor",10,450);
   text("220 ohm resistor, potentiometer and potentiometer knob",10,500);
 }
 if(screen == 7) {
   if (emyMovie.available()) {
    emyMovie.read();
  }
  image(emyMovie, 0, 0);
 }
 if(screen == 8) {
   if (fmyMovie.available()) {
    fmyMovie.read();
  }
  image(fmyMovie, 0, 0);
 }
 if(screen == 9) {
   if (gmyMovie.available()) {
    gmyMovie.read();
  }
  image(gmyMovie, 0, 0);
 }
 if(screen == 10) {
   if (imyMovie.available()) {
    imyMovie.read();
  }
  image(imyMovie, 0, 0);
 }
 if(screen == 11) {
   if (jmyMovie.available()) {
    jmyMovie.read();
  }
  image(jmyMovie, 0, 0);
 }
 if(screen == 12) {
   if (kmyMovie.available()) {
    kmyMovie.read();
  }
  image(kmyMovie, 0, 0);
 }
 if(screen == 13) {
   if (lmyMovie.available()) {
    lmyMovie.read();
  }
  image(lmyMovie, 0, 0);
 }
 if(screen == 14) {
   if (mmyMovie.available()) {
    mmyMovie.read();
  }
  image(mmyMovie, 0, 0);
 }
 if(screen == 15) {
   if (nmyMovie.available()) {
    nmyMovie.read();
  }
  image(nmyMovie, 0, 0);
 }
 if(screen == 16) {
   if (omyMovie.available()) {
    omyMovie.read();
  }
  image(omyMovie, 0, 0);
 }
 if(screen == 17) {
   background(#FCA25C);
   textFont(f,14);
   fill(0);
   text("Section Three: Programming Your Robot",10,100);
   text("In this section, you will be writing the code that will allow you to control your robot!",10,150);
   text("The next screen will show you the code you need to write in your Arduino window.",10,200);
   text("Make sure you write exactly what's on the screen, or the code might not work. Pay attention to capital letters!",10,250);
   text("In places where you see a single quotation mark, be sure to type a double quotation mark instead.",10,300);
   text("Press the spacebar to continue.",10,300);
 }
 if(screen == 18) {
   background(#B043F5);
   textFont(f,14);
   fill(0);
   text("int potentiometerPin = A0;",10,100);
   text("int motorPin = 9;",10,120);
   text("int potentiometerValue = 0;",10,140);
   text("int motorValue = 0;",10,160);
   text("void setup() {",10,180);
   text("Serial.begin(9600);",20,200);
   text("}",10,220);
   text("void loop() {",10,240);
   text("potentiometerValue = analogRead(potentiometerPin);",20,260);
   text("motorValue = map(potentiometerValue, 0, 1025, 0, 255);",20,280);
   text("analogWrite(motorPin, motorValue);",20,300);
   text("Serial.print('potentiometer= ');",20,320);
   text("Serial.print(potentiometerValue);",20,340);
   text("Serial.print('t motor= ');",20,360);
   text("Serial.println(motorValue);",20,380);
   text("delay(2)",20,400);
   text("}",10,420);
 }
 if(screen == 19) {
   background(#39AEF5);
   textFont(f,14);
   fill(0);
   text("Congratulations, you're almost finished!",10,100);
   text("Now, just connect the Arduino to your computer by plugging the connector cable into a USB port.",10,150);
   text("In the Arduino window, click the Upload button to upload the code to the Arduino.",10,200);
   text("If there are problems with the code, Arduino will tell you what they are before it finishes uploading.",10,250);
   text("Once the code uploads, you can control your robot's speed by turning the knob on your potentiometer.",10,300);
   text("Enjoy your robot! You can keep experimenting with code and circuit components to find your favorite way to control the robot.",10,350);
 }
}

void keyPressed() {
  screen = min(screen + 1, 20);
}

Leave a Reply