commit 0e50c49aaddaea46fa5aba0c86edcf5481c43121 Author: Kaylee Date: Tue May 9 04:10:35 2023 +0100 adding repo diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..72474e5 --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + +Tile Rotation + + +
+ +
+ 0° +
+ diff --git a/js/angles.json b/js/angles.json new file mode 100644 index 0000000..7b073da --- /dev/null +++ b/js/angles.json @@ -0,0 +1,68 @@ +{ + "angles": [ + {"angle": 0.0, "numerator": 0, "denominator": 1}, + {"angle": 5.710593137499643, "numerator": 1, "denominator": 10}, + {"angle": 6.340191745909909, "numerator": 1, "denominator": 9}, + {"angle": 7.125016348901798, "numerator": 1, "denominator": 8}, + {"angle": 8.130102354155978, "numerator": 1, "denominator": 7}, + {"angle": 9.462322208025617, "numerator": 1, "denominator": 6}, + {"angle": 11.309932474020215, "numerator": 1, "denominator": 5}, + {"angle": 12.528807709151511, "numerator": 2, "denominator": 9}, + {"angle": 14.036243467926479, "numerator": 1, "denominator": 4}, + {"angle": 15.945395900922854, "numerator": 2, "denominator": 7}, + {"angle": 16.69924423399362, "numerator": 3, "denominator": 10}, + {"angle": 18.43494882292201, "numerator": 1, "denominator": 3}, + {"angle": 20.556045219583467, "numerator": 3, "denominator": 8}, + {"angle": 21.80140948635181, "numerator": 2, "denominator": 5}, + {"angle": 23.198590513648185, "numerator": 3, "denominator": 7}, + {"angle": 23.962488974578182, "numerator": 4, "denominator": 9}, + {"angle": 26.565051177077994, "numerator": 1, "denominator": 2}, + {"angle": 29.054604099077146, "numerator": 5, "denominator": 9}, + {"angle": 29.74488129694222, "numerator": 4, "denominator": 7}, + {"angle": 30.96375653207352, "numerator": 3, "denominator": 5}, + {"angle": 32.005383208083494, "numerator": 5, "denominator": 8}, + {"angle": 33.690067525979785, "numerator": 2, "denominator": 3}, + {"angle": 34.99202019855866, "numerator": 7, "denominator": 10}, + {"angle": 35.53767779197438, "numerator": 5, "denominator": 7}, + {"angle": 36.86989764584402, "numerator": 3, "denominator": 4}, + {"angle": 37.874983651098205, "numerator": 7, "denominator": 9}, + {"angle": 38.659808254090095, "numerator": 4, "denominator": 5}, + {"angle": 39.8055710922652, "numerator": 5, "denominator": 6}, + {"angle": 40.60129464500447, "numerator": 6, "denominator": 7}, + {"angle": 41.18592516570965, "numerator": 7, "denominator": 8}, + {"angle": 41.6335393365702, "numerator": 8, "denominator": 9}, + {"angle": 41.987212495816664, "numerator": 9, "denominator": 10}, + {"angle": 45.0, "numerator": 1, "denominator": 1}, + {"angle": 48.01278750418334, "numerator": 10, "denominator": 9}, + {"angle": 48.366460663429805, "numerator": 9, "denominator": 8}, + {"angle": 48.81407483429035, "numerator": 8, "denominator": 7}, + {"angle": 49.398705354995535, "numerator": 7, "denominator": 6}, + {"angle": 50.19442890773481, "numerator": 6, "denominator": 5}, + {"angle": 51.34019174590991, "numerator": 5, "denominator": 4}, + {"angle": 52.1250163489018, "numerator": 9, "denominator": 7}, + {"angle": 53.13010235415598, "numerator": 4, "denominator": 3}, + {"angle": 54.46232220802562, "numerator": 7, "denominator": 5}, + {"angle": 55.00797980144134, "numerator": 10, "denominator": 7}, + {"angle": 56.309932474020215, "numerator": 3, "denominator": 2}, + {"angle": 57.9946167919165, "numerator": 8, "denominator": 5}, + {"angle": 59.03624346792648, "numerator": 5, "denominator": 3}, + {"angle": 60.25511870305777, "numerator": 7, "denominator": 4}, + {"angle": 60.94539590092286, "numerator": 9, "denominator": 5}, + {"angle": 63.43494882292202, "numerator": 2, "denominator": 1}, + {"angle": 66.03751102542182, "numerator": 9, "denominator": 4}, + {"angle": 66.80140948635182, "numerator": 7, "denominator": 3}, + {"angle": 68.19859051364818, "numerator": 5, "denominator": 2}, + {"angle": 69.44395478041653, "numerator": 8, "denominator": 3}, + {"angle": 71.56505117707799, "numerator": 3, "denominator": 1}, + {"angle": 73.30075576600639, "numerator": 10, "denominator": 3}, + {"angle": 74.05460409907715, "numerator": 7, "denominator": 2}, + {"angle": 75.96375653207353, "numerator": 4, "denominator": 1}, + {"angle": 77.47119229084849, "numerator": 9, "denominator": 2}, + {"angle": 78.69006752597979, "numerator": 5, "denominator": 1}, + {"angle": 80.53767779197439, "numerator": 6, "denominator": 1}, + {"angle": 81.86989764584403, "numerator": 7, "denominator": 1}, + {"angle": 82.8749836510982, "numerator": 8, "denominator": 1}, + {"angle": 83.6598082540901, "numerator": 9, "denominator": 1}, + {"angle": 84.28940686250036, "numerator": 10, "denominator": 1} + ] +} diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..8bbf1d3 --- /dev/null +++ b/js/app.js @@ -0,0 +1,73 @@ +var angle_arr = []; +function closest(val){ + x= angle_arr.reduce(function(prev, cur) { + return Math.abs(cur.angle - val) < Math.abs(prev.angle - val) ? cur : prev; + }); + return x; +} +window.onload = function() { + fetch('js/angles.json').then((response)=>response.json()).then((json)=>angle_arr=json.angles); + var input = document.getElementById('fileUpload'); + input.addEventListener('change', handleFiles); + rotation.addEventListener("input", (event) => { + var closestAngle = closest(event.target.value); + console.log(closestAngle); + event.target.value = closestAngle.angle; + angle.textContent = event.target.value; + tileImg(closestAngle.angle); + }) + canvas.width = 700; + canvas.height = 700; + + +} +var img = new Image; +function handleFiles(e) { + img.onload = tileImg; + img.src = URL.createObjectURL(e.target.files[0]); + +} + +function tileImg(a) { + var ctx = document.getElementById('canvas').getContext('2d'); +var image = img; + // Set the angle in radians + const angleDeg = a; // Replace with your desired angle in degrees + const angle = angleDeg * Math.PI / 180; + // Create a temporary canvas + var tempCanvas = document.createElement ("canvas"); + var tempCtx = tempCanvas.getContext ("2d"); + + // Calculate the diagonal length of the original canvas + var d = Math.sqrt (canvas.width * canvas.width + canvas.height * canvas.height); + + // Set the temporary canvas dimensions to the diagonal length + tempCanvas.width = d; + tempCanvas.height = d; + + // Create the pattern on the temporary context + var pattern = tempCtx.createPattern (image, "repeat"); + + // Set the fill style on the temporary context + tempCtx.fillStyle = pattern; + + // Save the temporary context state + tempCtx.save (); + + // Translate to the center of the temporary canvas + tempCtx.translate (d / 2, d / 2); + + // Rotate by the angle + tempCtx.rotate (angle); + + // Draw the rectangle with the pattern on the temporary context + tempCtx.fillRect (-d / 2, -d / 2, d, d); + + // Restore the temporary context state + tempCtx.restore (); + + // Draw the temporary canvas on the original canvas + ctx.drawImage (tempCanvas, - (d - canvas.width) / 2, - (d - canvas.height) / 2); + + +}