CoderDojo Nolensville

Coder Dojo 7/9-Topic will be Morse Code and other forms of non-verbal communication

During the last 3 weeks we have worked with sound files. We have created music sound track using Soundation. We worked with sound files from birds. We learned how save sound files and embed theme into web pages. This week we are going to work with interpreting and creating morse code. We will embed javascript into an html page that will interpret and play the morse code we have created.
We will use this page to create the actual MP3 files.

Morse Resource

See example: Online Morse Code Generator.

Morse code began being used in 1830. It is still in use today. History of Morse code

Eventually the plan is to go back to soundation and incorporate the bird sounds and morse code into a music mix-up. The side effect is the kids learn little about history and that programming is another form of language. At Coder Dojo we strive to use conventional tools in unconventional ways.

Please remind the kids to bring headphones since they will be working with sound files.

Thursday, July 3, 2014

7/2/2014 Coder Dojo Meetup

Build a Very Basic HTML Page

We had more than a full house tonight, about 15 kids not including parents. The topic was building an html page based on a particular topic. The attendees were to select a bird song from the following page http://www.mbr-pwrc.usgs.gov/id/songwav.html and build a basic web page around their bird of choice. Requirements:

Create a folder for their source files
Find pictures and information regarding their chosen bird.
Save the following files the folder (bird song sound file, picture of their chosen bird species)
Create a text file and create a basic html page that displayed a heading for the page, some descriptive text, the image of the bird, and a link to the bird's song file.

I gave the kids the requirements then let them figure out how to reach the end result. The goal was to get the kids and parents to work together to find the solutions. It was a little frustrating for the kids until the finally started helping each other. The result was great.

Wednesday, June 25, 2014

Copy and paste this code into a text editor

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', { 'packages': ['map'] });
google.setOnLoadCallback(drawMap);

function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[36.1667, -86.7833, 'Nashville'],
[35.9292, -86.8575, 'Franklin']

]);

var options = { showTip: true };

var map = new google.visualization.Map(document.getElementById('chart_div'));

map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

Tuesday, June 17, 2014

Coder Dojo Agenda 6/18/2014

There will be two demos by one of the students. The topic will be using a Wacom tablet. http://www.wacom.com/en/us/creative

The second demo will be regarding how to collaborate using Skype.

Once finished with demos. Students will embed the music files they made in www.soundation.com into an html page.

Meeting will be held at 6:30 to 8:30 pm at the Nolensville library.
For more information email me at neecetinsley@icloud.com.

Wednesday, March 19, 2014

Psychedelic Flames

Copy and paste the code into a text editor then modify

http://thecodeplayer.com/walkthrough/html5-canvas-experiment-a-cool-flame-fire-effect-using-particles

<html>
<head>
<style>
/*Some styles*/
* {margin: 0; padding: 0;}
#canvas {display: block;}
</style>
<head></head>
<body>

<canvas id="canvas"></canvas>
<script>
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //Make the canvas occupy the full page
    var W = window.innerWidth, H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;

    var particles = [];
    var mouse = {};

    //Lets create some particles now
    var particle_count = 100;
    for(var i = 0; i < particle_count; i++)
    {
        particles.push(new particle());
    }

    //finally some mouse tracking
    canvas.addEventListener('mousemove', track_mouse, false);

    function track_mouse(e)
    {
        //since the canvas = full page the position of the mouse
        //relative to the document will suffice
        mouse.x = e.pageX;
        mouse.y = e.pageY;
    }

    function particle()
    {
        //speed, life, location, life, colors
        //speed.x range = -2.5 to 2.5
        //speed.y range = -15 to -5 to make it move upwards
        //lets change the Y speed to make it look like a flame
        this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
        //location = mouse coordinates
        //Now the flame follows the mouse coordinates
        if(mouse.x && mouse.y)
        {
            this.location = {x: mouse.x, y: mouse.y};
        }
        else
        {
            this.location = {x: W/2, y: H/2};
        }
        //radius range = 10-30
        this.radius = 10+Math.random()*20;
        //life range = 20-30
        this.life = 20+Math.random()*10;
        this.remaining_life = this.life;
        //colors
        this.r = Math.round(Math.random()*255);
        this.g = Math.round(Math.random()*255);
        this.b = Math.round(Math.random()*255);
    }

    function draw()
    {
        //Painting the canvas black
        //Time for lighting magic
        //particles are painted with "lighter"
        //In the next frame the background is painted normally without blending to the
        //previous frame
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, W, H);
        ctx.globalCompositeOperation = "lighter";

        for(var i = 0; i < particles.length; i++)
        {
            var p = particles[i];
            ctx.beginPath();
            //changing opacity according to the life.
            //opacity goes to 0 at the end of life of a particle
            p.opacity = Math.round(p.remaining_life/p.life*100)/100
            //a gradient instead of white fill
            var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
            gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
            gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
            gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
            ctx.fillStyle = gradient;
            ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
            ctx.fill();

            //lets move the particles
            p.remaining_life--;
            p.radius--;
            p.location.x += p.speed.x;
            p.location.y += p.speed.y;

            //regenerate particles
            if(p.remaining_life < 0 || p.radius < 0)
            {
                //a brand new particle replacing the dead one
                particles[i] = new particle();
            }
        }
    }

    setInterval(draw, 33);
}

</script>
</body>
</html>

Matrix Sample

Copy and paste this code into a text editor

http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

<html>
<head>

<style>

/*basic reset*/
* {margin: 0; padding: 0;}
/*adding a black bg to the body to make things clearer*/
body {background: blue;}
canvas {display: block;}

</style>

</head>
<body>
<canvas id="c"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
//converting the string into an array of single characters
chinese = chinese.split("");

var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1;

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);

        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;

        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);
</script>
</body>
</html>

Sunday, February 23, 2014

Tech Ed, Is it the latest Fad or Cure All for Education

My two cents:

I love technology and have been a web programmer as well as former art teacher. I regularly become frustrated with the idea that bringing technology into the classroom is the answer to all education problems. New gadgets and websites don't really improve learning. The money spent on technology would be better spent in other areas. Here are the reasons:

All technology has a very short shelf life. I work in technology, every three years I am working with completely new technology.
I work in technology but when there is a difficult problem to solve, we draw on whiteboards and discuss.
All web sites and application used today in our schools have databases in the back end to store user data. That is the nature of any web site. Do we know who is storing and has access to our kids' data? Can this data be misused?
Being an end user of the latest technology does not increase your learning one way or the other. Reading books, doing experiments, drawing out a problem, being detailed oriented, listening to instruction, redoing unsatisfactory work, spending the hours it takes to get something done right is what it takes to succeed.
The idea that the latest gadget is needed for your child, not true. Great opportunities come from activities outside of technology (drawing, painting, fishing, sports, cooking, chores, helping others…)

I am frustrated that people are believing that technology is the "weird trick" to make our schools better. Sometimes the old ways are best. The link to the following article describes the way that technology will save education. My two cents, they are wrong. http://www.teachthought.com/technology/exactly-what-the-common-core-standards-say-about-technology/

Thursday, November 7, 2013

Coder Dojo Update 11/6/2013

The boys welcomed a new student and we continued to work on our python programming. We are learning the programming basics right now. The kids want to program games but they cannot do this without learning the foundations of writing code.

Some will likely become frustrated with the difficulty of learning programming but like most other skills, programming cannot be learned without focused practice over time. I am going to be encouraging them to help each other when they get stuck. Sometimes they rush through the practice then play videos but this is distracting to those still working on their code. Please remind them to not play games or watch videos unless all of the other students are finished with their projects.

If you are interested in helping with coder dojo that would be great. You don't need prior programming experience, you can learn as the kids learn. There are times the kids need one on one help but I am often unable to do that for more than a few minutes.

By the way our local coder dojo is now listed on the official coder dojo listing. http://zen.coderdojo.com/dojo

The books we are using are available online, free in pdf form. We eventually will use the pygame book but the kids need to learn some basic programming first. The Pygame book assumes they know the basics. http://inventwithpython.com/index.html and http://learnpythonthehardway.org/book/

We are also going to participate in this during December: http://csedweek.code.org/sites/csedweek/files/Handoutforlocalorganizations.pdf

For more information contact:

Denise Tinsley at neecetinsley@icloud.com

Monday, June 17, 2013

Coder Dojo Update 6/12/2013

The coders worked on adding key press events to their scratch projects. Students learned how to make their characters (sprites) move in various directions.

They learned to move their sprites left and right as well as up and down. They learned that moving their sprite is based on x and y coordinates. Next week students will receive their coder dojo teeshirts.

Saturday, June 1, 2013

Coder Dojo 5/29/2013 Update

Tonight the young programmers took turns giving presentations. The first presentation was on how to install and use an anti-griefing plugin to your minecraft server to roll back damage done to your creations by other players. One other presentation given by a 7 year old member was regarding how to create and upload a custom made minecraft skin (look and feel for your minecraft character). Lastly students were shown how to input questions and output answers to and from characters in scratch. Next week the students will go through a lesson with more indepth animation.

Saturday, May 25, 2013

May 22 2013 Coder Dojo Update

The young coders watched a video about programming: What most schools don't teach

One on the coders showed the others how to make an arena in their minecraft worlds. Most of the current participants love Minecraft.

They then did their first Scratch lesson. The lesson provides step by step instructions. Scratch Getting Started

Thursday, May 16, 2013

Coder Dojo Nolensville Kick Off was a Great Success

Six kids turned out for our first Coder Dojo. Mr. Chris Byrne one of the Coder Dojo mentors from Coder Dojo Dingle based out of Dingle Ireland helped the kids create their first html page. The students learned how scientists at CERN needed a better way to communicate and thus created html in 1989.

Mr Byrne helps students edit their html using Quick Dojo

During the next session students will create web pages with tables and populate the tables with facts and images related a topic of their choice. Plans are in the works to introduce the students to Scratch programming which is a free platform created by MIT with the goal of teaching young people the basics of programming.

Thursday, May 9, 2013

A new projector (used from Craigs List)

Will be using this at the coder dojo and at work. Makes code reviews and pair coding easier.

Saturday, May 4, 2013

CoderDojo Nolensville Kick Off Night

Coder Dojo Nolensville will officially start 5/15/2013 at 6:30 pm. We have two speakers scheduled. One of the speaker is a mentor go Coder Dojo Dingle from Ireland. He will describe the idea surrounding the Coder Dojo movement. The second presenter will be a local 4th grade student that will describe how to create and manage a minecraft server. Points covered will be server trouble shooting, moderation and of course how to make your server awesome/majestic. Attendees will then help each other install texture packs.

Sunday, March 24, 2013

Our local group is forming, have kids need a location.

We are still looking for a location in the Nolensville area. We have several kids interested. We already have a group of kids running a minecraft server and interested in creating mods. We plan on teaching kids the basics of programming that will apply to any current language(datatypes,variables, classes, methods,flow of control,operators,html, css). The first sessions will be very introductory, as the group members progress and more mentors are added we plan to branch out. Should anyone be interested in being a mentor (teacher) or onplease contact us at coderdojonolensville@icloud.com. This group is part of CoderDojo.com. It is a global collaboration providing free and open learning to young people, especially in programming technology.