Sunday, December 29, 2013

Season's Greetings 2.0

Over vacation, my nephew- a junior in high school at Charter School of Wilmington (Delaware)- improved the card with some new coding... Now the lights only decorate the tree, not the sky and the hills. He also added falling snow. Take a look-

CLICK CARD FOR MESSAGE...
PUT LIGHTS ON THE TREE!

Snowing Card(Click to see updated code.)


Made using: Khan Academy Computer Science.

Next step.. multiple colored lights, rather than just pink? Someone give it a try?

Happy New Year!

Patrick


Monday, December 23, 2013

Seasons Greetings!

As you may have heard, December 9-16 was Computer Science Week. BH-BL participated in the "Hour of Code" activity as our High School AP Computer Science students helped teacher Pauline White to introduce nearly 100 middle school students some of the basic elements of computer coding. I was intrigued and I decided to learn a bit of coding myself. I took the Intro to Computer Science lesson on Khan Academy and this was the result! I used JavaScript to create the picture and the message (when you click the picture).  I am trying to get it to allow the user to decorate the tree with lights but I cannot yet figure out how to restrict the "mouseMoved" function to the tree alone! As a result you get pink lights everywhere!  Hey- It's a start! Feel free to try to work on the code and help me out. I will keep at it!

Click here to see the code and work on improving it: Season's Greetings BHBL

Made using: Khan Academy Computer Science.
CLICK PICTURE

My learning curve with coding makes the following video even more impressive.  Watch it when you have a few minutes. It's a great connection between computer coding and the season we are celebrating. I hope each of you has a peaceful and relaxing time with your families. Merry Christmas, Happy Holidays, Happy New Year!!

Patrick





Here is the code I wrote to make the card:

// sky
background(0, 0, 0);
fill(255, 255,255);
noStroke();
triangle(300,50,350,50,325,115);
triangle(325,25,300,75,350,75);

//stars
ellipse(100,50,3,3);
ellipse(254,130,5,5);
ellipse(90,169,5,5);
ellipse(53,70,3,3);
ellipse(246,43,3,3);
ellipse(53,221,2,2);
ellipse(199,40,1,1);
ellipse(300,150,4,4);
ellipse(280,100,1,1);
ellipse(70,128,2,2);
ellipse(154,109,3,3);
ellipse(380,200,5,5);
ellipse(340,150,2,2);
ellipse(23,117,3,3);
ellipse(132,153,1,1);
ellipse(100,207,3,3);
ellipse(42,170,2,2);
ellipse(86,17,1,1);
ellipse(302,184,1,1);

//snow
fill(255,255, 255);
rect(0,320,400,80);
ellipse (89,323, 322,112);
ellipse (357,306, 256,120);

//move mouse to make lights

var mouseMoved = function() {fill(245, 14, 195);
    ellipse(mouseX, mouseY, 3, 3);
};

// tree
fill(8, 69, 20);
triangle(200, 100, 300, 300, 100, 300);
fill(66, 8, 16);
ellipse(200,200,5,5);
ellipse(220,223,5,5);
ellipse(171,263,5,5);
ellipse(191,136,5,5);
ellipse(225,250,5,5);
ellipse(266,266,5,5);
ellipse(148,250,5,5);
ellipse(180,169,5,5);
ellipse(211,148,5,5);
ellipse(172,215,5,5);
ellipse(196,240,5,5);
ellipse(190,290,5,5);
ellipse(239,280,5,5);
ellipse(228,191,5,5);
ellipse(139,290,5,5);
fill(51, 51, 4);
rect(190,299,20,20);

//click to reveal message
var mouseClicked = function() {
fill(117, 11, 27);
var f = createFont("cursive", 33);
textFont(f, 46);
text("Season's Greetings", 27, 353);
textFont(f, 20);
text("to the BH-BL Family...All the Best in 2014!", 17, 387);};