Exercise A

In your public_html/cgi-bin directory, create a new directory called lab5 (no spaces, all in lowercase!!!!!!). Place your work for this lab sheet into this new directory.

• In your lab5 directory, create a Web page in a file called exA.html. The Web page should contain a canvas that is 500 pixels wide by 500 pixels high.
• Also in your lab5 directory, create a stylesheet for the Web page in a file called exA.css. The stylesheet should not change the background colour of the Web page (i.e. leave it white). It should simply draw a black border around the canvas.
• Then in your lab5 directory, create a JavaScript program in a file called exA.js. Among the program's variables are the following:

  let threshold = 50;
  let points = [];

  Every 33 milliseconds, your program will do the following:

  Create a new object (let's call it q), with a random x and y; (Do not draw it.)
  for each point (p) in the array called points {
      if (the distance between q and p is less than threshold) {
          draw a line between q and p;
      }
  }
  push q onto the array called points;

Notes:

• To compute the distance between two nodes, you will need Pythagoras's theorem. (Ask us for help if you can't cope with the maths.)
• You will need to look up the JavaScript for drawing lines — we did not cover it in lectures. (The functions/variables that you will use are: strokeStyle, beginPath, moveTo, lineTo and stroke.)
• Optional: The whole things will look much prettier if you vary the line width to make it inversely proportional to the distance.

In case the above is not clear, I will show you a demo of my version at the start of the labs.

Exercise B

Write something that uses JavaScript to draw on the canvas. You decide what you wish to tackle. (If you can't decide, then do the spacecraft.)

Here are a few ideas, but feel free to try something of your own:

• Spacecraft takeoff: Draw a square at the bottom of the canvas and animate its takeoff. Improvements:
  • How about 'easing in', whereby things start slowly and then get faster and faster?
  • How about loading an image and drawing the image instead of a square?
  • How about drawing the spacecraft's 'trail'?
• Minimum Spanning Trees: Draw random dots on the canvas. Draw thin, grey lines between every pair of dots. Then implement Prim's Algorithm to find a Minimum Spanning Tree. As the algorithm finds each edge in the tree, draw the corresponding line in red.
• Random Mondrian: Mondrian was an artist. Use Google to look for images of his artworks. Write a program that produces pieces of 'art' that consist of randomly-selected vertical and horizontal black lines and rectangles of red, yellow and blue on a white background.
• Bouncing balls: Bouncing balls, done properly, are much much more challenging than bouncing squares. You need trigonometry to work out whether there have been collisions between balls, and to work out angles of incidence and reflection when there are collisions with the walls.
• Spirals: Drawing square spirals is straightforward. Drawing circular spirals requires trigonometry.
• Conway's Game of Life: The simplest implementations use two-dimensional arrays, which we can explain to you.

Store your work in your lab5 directory in three files: exB.html, exB.css and exB.js.

When tackling Exercise B, please do not just copy JavaScript that you find on the Web. The idea is to learn how to program, not how to copy-and-paste. It would be better to try to achieve something and fail, than to hand-up someone else's efforts.

Submission

There is no formal submission of this week's exercises. However, for my records, I will run a program that checks to see whether you have done the work or not.