Tags
Agreeing on the product
Cate is the Product Manager and I’m the engineer.
Here it the minimal viable product
Name: social-drawing
- A simple canvas to draw
- A color palette on top with 7 colors
- neon colors palette
- to be able to change color
- be able to move the mouse
- click and move to draw
- need a eraser or white color
- Fill – maybe
- Brush size – maybe
- be able to save
- Bonus
- a friend can join and draw on a shared canvas
- reference:
- http://dev.opera.com/articles/view/html5-canvas-painting/
Getting Started
Using CSS, HTML5, Javascript is the best programming language because they are ubiquitous, easy, lots of tools and sample and best of all it’s interactive
Tools for editing: I chose to use Emacs to edit the files, and Cate was ok to learn it. You can use Aqua Emacs, Text Edit, Notepad++ (Windows)
Use the browser for viewing, so Firefox, Safari or Chrome would work
I chose to use git and http://code.google.com/ to host the site and the code
Getting to a working version ASAP so the kids don’t loose attention
First version: http://code.google.com/p/teaching-kids-programming/source/browse/social-drawing/drawing.html?spec=svn99358fbb1e304cf67aedf977029fe80acfc6128d&r=99358fbb1e304cf67aedf977029fe80acfc6128d
We typed this up while riding BART and the indentation is not pretty, but we got a working version up with a few kinks
<html>
<title>
Social Drawing
</title>
<canvas id="canvas" width=500 height=350>
</canvas>
<script>
var ctx;
function init()
{
var mouseX;
var mouseY;
var canvas = document.getElementById("canvas");
if (canvas && canvas.getContext)
{
ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", onMouseMove, false);
var radial = ctx.createRadialGradient(370, 60, 0, 370, 60, 70);
ctx.strokeStyle = 'lime';
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(10,10)
ctx.lineTo(500,10);
ctx.lineTo(500, 350);
ctx.lineTo(10,350);
ctx.lineTo(10,10);
ctx.stroke();
ctx.closePath();
}
}
onload = init;
function onMouseMove(e)
{
mouseX = e.clientX-canvas.offsetLeft;
mouseY = e.clientY-canvas.offsetTop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
</script>
</html>
Next Step: Fixing the funky mouse action
");
/* RFE: time thing change question after 5 secs, to ask the user to hurry up */
var magicAnswers = [
"Duh",
"Hazy, try again",
"No way",
"Awoooga",
"We'll see",
"Of course!",
"Yawn...",
"Yep."];
/* Math.random() the computer makes a random number between 0 and 1,
gives you answer to your question
multiply by 5 would give you a number between 0 and 4
Math.floor makes the number a round number
*/
var randAnswer = Math.floor(
Math.random()
*8)
window.alert("Q: " + question + "nn" + "A: "+ magicAnswers[randAnswer]);
</script>
</body>
/* the engine of the Magic 8 ball game is simple and complete, some ideas
for the UI
1) have a wizard stand behind a crystal ball, ask a question, zoom in to
the crystal ball and show the answer
2) have a bouncing black eight ball, ask a question and the eight ball
shakes a bit and shows the answer, it prompts you every 3-5 seconds.
As another enhacement, we can keep a history of all the previous
questions and answers. display the question a bubble next an avatar
of the person asking follow by the answer
almost like a comic strip
This will allow us to see the previous history of all the funny
question and answers
*/
/”)
