Mini-Project Four
Remember, Mini-Project Four is due before the start of class today. We need two volunteers to:
- Share your solution for Mini-Project Four
- Walk through and explain your script
- Describe any challenges or debugging tasks and how you resolved them
Everyone will have to present once this semester for participation credit.
Mastermind Tutorial Review: Working with the Canvas; building interactive applications;
Working with Best Practices
Mini-Exercise: Handling Clicks and the Canvas
<!doctype html>
<html lang="en">
<head>
<style>canvas {
border: 2px solid black;
}
</style>
<title>Demo: Events, Clicks and Composite Types</title>
<meta charset="utf-8">
<script>
window.onload = init;
var canvas;
var context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
canvas.onclick = function(event) {
handleClick(event.clientX, event.clientY);
};
}
function handleClick(x, y) {
var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
var color = colors[Math.floor(Math.random()*colors.length)];
var compositeTypes = ['source-over','source-atop','destination-over','destination-out','destination-atop','lighter','darker','xor'];
//others to try: 'copy', 'destination-in','source-out','source-in'
var type = compositeTypes[Math.floor(Math.random()*compositeTypes.length)];
alert("Type: " + type);
context.globalCompositeOperation = type;
context.beginPath();
context.arc(x, y, 30, 0, degreesToRadians(360), true);
context.fillStyle = color;
context.fill();
}
function degreesToRadians(degrees) {
//converts from degrees to radians and returns
return (degrees * Math.PI)/180;
}</script></head><body><canvas id="myCanvas" width="300" height="300"></canvas></body></html>
When do we use web workers? How do we handle increasingly complex coding? Working from the Mandelbrot set example, we’ll consider the relationship between web workers, the canvas, and complex procedural generation and animation.
Reminder: Mini-Project Five is due next Monday, before the start of class. You should already be working on your final project: consider which previous projects (including mini-project five) you might want to revisit or expand as part of your concept.
