Social Drawing HTML5 Canvas Part 1/5

Agreeing on the product

C. is the Product Manager and I’m the engineer.

Here it the minimal viable product

Name: social-drawing
–  A simple canvas to draw
– A color palette on top with 7 colors
–  neon colors palette
– to be able to change color
–  be able to move the mouse
–  click and move to draw
– need a eraser or white color
– Fill – maybe
– Brush size – maybe
– be able to save

Getting Started

Using CSS, HTML5, Javascript is the best programming language because they are ubiquitous, easy, lots of tools and sample and best of all it’s interactive

Tools for editing: I chose to use Emacs to edit the files, and C. was ok to learn it.  You can use Aqua Emacs, Text Edit, Notepad++ (Windows)

Use the browser for viewing, so Firefox, Safari or Chrome would work

I chose to use git and http://code.google.com/ to host the site and the code

Getting to a working version ASAP so the kids don’t loose attention

First version: http://code.google.com/p/teaching-kids-programming/source/browse/social-drawing/drawing.html?spec=svn99358fbb1e304cf67aedf977029fe80acfc6128d&r=99358fbb1e304cf67aedf977029fe80acfc6128d

We typed this up while riding BART and the indentation is not pretty, but we got a working version up with a few kinks

See the demo of version 0.1

See the final version

<html>
<title>
Social Drawing
</title>
<canvas id="canvas" width=500 height=350>
  </canvas>


var ctx;

  function init()
{
    var mouseX;
    var mouseY;
var canvas = document.getElementById("canvas");
if (canvas && canvas.getContext)
{
 ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", onMouseMove, false);
var radial = ctx.createRadialGradient(370, 60, 0, 370, 60, 70);
ctx.strokeStyle = 'lime';
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(10,10)

ctx.lineTo(500,10);
ctx.lineTo(500, 350);

ctx.lineTo(10,350);
ctx.lineTo(10,10);
ctx.stroke();

ctx.closePath();

}
  }
  onload = init;
function onMouseMove(e)
{
    mouseX = e.clientX-canvas.offsetLeft;
    mouseY = e.clientY-canvas.offsetTop;
    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
}

</html>

Next Step: Fixing the funky mouse action

Bouncing Yahoo Messenger ball Lession #8

From the last session with C., we have a login screen.  Now C. would like the little Yahoo! Messenger guy to bounce around.

Click here to see the page in action

She fired up TuxPaint and created a drawing of a spring


We used Preview to copy it and rotate it into horizontal spring

I started to read about the YUI animation library

First, we copy these 2 lines to include YUI libraries


<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js

The happy face guy is in the div tag as id=”happy_home”

<center>
</div> </center>

YUI has very simple syntax and she was intrigued with Y.one() syntax to create a node for #happy_home

 YUI().use('anim', function(Y) {
   var node = Y.one('#happy_home');

YUI has some sample code, at this point because I’m also learning Javascript and YUI, I experimented with the animation and finally was able to get the Yahoo! Messenger icon to bounce

 var anim = new Y.Anim({
 node: node,
 duration: .75,
 easing: Y.Easing.easeOut
 });

node : is the the happy face guy with the speech bubble
duration: is how long the animation goes on each iteraction
easing : how you want the animation to easy into the position

 var bounceCurve = function(end) {
 var points = [],
       X = node.getX();
       Y = node.getY();
       points.push([X, Y - 60]);
       points.push([X, Y]);
       return points;
 };

X, Y: is the point where the happy guy is
points : we create a point which is 60 pixels above where the happy guy is at, how high to bounce

 anim.set('to', {
              curve: bounceCurve(),
             });
 anim.set('iterations', 100);
 anim.run();

 //Y.one('document').on('click', anim.stop());
});

to : We want the animation to run so that the happy face will go to the point at 60 pixels above the guy and
interactions: we want this to run for 100 times

Click here to see the page in action


This is a series that documents my daughter’s curiosity to learn about computer programming

  1. Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7

Using CSS To Realize The Mock Up: Lesson #7

Magic Eight Ball Sign In
Magic Eight Ball Sign In Screen - Cate's Mock Up

Based on C.’s mock up, we built a real HTML page using CSS.

Step 1: Here is how we built the page

First I told her about the

tag which we can use to divide up different sections of the mock up.
So she did the following to divide up the screen into 4 sections.

Welcome!
speech bubble
happy face
ask question

Step 2: She picked the font Arial Rounded MT Bold using the Font Book application on the Mac

I told her the div tag needs a class name and she can choose whatever she wanted, so she chose asdf for simplicity of typing, I think she understands the concept that humans are in charge of ‘names’ and variable names.

WELCOME!

Then I talked to her about the <style> tag to change the font face for the class asdf

  • font-size : this is the number of ‘points’ or pixels of the height of the font she wanted to use, and we experimented with different numbers until she decided on 50
  • font-family : this is cut/pasted from Font Book
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";  text-align: center;}

For the speech bubble, we found a site http://wigflip.com/ds/ which will allow us to type in any word and generate an image of a speech bubble with the text

C. wanted to use the Yahoo! Messenger happy face as the magic eight ball. I showed her how to Show Package Content for the Yahoo! Messenger app on the Mac. the file is Applications/Yahoo! Messenger/Contents/Resources/cesario.icns

We opened the file using the Mac Preview app and saved it as a .gif file so that transparency is preserved.  C. remebers how to do width and height and chose to use 125.


Finally we talked about the text input field

To put the finishing touches, we played with more CSS to add a 60px whitespace

p {margin-top: 60px}

Here is the complete HTML code

<style type="text/css">
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";
 text-align: center;}

*.fd {align: center; }

p {margin-top: 60px}

</style>

WELCOME!
<!--- TODO: figure how to center in CSS */ --> <center> <p/>
</center>

This is a series that documents my daughter’s curiosity to learn about computer programming

Story Board, Mock Ups : Teaching Computer Programming To Kids Lesson #6

C. is anxious to get her magic eight ball game working on Firefox and was excited with a lot of ideas.  Little does she know that I’m a backend programmer and don’t know a whole lot about animation, Javascript and CSS.  But I could learn this stuff easily if she wants to as well.  So I told her like I tell the Yahoo! product managers, give me a mock up.

So she drew up a few  screens for me.

First, she wanted more answered added to the magic eight ball.

Then she thought it would be good if we kept a history of your previous questions, so you should tell us your name

Follow by the magic eight ball bouncing around in a room of springs!  Help YUI or Javascript gurus

I was very happy to see the mock ups and we started working on the first welcome screen after dinner of homemade avocado rolls.

Looking at the first screen, I asked her what font faces she wanted, so she opened up Font Book on the mac and she decided on the Arial Rounded MT Bold

Next lesson: using div tags, CSS to format the welcome screen!

This is a series that documents my daughter’s curiosity to learn about computer programming

Lists and Tables in HTML: Lesson #5

C. started to learn about creating lists of things and tables in HTML

<UL>

: to create an Unordered List of items

<LI>

: to start a List Item

<OL>

: to start to create an Ordered Lists and the computer will add the numbers automatically

Then if we want to create a table to remember things like the gifts that C. got for Christmas from all her relatives from since was born, then we can use a table.

<table>

: to start creating the table

<tr>

:to create a row

<td>

: to create a column

So the following would show what Dad and Mom gave for gifts in 2001 and 2002

<table>
<tr><td>person/year</td><td>2001</td><td>2002</td></tr>
<tr><td>Dad</td><td>blanket</td><td>socks</td></tr>
<tr><td>Mom</td><td>gloves</td><td>wrap</td></tr>
</table>

person/year 2001 2002
Dad blanket socks
Mom gloves wrap

This is a series that documents my daughter’s curiosity to learn about computer programming

Magic Eight Ball engine in JavaScript: Lesson #4

C. wants to make a computer program be to be like the Magic 8 ball, in my last post, I couldn’t remember how to generate a random number. But found it here

Math is a class (not an object ), it has 2 class member functions.

 random()

which will give me a random decimal between 0 and 1, like 0.11, 0.34. If we take this and multiply by 6, then we will get a number between 0 and 6, but less than 6

floor()

will round off the decimal number to an integer.

Math.floor( Math.random() * 6)

So here is the program, which will magically give you an answer to any question you have in the word

<body>


var question  = window.prompt("Ask a question! :)");
/* RFE: time thing change question after 5 secs, to ask the user to hurry up */

var magicAnswers = [
"Duh",
"Hazy, try again",
"No way",
"Awoooga",
"We'll see",
"Of course!",
"Yawn...",
"Yep."];
/* Math.random() the computer makes a random number between 0 and 1, 
  gives you answer to your question
 multiply by 5 would give you a number between 0 and 4
 Math.floor makes the number a round number
*/
var randAnswer = Math.floor(
 Math.random()
 *8)

window.alert("Q: " + question + "nn" + "A: "+ magicAnswers[randAnswer]); 



</body>
/* the engine of the Magic 8 ball game is simple and complete, some ideas 
for the UI
 1) have a wizard stand behind a crystal ball, ask a question, zoom in to
 the crystal ball and show the answer
 2) have a bouncing black eight ball, ask a question and the eight ball 
shakes a bit and shows the answer, it prompts you every 3-5 seconds.

 As another enhacement, we can keep a history of all the previous 
questions and answers. display the question a bubble next an avatar
 of the person asking follow by the answer 
almost like a comic strip
 This will allow us to see the previous history of all the funny 
question and answers
*/

This is a series that documents my daughter’s curiosity to learn about computer programming

Simple HTML and Javascript Operators: Lesson 3

As C. and I were walking to 16th and Mission street Bart station at 7:30am, I talked to her about the arithmetic operators in Javascript.

There is

  • for addition
  • for subtraction
  • (kinda funny) for multiplication
    / (forward slash) for division

We went through some examples

var x = 12
 x = x + 5
x = 12
 x = x - 1
x = 12
 x = x * 3
x = 12
 x = x / 3

Then I talked to her about variables multiplying itself, which is a square root and she seem to understand

var x = 3
x = x * x

When we got to BART, I brought the computer out and we typed in some simple HTML
into Emacs and I showed her using CTRL-X CTRL-S to save files

<body>
ninepins
<b>now</b>
</body>

I talked with her about balancing the tags with closing tags using ‘/’

<b> == bold

Then she tried
<i> and <u> by herself and I taught her to use Firefox and open the file and display it whenever she saved

I showed her <s> for strike-thru

We tried <font color=”#ff0000″> for red and 00ff00 for green and 0000ff for blue.  And she remembers the
Lesson #1 when we talked about the RGB values.

Then as we pull into 19th street BART station and need to transfer, we built a simple Javascript program to prompt and using
if … then … to display different answers


var STRIKE=”Are we there yet?”
var guru = window.confirm(STRIKE);
if (guru)
window.alert(“Yipee!!”)
else
window.alert(“Too bad :(/”)

C. thought this is pretty funny and asked me if we can build a magic eight ball program

I started to design it with her, but I had forgotten how to do random numbers in Javascript and told her
we’ll have to look it up when we have a reference book or online documentation.

It’s time to get off BART at the Ashby station as we have to pick up a Zipcar to drive to the school.
I can’t wait until the next lesson.  I can understand how C.’s brain thinks as she gets exposed to computer programming

var magicAnswers = [“Yippe”, “Oh boy”, “hazy”, “No way”, “Outlook looks good”, “We’ll see”];
var randAnswer = rand(0,6)
var answer = window.confirm(“Are we almost there?”);
window.alert(magicAnswer[randAnswer]);


This is a series that documents my daughter’s curiosity to learn about computer programming

Baic HTML and Javascript: Lesson 2

After dinner, C. asked if we can continue to learn about computer programming. I told her I would love nothing more.

I told her that I will teach her HTML, Hypertext Markup Language and Javascript. HTML is what designers use to control how a page looks like in Firefox. Javascipt let the programmer add interactivity.

I show her a bit of HTML source code and open and close tags. Some sample tags like <b> and <font> and the tag to start telling the computer that we are about to start writing javascript

So we reviewed the few simple reserved words like

var

To declare a variavble


while

A loop that stops when an expression is false. 0, false or null is false, anything else is true.


for(initiator, conditional; increment)

A loop with an initiator, conditional and increment


new

To create a new object. An object has state and methods or actions.


wondow.alert

To display a message to the programmer or user

We added tonight


int

To declare an integer which is a non-decimal. So 2, 8, 66 are integers while 9.6 is not.


if ... then...

Conditionals that will only do something if an expression is true

We then talked about ++ and += and went throaugh examples like


var x=2
x ++
window.alert(x)

I found a small tutorial on the window object.
we looked at and played with an example

window.alert()
Used to display a simple message

window.prompt()
Used to ask for input from the user

wndow.confirm()
Used to ask for a yes or no type of answer.

Then at night she wanted me to review what we learned. As she was falling asleep, I talked with her about the syntax of the Javascript keywords, talked about how we can build loops using for, and 5 minutes later she was asleep.

This is a series that documents my daughter’s curiosity to learn about computer programming

Binary Numbers: Lesson 1

Crepe at Home
Crepe at home

This morning C. and I were eating crepes with hazelnut chocolate and she asked me what this means? “10001001” I think she must have seen it somewhere on a piece of paper or an advertisement. I’ve always found it difficult to talk to her about what my job as a software engineer is, so I decided to use this a chance to get her more interested in computer science.

This is beginning of my attempt to start a series on educating kids on computer programming.

Computers are pretty simple machines, they do what humans tell them to do, no more. On the basic level, the computer has a brain, the CPU that is made of millions of transistors which has only 2 states, either on or off.

The 1 means it’s on, 0 means it’s off

Humans count using decimals 0123456789, computers count with binary. 0/1

Let’s start counting like a computer, turn on our binary brain. The numbers are all in binary.

0 is the number zero
1 is the number one
10 is the number two
11 is the number two plus the number one which is three
100is the number four
101 is the number five
110 is the number six
111 is the number seven
1000 is the number eight
10000 is the number sixteen
100000 is the number thirty two
1000000 is the number sixty four
10000000 is the number 128
100000000 is the number 256

Then I started just asking her some random numbers like what
101, 110,10001 and she seem to enjoy it, great.

We started walking to the ZipCar to drive to Berkeley for school and I was explaining to her about pixels on the computer monitor. The typical monitor is 800 pixels across and 640 and each pixel is represented by a byte for each color. A byte has 8 bits. We have 3 colors RBG. Red, Green and Blue.

To make a color dot on the screen the computer has to turn on bits. So for the red part of the pixel, if all the bits are turned on R = 1111111, the pixel would be red. If R and B are both all turned on, the dot would be purple. R=11111111, B=1111111.

C. then asked what is a computer language. I said a computer language is a very limited set of vocabulary that allows humans to talk to the computer and tell the computer what to do. Most computer languages have only about 40 words, much simpler than the French and Chinese that C. is learning.

C.: “Can I tell the compute to blow dry my hair?”
Tony: “Sure, let’s try it”

While C. was in the back of the car seat, I told her, if we were to do it in JavaScript, this would be how we will tell the computer

var purpleHairdryer = new HairDryer();
purpleHairdryer.blowDry(“C.”);
purpleHairdryer.stop(15);

var, new are the only vocabulary words we used.

Before I left her at school, she asked me to give her at least 5 vocabularies from JavaScript.

I gave her var, new, for, do {} while, alert

Then I said goodbye and we’ll do more programming on Sunday. That was a fun morning. I drove back to San Francisco to catch my Yahoo! bus.

Note to self, there are plenty of links out there about teaching kids to program

Scratch from MIT looks interesting

More links:
http://www.daddymodern.com/what-is-the-first-programming-language-you-would-teach-your-child/
http://en.wikipedia.org/wiki/Logo_%28programming_language%29


This is a series that documents my daughter’s curiosity to learn about computer programming

Update 12/14/2010 : This post has also been published on the Yahoo! Contributor Network