CoderDojo Nolensville: 2014

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/