CoderDojo Nolensville

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.