Next page | Contents page |

Exercise 6 - draw and drag

Given the following array of shapes, write functions that will enable you to drag the Sun behind the cloud when you run the program.


DATA.shapes = 
[
  {kind:"rect", x:0, y:0, w:DATA.g2.canvas.width, h:DATA.g2.canvas.height,
	fill:"lightblue", stroke:"lightblue"},
  {kind:"circ", xc:250, yc:530, r:50, fill:"yellow", stroke:"red"
	isTarget:true, draggable:true},
  {kind:"rect", x:50, y:200, w:100, h:500, fill:"lightgrey", stroke:"lightgrey"},
  {kind:"circ", xc:500, yc:100, r:50, fill:"white", stroke:"white"},
  {kind:"circ", xc:550, yc:150, r:50, fill:"white", stroke:"white"},
  {kind:"circ", xc:525, yc:75, r:50, fill:"white", stroke:"white"},
  {kind:"path", path:[{x:0, y:400}, {x:100, y:470}, {x:300, y:500},
	{x:500, y:350}, {x:600, y:380}, {x:800, y:330},
	{x:DATA.g2.canvas.width, y:300},
	{x:DATA.g2.canvas.width, y:DATA.g2.canvas.height},
	{x:0, y:DATA.g2.canvas.height}], fill:"green", stroke:"green"}  
];

This is quite satisfying when it works!

Next page | Contents page |