Untitled


<!--
This page draws random art using different shapes.
The art is drawn using HTML Canvas2D.
An HTML form is used to tell the canvas what shapes to draw.
-->

<html>

<head>
	<title>Lab 8 Random Art Generator</title>
</head>

<body bgcolor="white">

	<h1 align="center">Random Art Generator</h1>
	<hr>

	<script type="text/javascript">
	    var numPics = 0;
		var shapeToDraw = 4;			// Global variable accessible to all methods.  Stores the type of shape drawn.

		function draw() {	// Tell the canvas to draw a new picture and puts a comment in the text area under the picture.
		    numPics++;

			var message = "Picture: " + numPics + "\n";

			switch(shapeToDraw)
			{
			    case 1: message += "Lazy Lines"; break;
			    case 2: message += "Crazy Circles"; break;
			    case 3: message += "Random Rectangles"; break;
			    case 4: message += "Random Surprise"; break;
			}

			// This line adds whatever is in the hidden text box to the message.
			// Note the "\n" to put a line break in the message.
			message = message + "\nBy: " + myForm.hiddenSignature.value + "\n";

			message += myForm.comment.value;


			// This line changes the comment under the picture to the message you generated.
			commentForm.commentText.value = message;

			// These two lines tell the canvas to draw the picture.  DO NOT CHANGE!
			changeHiddenText();
			randomArtCanvas.repaint();	// Call to canvas
		}

		function changeTimer() {	// Turns the timer on and off and sets the timer delay.
			var timeDelay;

			if (myForm.timer.checked == 1 && myForm.timer.value != "") {
				try { timeDelay = parseInt(myForm.delay.value); }
				catch (ex) { timeDelay = -1 }
			} else {
				timeDelay = -1;
			}

			// This line sets the delay in the applet.  DO NOT CHANGE!
			randomArtCanvas.setTimerDelay(timeDelay);	// Call to canvas
		}


		function changeHiddenText() {	// Sets the hidden message on the picture using the hidden text box.
			var message = myForm.hiddenSignature.value;


			// This line sets the message in the applet.  DO NOT CHANGE!
			randomArtCanvas.setText(message);		// Call to canvas
		}

		// DO NOT CHANGE THIS METHOD
		function changeColor(bgcolor) {	// Changes the background color
			randomArtCanvas.setBackgroundColor(bgcolor); // Call to canvas
		}

		// DO NOT CHANGE THIS METHOD
		function changeShape(shape) {	// Changes the shape drawn
			shapeToDraw = shape;	// This line sets the global variable that remembers what shape we are drawing.
			randomArtCanvas.setShapeType(shape); 	// Call to canvas
		}
	</script>

	<table align="center">
		<tr>
			<th>Picture Features</th>
			<th>Your Masterpiece!</th>
		</tr>

		<tr>
			<td valign="top" width="350">

				<form action="javascript:void(0);" name="myForm">

					<b>Shape type:</b><br />
					<input type="radio" name="shapeType" value="1" checked onclick="changeShape(1)">Lines
					<input type="radio" name="shapeType" value="2" checked onclick="changeShape(2)">Circles
					<input type="radio" name="shapeType" value="3" checked onclick="changeShape(3)">Rectangles
					<input type="radio" name="shapeType" value="4" checked onclick="changeShape(4)">Random
					<br />
					<br />

					<input type="checkbox" name="timer" onclick="changeTimer()">Use timer


					<i>Delay</i><input name="delay">


					<br />
					<br />

					Background Color:
					<select name="bgcolor" onchange="changeColor(myForm.bgcolor.value)">
						<option value="#000000">Black</option>
						<option value="White">White</option>
						<option value="Grey">Grey</option>
						<option value="Yellow">Yellow</option>
					</select>
					<br /><br />

					Hidden signature: <input type="password" name="hiddenSignature" length="10"> <br />

					<br />

					Artist Comment:<br />
					<textarea rows="5" cols="30" name="comment"></textarea>

					<br /><br />

					<button onclick="draw()">Draw!</button>
					<button type="reset">Reset</button>

				</form>
			</td>

			<!-- The rest of this code you can ignore.  It finishes the table and loads the canvas. -->
			<td width="550">
				<table>
					<tr>
						<td>
							<!-- This is a Canvas element that can be drawn to. You do not need to edit this. -->
							<canvas id="randomArtCanvas" height="400" width="500"></canvas>
						</td>
					</tr>
					<tr>
						<td>
							<form name="commentForm">
								<textarea rows="5" cols="60" name="commentText"></textarea>
							</form>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<!-- This is the script that handles drawing to the canvas. You do not need to edit anything here! -->
	<!-- This is the script that handles drawing to the canvas. You do not need to edit anything here! -->
	<script>
		var randomArtCanvas;
		window.onload = function () {
			randomArtCanvas = new RandomArtCanvas();
		}

		function RandomArtCanvas() {
			this.text = "";
			this.backgroundColor = "#000000";
			this.shapeType = 4; //4 for random shape
			this.delay = -1;
			this.canvas = document.getElementById("randomArtCanvas");
			this.ctx = this.canvas.getContext("2d");
			this.width = this.canvas.width;
			this.height = this.canvas.height;
			this.drawIterations = 25;

			this.repaint = function () {
				//Draw Background
				this.ctx.fillStyle = this.backgroundColor;
				this.ctx.fillRect(0, 0, this.width, this.height);

				//Check if random is set
				var shape;
				if (this.shapeType == 4) {
					shape = 1 + Math.floor(Math.random() * 3);
				} else {
					shape = this.shapeType;
				}

				//Draw Shapes
				if (this.delay == -1) {
					for (let i = 0; i < this.drawIterations; i++) {
						this.drawShape(shape, 0, 1);
					}
					this.drawText();
				} else {
					this.drawShape(shape, 0, this.drawIterations);
				}
			}

			this.drawText = function () {
				//Draw Text Shadow
				this.ctx.font = "20px Arial";
				this.ctx.fillStyle = "#000000";
				this.ctx.fillText(this.text, 25, 25);

				//Draw Text
				this.ctx.font = "20px Arial";
				this.ctx.fillStyle = "#FFFFFF";
				this.ctx.fillText(this.text, 26, 26);
			}

			this.drawShape = function (shape, i, max) {
				if (i < max) {
					switch (shape) {
						case 1:
							// Draw random line
							this.ctx.strokeStyle = "hsl(" + Math.floor(Math.random() * 255) + ", 100%, 50%)";
							this.ctx.lineWidth = 5;
							var x1 = Math.floor(Math.random() * this.width);
							var y1 = Math.floor(Math.random() * this.height);
							var x2 = Math.floor(Math.random() * this.width);
							var y2 = Math.floor(Math.random() * this.height);
							this.ctx.beginPath();
							this.ctx.moveTo(x1, y1);
							this.ctx.lineTo(x2, y2);
							this.ctx.stroke();
							break;
						case 2:
							//Draw random circle
							this.ctx.fillStyle = "hsl(" + Math.floor(Math.random() * 255) + ", 100%, 50%)";
							this.ctx.strokeStyle = "";
							var x = Math.floor(Math.random() * this.width);
							var y = Math.floor(Math.random() * this.height);
							var rx = Math.floor(Math.random() * (this.width - x) / 2);
							var ry = Math.floor(Math.random() * (this.height - y) / 2);
							this.ctx.beginPath();
							this.ctx.moveTo(x, y);
							this.ctx.ellipse(x, y, rx, ry, 0, 0, 2 * Math.PI);
							this.ctx.fill();
							break;
						case 3:
							// Draw random rectangle
							this.ctx.fillStyle = "hsl(" + Math.floor(Math.random() * 255) + ", 100%, 50%)";
							this.ctx.strokeStyle = "";
							var x = Math.floor(Math.random() * this.width);
							var y = Math.floor(Math.random() * this.height);
							var w = Math.floor(Math.random() * (this.width - x));
							var h = Math.floor(Math.random() * (this.height - y));
							this.ctx.fillRect(x, y, w, h);
							break;
					}
					// Delay each frame if set
					setTimeout(
						function () {
							randomArtCanvas.drawShape(shape, i + 1, max);
						},
						randomArtCanvas.delay
					);
				} else if (max > 1) {
					this.drawText();
				}
			}

			this.setTimerDelay = function (delay) {
				if (!delay) {
					delay = -1;
				}
				this.delay = parseInt(delay);
			}

			this.setShapeType = function (shape) {
				if (!shape) {
					console.error("No shape specified.");
					return;
				}
				if (shape < 1 || shape > 4) {
					console.error("Shape type does not exist.");
					return;
				}
				this.shapeType = shape;
			}

			this.setBackgroundColor = function (color) {
				if (!color) color = "#FFFFFF";
				this.backgroundColor = color;
			}

			this.setText = function (text) {
				if (!text) {
					text = "";
				} else if (typeof text !== "string") {
					text = "" + text;
				}
				this.text = text;
			}
		}
	</script>

</body>

</html>