118 lines
4.1 KiB
JavaScript
118 lines
4.1 KiB
JavaScript
const scannerLine = document.getElementById("scannerLine");
|
|
const scannerLineH = document.getElementById("scannerLineH");
|
|
|
|
$(document).ready(function() {
|
|
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
|
|
$("body").removeClass("hideBody");
|
|
$("body").addClass("mobile");
|
|
|
|
}else if(('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) && (testratio<0.7777777) ){
|
|
$("body").removeClass("hideBody");
|
|
$("body").addClass("mobile mobileOld");
|
|
|
|
}else{
|
|
$("body").removeClass("hideBody");
|
|
$("body").addClass("desktop")
|
|
};
|
|
|
|
|
|
|
|
const img = new Image();
|
|
img.crossOrigin = "anonymous";
|
|
img.src = "./media/360_F_163966311_qh3qSk57mw9oLPOklZigzX9zlB5DgdaM.jpeg";
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const scanner = $(".scanner");
|
|
|
|
const destination = document.getElementById("letter");
|
|
ctx.fillStyle = "black";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
img.addEventListener("load", () => {
|
|
canvas.height = canvas.width * (img.height / img.width);
|
|
scanner.css("width", $("#canvas").width());
|
|
scanner.css("height", $("#canvas").height());
|
|
var hRatio = canvas.width / img.width ;
|
|
var vRatio = canvas.height / img.height ;
|
|
var ratio = Math.min ( hRatio, vRatio );
|
|
ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);
|
|
// ctx.drawImage(img, 0, 0);
|
|
img.style.display = "none";
|
|
});
|
|
const hoveredColor = document.getElementById("hovered-color");
|
|
const selectedColor = document.getElementById("selected-color");
|
|
|
|
|
|
|
|
// let rect = scannelLine.getBoundingClientRect();
|
|
function pick() {
|
|
const bounding = canvas.getBoundingClientRect();
|
|
|
|
|
|
const letters = document.getElementById("typeMaster");
|
|
const letter = $(".letter");
|
|
|
|
letter.each(function(i,e){
|
|
let rect = scannerLine.getBoundingClientRect();
|
|
let rectH = scannerLineH.getBoundingClientRect();
|
|
|
|
const x = rect.left - bounding.left;
|
|
const y = rectH.top - bounding.top;
|
|
const pixel = ctx.getImageData(x - (i*2), y , 1, 1);
|
|
const data = pixel.data;
|
|
|
|
let rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
|
|
|
|
hoveredColor.style.background = rgba;
|
|
hoveredColor.textContent = rgba;
|
|
// letters.style.color = rgba;
|
|
|
|
// $(".typeMaster").css("background",rgba);
|
|
$(e).css("color",rgba);
|
|
$(e).css("font-variation-settings","'wght' "+ ((data[0]) + (data[1]) + (data[2])));
|
|
|
|
return rgba;
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
const milliseconds = 100;
|
|
window.setInterval(pick, milliseconds);
|
|
|
|
});
|
|
|
|
$(window).on("load", function(){
|
|
|
|
$("#typeMaster").html(function(index, html) {
|
|
return html.replace(/\w+/g, '<span class="word">$&</span>');
|
|
});
|
|
$(".word").html(function(index, html) {
|
|
return html.replace(/\S/g, '<span class="letter">$&</span>');
|
|
})
|
|
var length = $(".letter").length;
|
|
var currentMousePos = { x: -1, y: -1 };
|
|
|
|
});
|
|
|
|
var slider = document.getElementById("myRange");
|
|
var output = document.getElementById("demo");
|
|
output.innerHTML = "duration X: " + slider.value; // Display the default slider value
|
|
|
|
var sliderY = document.getElementById("myRangeY");
|
|
var outputY = document.getElementById("demoY");
|
|
outputY.innerHTML = "duration Y: " + sliderY.value; // Display the default slider value
|
|
|
|
slider.oninput = function() {
|
|
output.innerHTML = "duration X: " + this.value;
|
|
|
|
scannerLine.style.animationDuration = this.value + "s";
|
|
}
|
|
|
|
sliderY.oninput = function() {
|
|
outputY.innerHTML = "duration Y: " + this.value;
|
|
scannerLineH.style.animationDuration = this.value + "s";
|
|
}
|
|
|
|
|