From b82ece54aa3731d85f4a31f8fbf3c55a668ac416 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 16 Oct 2024 15:37:12 +0100 Subject: [PATCH] [CT404]: Clean up Assignment 1 --- .../assignment1/code/task1/backup.js | 200 ------------------ .../assignment1/code/task1/index.html | 4 +- .../assignment1/code/task1/index.js | 132 +++++++++++- .../assignment1/code/task1/package.json | 10 - .../assignment1/code/task1/script.js | 125 ----------- .../assignment1/code/task1/styles.css | 0 .../assignment1/code/task2/index.html | 2 +- 7 files changed, 134 insertions(+), 339 deletions(-) delete mode 100644 year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/backup.js delete mode 100644 year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/package.json delete mode 100644 year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/script.js delete mode 100644 year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/styles.css diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/backup.js b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/backup.js deleted file mode 100644 index 2cf3cf2f..00000000 --- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/backup.js +++ /dev/null @@ -1,200 +0,0 @@ -const canvas = document.getElementById('myCanvas'); -const ctx = canvas.getContext('2d'); - -// set canvas dimensions -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; - -// draw the stick figures -draw(); - -function drawStickFigure(x, y) { - ctx.lineWidth = 3; - ctx.strokeStyle = 'black'; - - // draw the stick figure's head - ctx.beginPath(); - ctx.arc(x, y - 30, 20, 0, Math.PI * 2); - ctx.stroke(); - - // draw the stick figure's left eye - ctx.beginPath(); - ctx.arc(x - 7, y - 33, 1, 0, Math.PI * 2); - ctx.stroke(); - - // draw the stick figure's right eye - ctx.beginPath(); - ctx.arc(x + 7, y - 33, 1, 0, Math.PI * 2); - ctx.stroke(); - - // draw the stick figure's mouth - ctx.beginPath(); - ctx.arc(x, y - 25, 6, 0, Math.PI); - ctx.stroke(); - - // Body - ctx.beginPath(); - ctx.moveTo(x, y - 10); - ctx.lineTo(x, y + 50); // Length of body - ctx.stroke(); - - // Arms - ctx.beginPath(); - ctx.moveTo(x - 30, y + 10); // Left arm - ctx.lineTo(x + 30, y + 10); // Right arm - ctx.stroke(); - - // Legs - ctx.beginPath(); - ctx.moveTo(x, y + 50); // Start at bottom of body - ctx.lineTo(x - 20, y + 100); // Left leg - ctx.moveTo(x, y + 50); - ctx.lineTo(x + 20, y + 100); // Right leg - ctx.stroke(); -} - -// Animation function -// function animate() { -// ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas -// -// drawStickFigure(x, y); // Draw stick figure at current position -// -// // Update position -// x += dx; -// y += dy; -// -// // Check boundaries and reverse direction if necessary -// if (x + 20 > canvas.width || x - 20 < 0) dx = -dx; // Horizontal boundary check -// if (y + 100 > canvas.height || y - 50 < 0) dy = -dy; // Vertical boundary check -// -// requestAnimationFrame(animate); // Recursive call to keep animation going -// } - -// Start animation -// animate(); - -function draw() { - // prompt the user to enter a number in a range and not continuing under a number in that range is selected - let numberStickFigures = 5; - // let numberStickFigures = 0; - // while (numberStickFigures < 1 || numberStickFigures > 5) { - // numberStickFigures = prompt("Enter an integer between 1 and 5"); - // } - - for (let i = 1; i <= numberStickFigures; i++) { - // place the stick figure randomly on the canvas - const x = Math.floor(Math.random() * canvas.width); - const y = Math.floor(Math.random() * canvas.height); - - drawStickFigure(x, y); - } -} - - - - - - - -const canvas = document.getElementById('myCanvas'); -const ctx = canvas.getContext('2d'); - -// set canvas dimensions -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; - -// Store stick figure data -let stickFigures = []; - -// Generate random number of stick figures between 1 and 5 -let numberStickFigures = 5; - -// Create stick figures with random positions and velocities -for (let i = 0; i < numberStickFigures; i++) { - stickFigures.push({ - x: Math.random() * canvas.width, - y: Math.random() * canvas.height, - dx: (Math.random() - 0.5) * 8, - dy: (Math.random() - 0.5) * 8, - danceSpeed: Math.random() * 5, - limbAngle: 0 - }); -} - -// Draw the stick figure -function drawStickFigure(x, y) { - ctx.lineWidth = 3; - ctx.strokeStyle = 'black'; - - // Draw the stick figure's head - ctx.beginPath(); - ctx.arc(x, y - 30, 20, 0, Math.PI * 2); - ctx.stroke(); - - // Draw the stick figure's left eye - ctx.beginPath(); - ctx.arc(x - 7, y - 33, 1, 0, Math.PI * 2); - ctx.stroke(); - - // Draw the stick figure's right eye - ctx.beginPath(); - ctx.arc(x + 7, y - 33, 1, 0, Math.PI * 2); - ctx.stroke(); - - // Draw the stick figure's mouth - ctx.beginPath(); - ctx.arc(x, y - 25, 6, 0, Math.PI); - ctx.stroke(); - - // Body - ctx.beginPath(); - ctx.moveTo(x, y - 10); - ctx.lineTo(x, y + 50); // Length of body - ctx.stroke(); - - // Arms - ctx.beginPath(); - - // right arm - ctx.moveTo(x, y + 10); - ctx.lineTo(x + 30, y + 10); - ctx.stroke(); - - // left arm - ctx.moveTo(x, y + 10); - ctx.lineTo(x - 30, y + 10); - ctx.stroke(); - - // Legs - ctx.beginPath(); - ctx.moveTo(x, y + 50); // Start at bottom of body - ctx.lineTo(x - 20, y + 100); // Left leg - ctx.moveTo(x, y + 50); - ctx.lineTo(x + 20, y + 100); // Right leg - ctx.stroke(); -} - -// Update the position of each stick figure and bounce off the boundaries -function updateStickFigures() { - ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas - - stickFigures.forEach((figure) => { - // Update position - figure.x += figure.dx; - figure.y += figure.dy; - - // Bounce off the boundaries - if (figure.x + 20 > canvas.width || figure.x - 20 < 0) figure.dx = -figure.dx; // Horizontal boundary check - if (figure.y + 100 > canvas.height || figure.y - 50 < 0) figure.dy = -figure.dy; // Vertical boundary check - - // Draw updated figure - drawStickFigure(figure.x, figure.y); - }); - - requestAnimationFrame(updateStickFigures); // Recursive call for animation -} - -// Start animation -updateStickFigures(); - - diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.html b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.html index 027ae1e7..81065392 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.html +++ b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.html @@ -8,6 +8,6 @@ - + - \ No newline at end of file + diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.js b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.js index 04bf26ec..ec40b6f0 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.js +++ b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/index.js @@ -1 +1,131 @@ -console.log('Happy developing ✨') +const canvas = document.getElementById('myCanvas'); +const context = canvas.getContext('2d'); + +// make canvas the same size as the window +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +// prompt user to enter a number between 1 and 10 and not continuing until one is selected +let numberStickFigures = 0; +while (numberStickFigures < 1 || numberStickFigures > 10) { + numberStickFigures = prompt("Enter an integer between 1 and 10"); +} + +// the colours that a stick figure may be (colours of the rainbow) +const colours = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; + +// array to store position, speed etc of each stick figure +let stickFigures = []; + +// Create stick figures with random positions and velocities +for (let i = 0; i < numberStickFigures; i++) { + stickFigures.push({ + colour: colours[Math.floor(Math.random() * colours.length)], + isSmiling: Math.random() > 0.5, + x: Math.random() * (canvas.width - 10), + y: Math.random() * (canvas.height - 10), + dx: (Math.random() - 0.5) * 4, + dy: (Math.random() - 0.5) * 4, + angle: 0, // Initial limb angle + angleSpeed: (Math.random() * 0.5) + 0.02 // Speed of limb movement + }); +} + +// Draw the stick figure +function drawStickFigure(figure) { + context.lineWidth = 3; + context.strokeStyle = figure.colour; + context.fillStyle = figure.colour; + + // draw the head + context.beginPath(); + context.arc(figure.x, figure.y - 30, 20, 0, Math.PI * 2); + context.stroke(); + + // left eye + context.beginPath(); + context.arc(figure.x - 7, figure.y - 33, 1, 0, Math.PI * 2); + context.stroke(); + context.fill(); // fill in circle + + // right eye + context.beginPath(); + context.arc(figure.x + 7, figure.y - 33, 1, 0, Math.PI * 2); + context.stroke(); + context.fill(); + + // draw a smile or frown + context.beginPath(); + if (figure.isSmiling) { context.arc(figure.x, figure.y - 25, 6, 0, Math.PI); } + else { context.arc(figure.x, figure.y - 20, 6, Math.PI, 2 * Math.PI); } + context.stroke(); + + // torso + context.beginPath(); + context.moveTo(figure.x, figure.y - 10); + context.lineTo(figure.x, figure.y + 50); + context.stroke(); + + // Arms with 2 parts (upper and lower arm) + const armLength = 30; + const upperArmAngle = Math.sin(figure.angle) * Math.PI / 4; // Swinging angle for upper arms + const lowerArmAngle = Math.cos(figure.angle) * Math.PI / -2; // Swinging angle for lower arms + + context.beginPath(); + // Left upper arm + context.moveTo(figure.x, figure.y + 10); + context.lineTo(figure.x - armLength * Math.cos(upperArmAngle), figure.y + 10 + armLength * Math.sin(upperArmAngle)); + // Left lower arm + context.lineTo(figure.x - armLength * Math.cos(upperArmAngle) - armLength * Math.cos(lowerArmAngle), figure.y + 10 + armLength * Math.sin(upperArmAngle) + armLength * Math.sin(lowerArmAngle)); + + // Right upper arm + context.moveTo(figure.x, figure.y + 10); + context.lineTo(figure.x + armLength * Math.cos(upperArmAngle), figure.y + 10 + armLength * Math.sin(upperArmAngle)); + // Right lower arm + context.lineTo(figure.x + armLength * Math.cos(upperArmAngle) + armLength * Math.cos(lowerArmAngle), figure.y + 10 + armLength * Math.sin(upperArmAngle) + armLength * Math.sin(lowerArmAngle)); + context.stroke(); + + // Legs with 2 parts (thigh and calf) + const legLength = 40; + const upperLegAngle = (Math.PI / 3) + Math.sin(figure.angle) * Math.PI / 10; // Swinging angle for upper legs + const lowerLegAngle = (Math.PI / 3) + Math.cos(figure.angle) * Math.PI / 5; // Swinging angle for lower legs + + context.beginPath(); + // Left upper leg + context.moveTo(figure.x, figure.y + 50); + context.lineTo(figure.x - legLength * Math.cos(upperLegAngle), figure.y + 50 + legLength * Math.sin(upperLegAngle)); + // Left lower leg + context.lineTo(figure.x - legLength * Math.cos(upperLegAngle) - legLength * Math.cos(lowerLegAngle), figure.y + 50 + legLength * Math.sin(upperLegAngle) + legLength * Math.sin(lowerLegAngle)); + + // Right upper leg + context.moveTo(figure.x, figure.y + 50); + context.lineTo(figure.x + legLength * Math.cos(upperLegAngle), figure.y + 50 + legLength * Math.sin(upperLegAngle)); + // Right lower leg + context.lineTo(figure.x + legLength * Math.cos(upperLegAngle) + legLength * Math.cos(lowerLegAngle), figure.y + 50 + legLength * Math.sin(upperLegAngle) + legLength * Math.sin(lowerLegAngle)); + context.stroke(); +} + +// Update the position and dance movements of each stick figure +function updateStickFigures() { + context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas + + stickFigures.forEach((figure) => { + // Update position + figure.x += figure.dx; + figure.y += figure.dy; + + // Bounce off the boundaries + if (figure.x + 20 >= canvas.width || figure.x - 20 <= 0) figure.dx = -figure.dx; // Horizontal boundary check + if (figure.y + 100 >= canvas.height || figure.y - 50 <= 0) figure.dy = -figure.dy; // Vertical boundary check + + // Update limb angles for dancing + figure.angle += figure.angleSpeed; + + // Draw the updated stick figure with animated limbs + drawStickFigure(figure); + }); + + requestAnimationFrame(updateStickFigures); // Recursive call for animation +} + +updateStickFigures(); diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/package.json b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/package.json deleted file mode 100644 index 8fc35c5e..00000000 --- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "code", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "private": true -} diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/script.js b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/script.js deleted file mode 100644 index 98e7ee27..00000000 --- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/script.js +++ /dev/null @@ -1,125 +0,0 @@ -const canvas = document.getElementById('myCanvas'); -const context = canvas.getContext('2d'); - -// make canvas the same size as the window -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; - -// prompt user to enter a number between 1 and 5 and not continuing until one is selected -let numberStickFigures = 0; -while (numberStickFigures < 1 || numberStickFigures > 5) { - numberStickFigures = prompt("Enter an integer between 1 and 5"); -} - -// array to store position, speed etc of each stick figure -let stickFigures = []; - -// Create stick figures with random positions and velocities -for (let i = 0; i < numberStickFigures; i++) { - stickFigures.push({ - x: Math.random() * canvas.width, - y: Math.random() * canvas.height, - dx: (Math.random() - 0.5) * 4, - dy: (Math.random() - 0.5) * 4, - angle: 0, // Initial limb angle - angleSpeed: (Math.random() * 0.05) + 0.02 // Speed of limb movement - }); -} - -// Draw the stick figure -function drawStickFigure(x, y, angle) { - context.lineWidth = 3; - context.strokeStyle = 'black'; - - // draw the head - context.beginPath(); - context.arc(x, y - 30, 20, 0, Math.PI * 2); - context.stroke(); - - // left eye - context.beginPath(); - context.arc(x - 7, y - 33, 1, 0, Math.PI * 2); - context.stroke(); - context.fill(); // fill in circle - - // right eye - context.beginPath(); - context.arc(x + 7, y - 33, 1, 0, Math.PI * 2); - context.stroke(); - context.fill(); - - // mouth - context.beginPath(); - context.arc(x, y - 25, 6, 0, Math.PI); - context.stroke(); - - // torso - context.beginPath(); - context.moveTo(x, y - 10); - context.lineTo(x, y + 50); - context.stroke(); - - // Arms with 2 parts (upper and lower arm) - const armLength = 30; - const upperArmAngle = Math.sin(angle) * Math.PI / 4; // Swinging angle for upper arms - const lowerArmAngle = Math.cos(angle) * Math.PI / -2; // Swinging angle for lower arms - - context.beginPath(); - // Left upper arm - context.moveTo(x, y + 10); - context.lineTo(x - armLength * Math.cos(upperArmAngle), y + 10 + armLength * Math.sin(upperArmAngle)); - // Left lower arm - context.lineTo(x - armLength * Math.cos(upperArmAngle) - armLength * Math.cos(lowerArmAngle), y + 10 + armLength * Math.sin(upperArmAngle) + armLength * Math.sin(lowerArmAngle)); - - // Right upper arm - context.moveTo(x, y + 10); - context.lineTo(x + armLength * Math.cos(upperArmAngle), y + 10 + armLength * Math.sin(upperArmAngle)); - // Right lower arm - context.lineTo(x + armLength * Math.cos(upperArmAngle) + armLength * Math.cos(lowerArmAngle), y + 10 + armLength * Math.sin(upperArmAngle) + armLength * Math.sin(lowerArmAngle)); - context.stroke(); - - // Legs with 2 parts (thigh and calf) - const legLength = 40; - const upperLegAngle = Math.sin(angle) * Math.PI / 5; // Swinging angle for upper legs - const lowerLegAngle = Math.cos(angle) * Math.PI / 2; // Swinging angle for lower legs - - context.beginPath(); - // Left upper leg - context.moveTo(x, y + 50); - context.lineTo(x - legLength * Math.cos(upperLegAngle), y + 50 + legLength * Math.sin(upperLegAngle)); - // Left lower leg - context.lineTo(x - legLength * Math.cos(upperLegAngle) - legLength * Math.cos(lowerLegAngle), y + 50 + legLength * Math.sin(upperLegAngle) + legLength * Math.sin(lowerLegAngle)); - - // Right upper leg - context.moveTo(x, y + 50); - context.lineTo(x + legLength * Math.cos(upperLegAngle), y + 50 + legLength * Math.sin(upperLegAngle)); - // Right lower leg - context.lineTo(x + legLength * Math.cos(upperLegAngle) + legLength * Math.cos(lowerLegAngle), y + 50 + legLength * Math.sin(upperLegAngle) + legLength * Math.sin(lowerLegAngle)); - context.stroke(); -} - -// Update the position and dance movements of each stick figure -function updateStickFigures() { - context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas - - stickFigures.forEach((figure) => { - // Update position - figure.x += figure.dx; - figure.y += figure.dy; - - // Bounce off the boundaries - if (figure.x + 20 > canvas.width || figure.x - 20 < 0) figure.dx = -figure.dx; // Horizontal boundary check - if (figure.y + 100 > canvas.height || figure.y - 50 < 0) figure.dy = -figure.dy; // Vertical boundary check - - // Update limb angles for dancing - figure.angle += figure.angleSpeed; - - // Draw the updated stick figure with animated limbs - drawStickFigure(figure.x, figure.y, figure.angle); - }); - - requestAnimationFrame(updateStickFigures); // Recursive call for animation -} - -// Start animation -updateStickFigures(); diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/styles.css b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task1/styles.css deleted file mode 100644 index e69de29b..00000000 diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html index 8983f7be..8a51b5ed 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html +++ b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html @@ -1,7 +1,7 @@ - +