From b57ba113fa80f8726d1b2b5cb3b1a5ed63c6ca79 Mon Sep 17 00:00:00 2001 From: "Alan K. Nguyen" Date: Sat, 18 Jun 2022 14:08:15 -0400 Subject: [PATCH] update --- .DS_Store | Bin 8196 -> 10244 bytes HTMLPaint/HTMLPaint.html | 22 +++ HTMLPaint/PaintJS.j | 176 ++++++++++++++++++ HTMLPaint/PaintJS.js | 176 ++++++++++++++++++ HTMLPaint/style.css | 37 ++++ {Memory Game => MemoryGame}/main.html | 0 {Memory Game => MemoryGame}/style.css | 0 {Word Animations => TextAnimations}/style.css | 0 .../wordanimate.html | 0 9 files changed, 411 insertions(+) create mode 100644 HTMLPaint/HTMLPaint.html create mode 100644 HTMLPaint/PaintJS.j create mode 100644 HTMLPaint/PaintJS.js create mode 100644 HTMLPaint/style.css rename {Memory Game => MemoryGame}/main.html (100%) rename {Memory Game => MemoryGame}/style.css (100%) rename {Word Animations => TextAnimations}/style.css (100%) rename {Word Animations => TextAnimations}/wordanimate.html (100%) diff --git a/.DS_Store b/.DS_Store index 2cb0c1416839a71dc628c5f6e4d0446f56903f76..a8d95ce9acc1d04c877f721512f7f121a464b1f1 100644 GIT binary patch literal 10244 zcmeHN&rcIU6n+C$T0v41O}J=Q(S#TR1xgGt!BW~NQ3;_$6VyPrZD7N8x9Jb7K}^qj zFy7UxH@$K-F~q;X#J|A5z_Wfcvy|OsDQiqr$h>Ce?asV6Kfd>MhM7V{EZr!M5otse zMdCW%hb%yNJx}|j%PF}G&EQXSrd`lYTgQ8RpS3Db2q**;0tx|zfI{GZKmdC-muRol zDpv?71QY^o1o--(A#t5@bW3WnbRZK)0O$ych2UBI=?|^(0_c>ZTT-J0!lWy-bY;#F zgE=P$Cf!k=a_n1DOLth3b45SU=a|GlaBf}(OkV^Zfp%^VOg}fjU6SAH18n!cRLd9Z-)gZuX}Ax4W} z!3<>(<1E&PG8Mg%Wt{PDHk^TnO$FKzD?tU!sDeWUtO+%II7fVIiD<#ijSwvy6Q+ci zsh2lHNuV9V%gv%6-)~2ql_Zqs9;bfK)61|F1{!9hKECy17b(#b>^U>oLk#eZ??nc9 zWBGYQ+vwqqYfb6s`_CD3Es4EleC!YRmX34ua^-3Z_;j>)v*gCS{%TOJHHY}@@nhiA z`)6T%0+`XU4<9Em4J8Tzg@8gpA)pXAatL(G5o`SZKYQ@+|3_|KYQPEsg+O=&SR|9n zq+!2%dE|HHckLR|DiRlN*OFSeAQRW|(Be8CFZ?=w2#MP!xaNZAl%rcxqXhETe+vC*Z;j8iSz$2YjXqa delta 697 zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAD6=tOH$S7yWF7%0CKi{;0Rj@N zCojvsSDu_JAPr^p3dk@qUzogFz+v)EAw7O>2499$hFpexh9ZVa28GFAgw(~+#2DNe z5`ijGCmRSJx5OcrlWrKCoS$0&bPN#KDFO*Jm6LTu#(;2Lm7rQ%#Tfac*>d1row&Vq%jQNr<9}X`}H) zCUZ!l>l2x5A$eGk8Ei9y1UHa&1;y>g!tczJ`BefrfUX9`IK$+4p6QdniYN~a9~}Sy Di^Ql1 diff --git a/HTMLPaint/HTMLPaint.html b/HTMLPaint/HTMLPaint.html new file mode 100644 index 0000000..3a3190a --- /dev/null +++ b/HTMLPaint/HTMLPaint.html @@ -0,0 +1,22 @@ + + + + + + + + +
+ + + + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/HTMLPaint/PaintJS.j b/HTMLPaint/PaintJS.j new file mode 100644 index 0000000..cc87ea6 --- /dev/null +++ b/HTMLPaint/PaintJS.j @@ -0,0 +1,176 @@ +var arr_touches = []; +var canvas; +var ctx; +var down = false; //mouse is pressed +var color = 'black'; //default drawing color +var width = 5; // drawing width + + +//calling window.onload to make sure the HTML is loaded +window.onload = function() { + canvas = document.getElementById('canvas'); + ctx = canvas.getContext('2d'); + ctx.lineWidth = width; + + //handling mouse click and move events + canvas.addEventListener('mousemove', handleMove); + canvas.addEventListener('mousedown', handleDown); + canvas.addEventListener('mouseup', handleUp); + + //handling mobile touch events + canvas.addEventListener("touchstart", handleStart, false); + canvas.addEventListener("touchend", handleEnd, false); + canvas.addEventListener("touchcancel", handleCancel, false); + canvas.addEventListener("touchleave", handleEnd, false); + canvas.addEventListener("touchmove", handleTouchMove, false); +}; +function handleMove(e) +{ + xPos = e.clientX-canvas.offsetLeft; + yPos = e.clientY-canvas.offsetTop; + if(down == true) + { + ctx.lineTo(xPos,yPos); //create a line from old point to new one + ctx.strokeStyle = color; + ctx.stroke(); + } +} +function handleDown() +{ + down = true; + ctx.beginPath(); + ctx.moveTo(xPos, yPos); +} +function handleUp() +{ + down = false; +} +function handleStart(evt) +{ + var touches = evt.changedTouches; + for(var i = 0; i < touches.length; i++) + { + if(isValidTouch(touches[i])) + { + evt.preventDefault(); + arr_touches.push(copyTouch(touches[i])); + ctx.beginPath(); + ctx.fillStyle = color; + ctx.fill(); + } + } +} +function handleTouchMove(evt) +{ + var touches = evt.changedTouches; + var offset = findPos(canvas); + for (var i = 0; i < touches.length; i++) + { + if(isValidTouch(touches[i])) + { + evt.preventDefault(); + var idx = ongoingTouchIndexById(touches[i].identifier); + if (idx >= 0) + { + ctx.beginPath(); + ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y); + ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y); + ctx.strokeStyle = color; + ctx.stroke(); + + arr_touches.splice(idx, 1, copyTouch(touches[i])); + } + } + } +} +function handleEnd(evt) +{ + var touches = evt.changedTouches; + var offset = findPos(canvas); + for (var i = 0; i < touches.length; i++) + { + if(isValidTouch(touches[i])) + { + evt.preventDefault(); + var idx = ongoingTouchIndexById(touches[i].identifier); + if (idx >= 0) + { + ctx.lineWidth = 4; + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y); + ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y); + arr_touches.splice(i, 1); + } + } + } +} +function handleCancel(evt) +{ + evt.preventDefault(); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + arr_touches.splice(i, 1); + } +} +function copyTouch(touch) +{ + return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY}; +} +function ongoingTouchIndexById(idToFind) +{ + for (var i = 0; i < arr_touches.length; i++) { + var id = arr_touches[i].identifier; + if (id == idToFind) { + return i; + } + } + return -1; +} +function changeColor(new_color) +{ + color = new_color; +} +function clearCanvas() +{ + ctx.clearRect(0, 0, canvas.width, canvas.height); +} +function isValidTouch(touch) +{ + var curleft = 0, curtop = 0; + var offset = 0; + + if (canvas.offsetParent) { + do { + curleft += canvas.offsetLeft; + curtop += canvas.offsetTop; + } while (touch == canvas.offsetParent); + + offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop }; + } + + if(touch.clientX-offset.x > 0 && + touch.clientX-offset.x < parseFloat(canvas.width) && + touch.clientY-offset.y >0 && + touch.clientY-offset.y < parseFloat(canvas.height)) { + return true; + } + else + { + return false; + } +} +function findPos(obj) +{ + var curleft = 0, curtop = 0; + if (obj.offsetParent) + { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj == obj.offsetParent); + + return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop }; + } +} \ No newline at end of file diff --git a/HTMLPaint/PaintJS.js b/HTMLPaint/PaintJS.js new file mode 100644 index 0000000..cc87ea6 --- /dev/null +++ b/HTMLPaint/PaintJS.js @@ -0,0 +1,176 @@ +var arr_touches = []; +var canvas; +var ctx; +var down = false; //mouse is pressed +var color = 'black'; //default drawing color +var width = 5; // drawing width + + +//calling window.onload to make sure the HTML is loaded +window.onload = function() { + canvas = document.getElementById('canvas'); + ctx = canvas.getContext('2d'); + ctx.lineWidth = width; + + //handling mouse click and move events + canvas.addEventListener('mousemove', handleMove); + canvas.addEventListener('mousedown', handleDown); + canvas.addEventListener('mouseup', handleUp); + + //handling mobile touch events + canvas.addEventListener("touchstart", handleStart, false); + canvas.addEventListener("touchend", handleEnd, false); + canvas.addEventListener("touchcancel", handleCancel, false); + canvas.addEventListener("touchleave", handleEnd, false); + canvas.addEventListener("touchmove", handleTouchMove, false); +}; +function handleMove(e) +{ + xPos = e.clientX-canvas.offsetLeft; + yPos = e.clientY-canvas.offsetTop; + if(down == true) + { + ctx.lineTo(xPos,yPos); //create a line from old point to new one + ctx.strokeStyle = color; + ctx.stroke(); + } +} +function handleDown() +{ + down = true; + ctx.beginPath(); + ctx.moveTo(xPos, yPos); +} +function handleUp() +{ + down = false; +} +function handleStart(evt) +{ + var touches = evt.changedTouches; + for(var i = 0; i < touches.length; i++) + { + if(isValidTouch(touches[i])) + { + evt.preventDefault(); + arr_touches.push(copyTouch(touches[i])); + ctx.beginPath(); + ctx.fillStyle = color; + ctx.fill(); + } + } +} +function handleTouchMove(evt) +{ + var touches = evt.changedTouches; + var offset = findPos(canvas); + for (var i = 0; i < touches.length; i++) + { + if(isValidTouch(touches[i])) + { + evt.preventDefault(); + var idx = ongoingTouchIndexById(touches[i].identifier); + if (idx >= 0) + { + ctx.beginPath(); + ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y); + ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y); + ctx.strokeStyle = color; + ctx.stroke(); + + arr_touches.splice(idx, 1, copyTouch(touches[i])); + } + } + } +} +function handleEnd(evt) +{ + var touches = evt.changedTouches; + var offset = findPos(canvas); + for (var i = 0; i < touches.length; i++) + { + if(isValidTouch(touches[i])) + { + evt.preventDefault(); + var idx = ongoingTouchIndexById(touches[i].identifier); + if (idx >= 0) + { + ctx.lineWidth = 4; + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y); + ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y); + arr_touches.splice(i, 1); + } + } + } +} +function handleCancel(evt) +{ + evt.preventDefault(); + var touches = evt.changedTouches; + + for (var i = 0; i < touches.length; i++) { + arr_touches.splice(i, 1); + } +} +function copyTouch(touch) +{ + return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY}; +} +function ongoingTouchIndexById(idToFind) +{ + for (var i = 0; i < arr_touches.length; i++) { + var id = arr_touches[i].identifier; + if (id == idToFind) { + return i; + } + } + return -1; +} +function changeColor(new_color) +{ + color = new_color; +} +function clearCanvas() +{ + ctx.clearRect(0, 0, canvas.width, canvas.height); +} +function isValidTouch(touch) +{ + var curleft = 0, curtop = 0; + var offset = 0; + + if (canvas.offsetParent) { + do { + curleft += canvas.offsetLeft; + curtop += canvas.offsetTop; + } while (touch == canvas.offsetParent); + + offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop }; + } + + if(touch.clientX-offset.x > 0 && + touch.clientX-offset.x < parseFloat(canvas.width) && + touch.clientY-offset.y >0 && + touch.clientY-offset.y < parseFloat(canvas.height)) { + return true; + } + else + { + return false; + } +} +function findPos(obj) +{ + var curleft = 0, curtop = 0; + if (obj.offsetParent) + { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj == obj.offsetParent); + + return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop }; + } +} \ No newline at end of file diff --git a/HTMLPaint/style.css b/HTMLPaint/style.css new file mode 100644 index 0000000..24fa81d --- /dev/null +++ b/HTMLPaint/style.css @@ -0,0 +1,37 @@ +#canvas +{ + border: 1px solid black; + margin: 10px 0 10px 0; + cursor: pointer; +} +#colors button +{ + width: 40px; + height: 40px; + border-radius: 100%; + margin-top: 0px; +} +#black +{ + background: black; +} +#pink +{ + background: pink; +} +#red +{ + background: red; +} +#green +{ + background: green; +} +#blue +{ + background: blue; +} +#orange +{ + background: orange; +} \ No newline at end of file diff --git a/Memory Game/main.html b/MemoryGame/main.html similarity index 100% rename from Memory Game/main.html rename to MemoryGame/main.html diff --git a/Memory Game/style.css b/MemoryGame/style.css similarity index 100% rename from Memory Game/style.css rename to MemoryGame/style.css diff --git a/Word Animations/style.css b/TextAnimations/style.css similarity index 100% rename from Word Animations/style.css rename to TextAnimations/style.css diff --git a/Word Animations/wordanimate.html b/TextAnimations/wordanimate.html similarity index 100% rename from Word Animations/wordanimate.html rename to TextAnimations/wordanimate.html