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.

Advertisement

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!

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