Sunday, December 14, 2014

Learning to Code with eTextiles

Learning to Code

This is Part 2 of a series I'm working on learning to code with eTextiles.  To learn WHY I think that eTextiles can provide an onramp for learning to code check out Part 1 (Preparing to Code using eTextiles) 

Photo Credit: Pixabay
So you're ready to learn to code your eTextile projects.  The process of learning to code will take you down a circular learning path that will have you cycling from a state of  "fuzzy understanding"  to a state of "clarity and aha's".  

This is because there is so much front loading when learning to code.  
There is a certain degree of "take it for granted"  that THIS BUNCH OF CODE has to be in every program. Don't ask why  just make sure its there!
This drove me crazy when I first started to learn to code.   

The teacher in me wanted to not move on until I understood each line of code and every piece of syntax in that line of code.  
Eventually I learned that I had to let go of that need to know what each word meant.  

~ I had to trust that I could create an understanding of what was happening based on the experiences I was about to go through. .  

~ I had to accept that for every new line of code there was so much "foundational" information that I was not ready to learn that it would feel fuzzy at best.   

~ I had to  make a deal with myself that it was okay that my  understanding of a phrase was fuzzy and that it was okay to move on as long as  I had a general idea of what that line of code does or why it was there. 

This was not so different than learning English.  When I first went to school,  I only knew six words in English.  We grew up speaking French in our home.  But that didn’t stop me from going to school.  Nobody pulled me aside and made sure I understood every word the teacher was saying before I was allowed to move on.  I started to  hear certain words in context more often than others.  I gained a general idea of what words went together.  Eventually my brain started to recognize patterns and I was able to use those patterns when I wanted to communicate with those around me.  So now I had to trust that my brains ability to recognize patterns would help me learn to code in a similar way to my learning English. 

So for now I'm going to proceed with this series of post with the assumption that this is okay. 
So I'm working on a premise that it's okay to 

1) Have some lines of code that you just accept on blind faith that they need to be there. 
2) Have some lines of code that you have a general idea of what that line does and why it's in the program
3) Want the code to make sense and seek out some tutorials that will help you learn how code works in manageable chunks

That's where these tutorials come in.  My plan is to create some mini lessons that have you building your understanding of coding concepts using some fun eTextile projects. Soon you'll be able to apply your new understanding of code to your own eTextile projects.  You'll  be able to apply  with other people’s code to personalize your own projects and also write your own code to create fun whimsical or practical eTextile projects. 


This will probably make some computer science teacher shudder  and I welcome anyone who understands computer science vernacular to correct and clarify in the comments.  I won't take it as criticism and welcome learning the correct language to accompany my understanding of what's happening in my eTextile project, and I will make the necessary corrections to my blog post. 


-------------------  Lesson 1:  The Anatomy of  Your  Arduino Program ---------------

We're going to start with a very simple program that will light the LEDs in my Pom Pom of my Christmas hat.   I twisted together the positive leads of 3 green LEDs   and then twisted together the negative leads of those same LEDs.   I tested my new circuit using a simple battery and some alligator clip.





Unfortunately,  you can't learn to code using a simple parallel circuits made out of LEDs, batteries and alligator clips.   You're going to add a "mini"  computer" to the mix.  This is where the LilyPad  Arduino board comes in.  The Lilypad  Arduino Simple contains a tiny microprocessor chip that you can program along with some several pins in the shape of eyelets that you can sew conductive thread to.  In the next few lessons you are gong to learn how to CODE the Lilypad's  "mini" computer take your eTextile projects to a new level.  

Let's take a look at the Lilypad.


Notice that there is a place to connect your negative and positive leads.
There is a place to connect a battery.
There is an off and off switch to preserve your battery.
There is a place to hook up a special FTDI connector that is used to attach the Lilypad to your computer using a a mini USB cable .

I created some simple directions for setting up your LILYPad with your  laptop/desktop computer here.  Once your LilyPad is attached to your computer, you'll be ready for the rest of this tutorial.


Let's connect the positive and negative leads from the GREEN POM POM to our LILYPAD board.

Hook the one Alligator Clip onto the positive leads of the LEDs and unto PIN 6 of your LilyPad.
Hook the other Alligator Clip from the negative leds of the LEDs and unto the PIN marked NEGATIVE on your LilyPad.




There is no need for a battery, since your computer is providing the power.  (But it's okay, but unnecessary to have a LIPO battery attached now, but you'll need it later).

Now let's COPY the following CODE (in yellow)  into the CODE Area of you ARDUINO software.
This is a very simple program I wrote to make the Green LEDs light and to introduce you to some CODING basics.


//------------------------------------------------------- the whole program -------------------------------

//Pick a name that you will use to refer to the PomPom  LED bunch
// Tell the LilyPad which pinhole the PomPom Led is attached to

int ledPom =6;  // LEDS in the pom pom

/*
The following commands are used to SETUP your Lilypad each time it runs
and only run once when you power up your lilypad and run your program
Tell the Lilypad whether each pin should send OUT info or take IN info
To light an LED you have the Lilypad has to send OUT info from the pin
*/
 
void setup()  
{   
  pinMode(ledPom, OUTPUT); // set up the ledPom pin so it sends OUT info
}  

// Start a program running that will LOOP over and over again 
 
void loop() // start the loop running over and over again
{ //beginning of the loop
    
 digitalWrite(ledPom, HIGH); //turn on 3 green leds in pom pom

} //end of the loop




Let's Take a CLOSER LOOK. 

This tutorial was created to help you understand that every part of the Arduino program is made up of a few basic sections.  Once you understand that each program has different sections, you will start to look for them and see patterns in what type of information belongs in each section.   

Take a look at the diagram below and look for the sections that are COMMENTS only.  The computer ignores comments, but humans who read the program love COMMENTS.  It helps us understand what is going on in in language that we humans can connect with.   There are two ways to add Comments to your code. 

The rest of the computer code above had 3 sections. 

The Getting Started Section

This section will organize some key pieces of information that my program needs to fun. I won't go into all the types of information that can go in the Getting Started section,  but I like to think of it as the "getting acquainted" part of the program.   In many activities in life we get started by introducing each other.   Once we know each other's names, we can get down to business.  

In our program above, our Getting Started Section as some comments (which the computer ignores)
and it has one additional command 

int ledPom =6;  


Notice also that the command above is followed by a comment.  The computer ignores the comment.  But you should always READ the comments.  They were meant for humans, not computers.  They will help you understand what your program is doing. 
int ledPom =6;  // LEDS in the pom pom


The SETUP Section

void setup()  
{   
  pinMode(ledPom, OUTPUT); // set up the ledPom pin so it sends OUT info
}

Notice that this sections always starts with the words void setup() 
It also contains two braces {  }  one at the beginning of the section and one at the end. 
Everything in between these two sections is all the SETUP work that the computer needs to do when it starts the program.  All the commands inside these braces need to run ONCE and ONLY ONCE when the program starts.  Notice that each command ends with a semicolon 
Be careful to include these or not accidentally delete them.  Missing semicolons are the most common mistake when starting to code.

pinMode(ledPom, OUTPUT);


The LilyPad pins are very flexible.  They can be used as INPUTS  where they sit around and LISTEN for information  to come in as IN to them  or as OUTPUTS where they send OUT information.  
The command above tells the computer that the PIN that we named LedPom should be an OUTPUT pin.  It will be used to send OUT information.  

Some of us are pretty good listeners.  Others are good talkers.   If you were a pin on the LilyPad would you rather "listen"  or "talk"?  Remember that you can't do both.    What would the command look like if you chose LISTEN?   What command would you write if you changed your mind and wanted to be a TALK instead of LISTEN? 

Here is how I would program myself to be a listener and wait for information to come to me
pinMode(Lucie, INPUT);


The LOOP Section


void loop()
    digitalWrite(ledPom, HIGH); //turn on 3 green leds in pom pom
}

This part of the program is run over and over and over again nonstop 
It starts with the words 
void loop()

and it also as two braces  {  }   one at the beginning of the loop and one at the end.   I sometimes add a comment after the braces to remind myself where the beginning of the loop starts and where it ends.  Computer programs can get quite long and its easy to lose track of which brace goes where.    

Every command that needs to be done over and over should be put inside the LOOP section. In our small program we only have one command.   This command tells our computer to turn the POMPOM  leds ON.   The digitalWrite command means "send out this information"  in the Parentheses ( )  we are told which pin should send out information ledPom and what information it should send out  HIGH  (notice the semicolon); 

digitalWrite(ledPom, HIGH); 

We know that pin 5 was named ledPom in the Startup section.  
We know that the positive lead of our Pom Pom LED's are hooked up to pin 5.
So when pin 5 sends out a HIGH level of electricity, the PomPom LED attached light up! 
(as long as their negative lead is also attached to ground (negative)  
See earlier lessons for  how to complete a circuit.  


Here is the Loop section with comments


void loop() // start the loop running over and over again
{ //beginning of the loop
    
 digitalWrite(ledPom, HIGH); //turn on 3 green leds in pom pom

} //end of the loop


Finally you've written your first eTextile program
Here is what the whole program looks like.  In the next section we will learn how to make to turn off the LED's,  make them blink,  make them light in a certain order and more. 

//------------------------------------------------------- the whole program -------------------------------


//Pick a name that you will use to refer to the PomPom  LED bunch
// Tell the LilyPad which pinhole the PomPom Led is attached to

int ledPom =6;  // LEDS in the pom pom

/*
The following commands are used to SETUP your Lilypad each time it runs
and only run once when you power up your lilypad and run your program
Tell the Lilypad whether each pin should send OUT info or take IN info
To light an LED you have the Lilypad has to send OUT info from the pin
*/
 
void setup()  
{  
  pinMode(ledPom, OUTPUT); // set up the ledPom pin so it sends OUT info
}  

// Start a program running that will LOOP over and over again 
 
void loop() // start the loop running over and over again
{ //beginning of the loop
    
 digitalWrite(ledPom, HIGH); //turn on 3 green leds in pom pom

} //end of the loop







Post a Comment