here's the faceclock TM on it's own page for easy stealing.

What we need for group project. * It's not enough to just have a picture of something interesting. WHY is it interesting? What makes it this way? What do you see or find compelling that others do not? And finally, who did you talk to and what was the result of the investigation? Think about the fact that people will actually be in the spot when they are looking at your page. How can we design around that user experience that's different than a regular website?
Also... Please put your javascript clocks on your website and provide a link on your homepage.

How to put a Processing sketch on the inter-webs.
The old-old way. In the days of yore (2009-ish), you could export your sketch as a "Java applet". This applet could then be embedded into a webpage and the browser would use Java to put it on screen. This was already on the way out when the Java exploits started to get really popular, and suddenly nobody was making applets any more. Then Processing created a mode called "javascript mode". You would switch from regular processing to Javascript mode and Processing would convert your sketch into something that could run in a browser. Not well, but it would run. You can still use this mode in processing 2. With Processing 3, there is a new method called P5.js. This program uses Processing keywords and syntax, but you don't actually write the code IN Processing, you write it in a Sublime (or eventually in its own stand alone application which is in beta).
The big down side of using p5js is your libraries are very limited compared to what you have in Processing. The upside is of course your sketch can live on a website. The good news is that p5js has a lot of people working on it, so features you may want are not here now may soon be in the future.

The creators of p5.js have the new programmer in mind, and they are making a conscious effort to have the code be as straight forward and easy to understand as possible. They have even created a handy page for those who already understand some processing and want to apply it to p5.js.

Check the transition page to see the major differences between p5js and Processing. The major points are size() is now createCanvas(), and you declare variables the javascript way with "var".

Check out the other tutorials, examples and the reference page to get a feel for the program.

Controlling where the sketch goes on the page
Graphic elements in HTML5 go into something called the "Canvas" and P5.js takes advantage of this. In the example index provided by p5.js the canvas is drawn by default, but it is possible to designate that the sketch load into a particular div that you control.
This section is the p5.js sketch. Notice that instead of "create Canvas", we set the canvas to a variable, then we give the variable a "parent", which is the div we want it to reside in.

function setup() {
	var cnv = createCanvas(200, 200);
function draw() {
  fill(0, 255, 0);
  rect(20, 20, 100, 100);
This section is the html
	<script language="javascript" src="../p5.js"></script>
	<script language="javascript" src="sketch.js"></script>
	<style type="text/css">
         box-shadow: 10px 5px 5px black;
         width: 200px;
         height: 200px;

	Text above the sketch 
	<div id="myContainer"></div>
	text below the sketch