Skip to content

Commit

Permalink
commitng changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@leila010
leila010 committed Oct 10, 2024
1 parent 631a22d commit eb7c8b4
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 418 deletions.
218 changes: 4 additions & 214 deletions _notebooks/fundamentals/POPCORN HACK 1.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
},
{
"cell_type": "code",
"execution_count": 1,
"execution_count": 2,
"metadata": {
"vscode": {
"languageId": "javascript"
Expand Down Expand Up @@ -210,18 +210,9 @@
"Make a code cell that show usage of compound assignment in a Data Type Operations."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Scale a Block\n",
"\n",
"Scalling is an important Math operation that is used in Gaming. This example is considering HD formats to construct a block."
]
},
{
"cell_type": "code",
"execution_count": 4,
"execution_count": 6,
"metadata": {
"vscode": {
"languageId": "html"
Expand All @@ -236,7 +227,7 @@
"\n",
"<!-- Input definitions -->\n",
"<div>\n",
" <label for=\"width\">Enter Width (∞):</label>\n",
" <label for=\"width\">Enter Width (1-100000):</label>\n",
" <input type=\"number\" id=\"width\" name=\"width\" min=\"1\" max=\"100000\" step=\"100\" value=\"1280\">\n",
" <button onclick=\"submitScale()\">Submit</button>\n",
"</div>\n",
Expand Down Expand Up @@ -303,7 +294,7 @@
"\n",
"<!-- Input definitions -->\n",
"<div>\n",
" <label for=\"width\">Enter Width (∞):</label>\n",
" <label for=\"width\">Enter Width (1-100000):</label>\n",
" <input type=\"number\" id=\"width\" name=\"width\" min=\"1\" max=\"100000\" step=\"100\" value=\"1280\">\n",
" <button onclick=\"submitScale()\">Submit</button>\n",
"</div>\n",
Expand Down Expand Up @@ -355,207 +346,6 @@
" }\n",
"</script>"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Popcorn Hack 2\n",
"\n",
"Make a code cell that changes block into a square, versus HD resolution"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Placing a Block\n",
"\n",
"Often in gaming you will want to position on element in relationship to another."
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"vscode": {
"languageId": "html"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"<p>This example uses data types, operators, and functions to scale a block based on a user-defined width.</p>\n",
"\n",
"<!-- Input definitions -->\n",
"<div>\n",
" <label for=\"widthCanvas\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
" <input type=\"number\" id=\"widthCanvas\" name=\"widthCanvas\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
" <button onclick=\"submitScaleImg()\">Submit</button>\n",
"</div>\n",
"\n",
"<!-- Document Object Model (DOM) output locations -->\n",
"<div id=\"outputMsg\"></div>\n",
"<div id=\"errorMsg\"></div>\n",
"\n",
"<!-- Canvas for background display -->\n",
"<canvas id=\"canvas\"></canvas>\n",
"\n",
"<script>\n",
" // Function to validate and output the scale value\n",
" function submitScaleImg() {\n",
" const BLOCK_SCALE_DIVISOR = 20;\n",
" const ASPECT_RATIO = 9 / 16;\n",
" const SCALE_DOWN_FACTOR = 0.5;\n",
" let canvas = document.getElementById('canvas');\n",
" let c = canvas.getContext('2d');\n",
" let width = parseInt(document.getElementById('widthCanvas').value);\n",
" \n",
" // Restrict sizes to common HD resolutions\n",
" if (width === 1280 || width === 1920 || width === 2560 || width === 3840) {\n",
" // Calculate height based on 16:9 aspect ratio\n",
" let height = Math.round(width * ASPECT_RATIO);\n",
" \n",
" // Set the canvas dimensions\n",
" canvas.width = width * SCALE_DOWN_FACTOR;\n",
" canvas.height = height * SCALE_DOWN_FACTOR;\n",
" \n",
" // Calculate block size as 1/20th of the scale dimensions and scale down by 50%\n",
" let blockSize = Math.min(width, height) / BLOCK_SCALE_DIVISOR;\n",
" \n",
" // Set/clear error messages when the value is valid\n",
" document.getElementById('errorMsg').innerHTML = \"\";\n",
" // Output the scale value to the console\n",
" document.getElementById('outputMsg').innerHTML = \"Scale set to: \" + width + \" x \" + height + \" (Block size: \" + blockSize + \"px)\";\n",
" \n",
" // Load background image\n",
" let imageBackground = new Image();\n",
" imageBackground.src = 'https://samayass.github.io/samayaCSA/images/background.png';\n",
" imageBackground.onload = function() {\n",
" // Clear the canvas before drawing\n",
" c.clearRect(0, 0, canvas.width, canvas.height);\n",
" // Draw the background image on the canvas\n",
" c.drawImage(imageBackground, 0, 0, canvas.width, canvas.height);\n",
" \n",
" // Draw the red block on the canvas\n",
" c.fillStyle = 'red';\n",
" c.fillRect((canvas.width - blockSize) / 2, (canvas.height - blockSize) / 2, blockSize, blockSize);\n",
" };\n",
" } else {\n",
" // Set/clear output messages when there is an error\n",
" document.getElementById('outputMsg').innerHTML = \"\";\n",
" // Output an error message to the console\n",
" console.error(\"Invalid HD resolution:\", width);\n",
" // Output an error message to the HTML page\n",
" document.getElementById('errorMsg').innerHTML = \"Invalid HD resolution: \" + width;\n",
" \n",
" // Clear the canvas\n",
" c.clearRect(0, 0, canvas.width, canvas.height);\n",
" }\n",
" }\n",
"</script>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%html \n",
"\n",
"<p>This example uses data types, operators, and functions to scale a block based on a user-defined width.</p>\n",
"\n",
"<!-- Input definitions -->\n",
"<div>\n",
" <label for=\"widthCanvas\">Enter Width (1280, 1920, 2560, 3840):</label>\n",
" <input type=\"number\" id=\"widthCanvas\" name=\"widthCanvas\" min=\"1280\" max=\"3840\" step=\"640\" value=\"1280\">\n",
" <button onclick=\"submitScaleImg()\">Submit</button>\n",
"</div>\n",
"\n",
"<!-- Document Object Model (DOM) output locations -->\n",
"<div id=\"outputMsg\"></div>\n",
"<div id=\"errorMsg\"></div>\n",
"\n",
"<!-- Canvas for background display -->\n",
"<canvas id=\"canvas\"></canvas>\n",
"\n",
"<script>\n",
" // Function to validate and output the scale value\n",
" function submitScaleImg() {\n",
" const BLOCK_SCALE_DIVISOR = 20;\n",
" const ASPECT_RATIO = 9 / 16;\n",
" const SCALE_DOWN_FACTOR = 0.5;\n",
" let canvas = document.getElementById('canvas');\n",
" let c = canvas.getContext('2d');\n",
" let width = parseInt(document.getElementById('widthCanvas').value);\n",
" \n",
" // Restrict sizes to common HD resolutions\n",
" if (width === 1280 || width === 1920 || width === 2560 || width === 3840) {\n",
" // Calculate height based on 16:9 aspect ratio\n",
" let height = Math.round(width * ASPECT_RATIO);\n",
" \n",
" // Set the canvas dimensions\n",
" canvas.width = width * SCALE_DOWN_FACTOR;\n",
" canvas.height = height * SCALE_DOWN_FACTOR;\n",
" \n",
" // Calculate block size as 1/20th of the scale dimensions and scale down by 50%\n",
" let blockSize = Math.min(width, height) / BLOCK_SCALE_DIVISOR;\n",
" \n",
" // Set/clear error messages when the value is valid\n",
" document.getElementById('errorMsg').innerHTML = \"\";\n",
" // Output the scale value to the console\n",
" document.getElementById('outputMsg').innerHTML = \"Scale set to: \" + width + \" x \" + height + \" (Block size: \" + blockSize + \"px)\";\n",
" \n",
" // Load background image\n",
" let imageBackground = new Image();\n",
" imageBackground.src = 'https://samayass.github.io/samayaCSA/images/background.png';\n",
" imageBackground.onload = function() {\n",
" // Clear the canvas before drawing\n",
" c.clearRect(0, 0, canvas.width, canvas.height);\n",
" // Draw the background image on the canvas\n",
" c.drawImage(imageBackground, 0, 0, canvas.width, canvas.height);\n",
" \n",
" // Draw the red block on the canvas\n",
" c.fillStyle = 'red';\n",
" c.fillRect((canvas.width - blockSize) / 2, (canvas.height - blockSize) / 2, blockSize, blockSize);\n",
" };\n",
" } else {\n",
" // Set/clear output messages when there is an error\n",
" document.getElementById('outputMsg').innerHTML = \"\";\n",
" // Output an error message to the console\n",
" console.error(\"Invalid HD resolution:\", width);\n",
" // Output an error message to the HTML page\n",
" document.getElementById('errorMsg').innerHTML = \"Invalid HD resolution: \" + width;\n",
" \n",
" // Clear the canvas\n",
" c.clearRect(0, 0, canvas.width, canvas.height);\n",
" }\n",
" }\n",
"</script>"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Popcorn Hack 3\n",
"\n",
"Try to place a square in every corner.\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Turtle / Fish HW\n",
"\n",
"Make the Turtle and Fish start on screen in different locations (ie Fish Center/Left, Turtle Center/Right)"
]
}
],
"metadata": {
Expand Down
Loading

0 comments on commit eb7c8b4

Please sign in to comment.