1. Animation

Stick this code into Thimble:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.style.width ='100%';
canvas.width = canvas.offsetWidth;
canvas.height = 300;
setInterval(drawStuff,10);
var x = 0;
var y = 30;
var rectWidth = 17;
var rectHeight = 100;
var stepX = 3;
function drawStuff(){
x = x + stepX;
context.clearRect(0,0,canvas.width, canvas.height);
context.fillStyle = "#ff0000";
context.fillRect(x,y,rectWidth,rectHeight); 
if(x + rectWidth > canvas.width || x < 0) {
stepX = stepX * -1;
}
}
</script>
</body>
</html>

Which looks like this in a web page.

  1. Change the block that is moving so that it is a square.
  2. Make the block move more pixels for every frame of the animation.
  3. Make the block bounce up and down rather than left and right.
  4. Move the block both in the vertical and horizontal directions (diagonally) and so that bounces work in both vertical and horizontal directions.
  5. Change the block into a circle. See Drawing tutorial.
  6. Make it so the circle starts/stops moving when you click on it. See Drawing tutorial.
  7. Make it so that the circle moves in the line that connects where the mouse was clicked and the center of the circle.