Learning Three.js for those who love graphics & games

Certain teens are not incline what computer programming could do with graphics. If one of the teens you are trying to teach CS is getting bored with codecademy.com or hackerrank.com problems, have them give it a try with Three.js

First, inspire them with example https://threejs.org/examples/#webgl_animation_keyframes

Then have them do one of the tutorial to create a scene.

Teach Berkeley CS61A To A Middle Schooler : Day 1

My first subject in computer science in college was CS61A from UC Berkeley. The course has evolved over many years.  My favorite CS teacher Paul Hilfinger is now teaching the course in Python.

My goal is to teach my daughter this first year college course to my daughter at 13 years old.   Every journey starts with 1 step.

My lesson plan starts with

  1. Talk to her about the big picture of what a computer is
    1. CPU
    2. Memory
    3. Input/Output
  2. Talk to her about what a computer program is
  3. Do some interactive programming with Python

We installed Sublime 3 Beta editor, fired up Terminal

This is what ended up with my initial lesson plan

  1. Instead of talking about abstract computer, we fired up Activity Monitor on the Mac and look at the Chrome and Chrome helper threads. I told her each tab on Chrome was a thread.  She fired up 10 threads, went to 10 different web searches, saw the growth of processes on Chrome, close them down and saw the threads grow and shrink.  We talked a bit about the memory usage, didn’t get too much into it yet.  Hands on experimentation is definitely much easier to understand the abstract concepts of CPU and memory
  2. Then we started talking about Python and started typing in a simple print statement and then got into defining a function.  She immediately asked me what it really did.  I told her it was a simple way to save from typing something over and over again
    1. She started typing up ‘print “How are you”‘ and then def okay(), def not good(), def awesome(), I let her continue finishing up.  Asked her to type python day1.py.  And we did an interactive troubleshooting of the space for ‘not good()’
    2. We then talked about using input() to get the keyboard input, and because I’m also a Python newbie, I didn’t realize input() in Python 2.x actually evaluated the input.  We decided to go to sleep, but then I looked up raw_input() and when she is already in bed, I told her that raw_input would be what we would use
  3. I certainly learned more about teaching and how kids (at least C.) think and learn. Structure teaching plans are great, but definitely leave room for questions and answers and incremental progression and encourage kids to explore forks of the lesson plan.
  4. What she learned today: using ‘ls’, ‘cd’ in unix.  Using ‘python’ to execute.  using ‘def’.  using ‘if’, ‘elif’

I’m so looking forward to

  1. using chmod() to make the program executable
  2. let her drive the conversation and we learn as we build something she is interested in?
  3. continue with Chapter 1

Regular Expression: Lesson #2

C. is continue to be interested in regular expression. The most fun one seems to be the way to find palindromes

find palindromes with 5 letters


words=/usr/share/dict/words
cat $words | grep '(.)(.)(.)\2\1'

Find any word starting with C, replace with K


cat tck | sed 's/^C/K/'

Find any word ending in Y, replace with I


cat tck | sed 's/Y$/I/

find words with either 1-3 or 5-7


cat no.file | grep '[1-3]|5-7]'

find words with any letter between m and p


cat /usr/share/dict/words | grep '[m-p]'

bash and unix commands: lesson #2

1) counting words


cat /usr/share/dict/words | wc -l

2) counting characters


cat /usr/share/dict/words | wc -c

 
3) replacing the ‘enter’ or ‘newline’ with comma


cat /usr/share/dict/words | tail -7 | tr '\n' ','
zymotoxic,zymurgy,Zyrenian,Zyrian,Zyryan,zythem,Zythia,

4) replacing more than a single character


cat /usr/share/dict/words | tail -7 | sed 's/Zy/Baaa/'
zymotoxic,zymurgy,Zyrenian,Zyrian,Zyryan,zythem,Zythia,

Fun infinite loops: random number guessing: bash #3

An actual game using Terminal on the Mac is something with guessing numbers

Open the Terminal.App from your Mac by holding down command space and typing Terminal


RANDOM=$$
while true
do

echo "can you guess a number between 1 and 10 : "
read
echo The number is :
echo `expr $RANDOM % 9 + 1`
echo

done

can you guess a number between 1 and 10 :
3
The number is :
5

can you guess a number between 1 and 10 :
4
The number is :
5

can you guess a number between 1 and 10 :
9
The number is :
4

can you guess a number between 1 and 10 :
The number is :
3

Control-C to tell the computer to stop, remember the computer is not very smart like humans

See all posts about Fun infinite loops

Fun infinite loops : bash #2

A second fun loop with Terminal on the Mac is something with time

Open the Terminal.App from your Mac by holding down command space and typing Terminal

while true
do
date
date +%T
sleep 1
done

Thu Nov 7 07:38:50 PST 2013
07:38:50
Thu Nov 7 07:38:51 PST 2013
07:38:51
Thu Nov 7 07:38:52 PST 2013
07:38:52
Thu Nov 7 07:38:53 PST 2013
07:38:53

Control-C to tell the computer to stop, remember the computer is not very smart like humans

See all posts about Fun infinite loops

Fun infinite loops: bash #1

C. somehow got interested again in programming and she opened the Terminal App from her Mac and typed


echo why doesn't this work
quote>
quote>
quote>
quote>

I told her the single quote character is a special character that the not so smart computer need the human to escape it

Control-C would tell the computer to abort whatever it is doing

echo "why doesn't this work

Then she asked how do we do that infinite loop

while true
do
echo hey you c8
sleep 1
done
hey you c8
hey you c8
hey you c8
hey you c8
hey you c8
hey you c8
hey you c8
hey you c8
hey you c8

Fun!

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