adding repo
This commit is contained in:
commit
0e50c49aad
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!doctype html>
|
||||||
|
<title>Tile Rotation</title>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
<canvas id="canvas" style="width:700px; height: 700px;"></canvas>
|
||||||
|
<br>
|
||||||
|
<input type="file" id="fileUpload"></input>
|
||||||
|
<br>
|
||||||
|
<input type="range" id="rotation" min=-180 max=180 value=0 style='width:600px;'></input> <span id="angle">0</span>°
|
||||||
|
<br>
|
||||||
|
<button id="save">Save</button>
|
||||||
|
|
@ -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}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue