First prototype
This commit is contained in:
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="Dr.JJ's website">
|
||||
<meta name="keywords" content="Research, doctor, engineer, mathematics, code, AI, robotics, IoT, 3D, modeling">
|
||||
<meta name="author" content="Dr.JJ">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="thit">
|
||||
THIT
|
||||
</div>
|
||||
</body>
|
||||
<script src="thit.js"></script>
|
||||
</html>
|
||||
21
styles.css
Normal file
21
styles.css
Normal file
@@ -0,0 +1,21 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
background: hsl(0, 0%, 0%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#thit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: hsl(0, 0%, 100%);
|
||||
font: bold 1px sans-serif;
|
||||
}
|
||||
387
thit.js
Normal file
387
thit.js
Normal file
@@ -0,0 +1,387 @@
|
||||
let scrollId = Math.floor(Date.now()/1000/60/60);
|
||||
let scrollPerLoop = 2000;
|
||||
let mtx = 0.5;
|
||||
let mty = 0.5;
|
||||
let mta = 205.0/360.0;
|
||||
let mtr = 1.0;
|
||||
let maxScale = 16;
|
||||
let sensScale = 0.4;
|
||||
let sensTouch = 100;
|
||||
let alpha = 10;
|
||||
let nDecimals = 4;
|
||||
let touchTip = true;
|
||||
let sDegree = 3;
|
||||
let lValue = 0.5;
|
||||
|
||||
let r = 0.45;
|
||||
let sw = r/2;
|
||||
|
||||
let sensMouv = 0.1;
|
||||
|
||||
let clientX;
|
||||
let clientY;
|
||||
|
||||
let nLayers = 10;
|
||||
|
||||
const thit = document.getElementById("thit");
|
||||
const stringToConvert = thit.innerText;
|
||||
|
||||
const myLogo = document.getElementById("myLogo");
|
||||
const pathGroup = document.getElementById("pathGroup");
|
||||
const maskGroup = document.getElementById("maskGroup");
|
||||
const gradientsGroup = document.getElementById("gradients");
|
||||
|
||||
const tips = document.getElementById("tips");
|
||||
|
||||
const easeOut = document.getElementById("easeOut");
|
||||
const easeOutValue = document.getElementById("easeOutValue");
|
||||
const light = document.getElementById("light");
|
||||
const lightValue = document.getElementById("lightValue");
|
||||
|
||||
function ready(fn) {
|
||||
if (document.readyState !== 'loading') {
|
||||
fn();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', fn);
|
||||
}
|
||||
}
|
||||
|
||||
function easeInNone(x) {
|
||||
return x;
|
||||
}
|
||||
|
||||
function easeOutNone(x) {
|
||||
return x;
|
||||
}
|
||||
|
||||
function easeInQuad(x) {
|
||||
return x * x;
|
||||
}
|
||||
|
||||
function easeInCubic(x) {
|
||||
return x * x * x;
|
||||
}
|
||||
|
||||
function easeOutSine(x) {
|
||||
return Math.sin((x * Math.PI) / 2);
|
||||
}
|
||||
|
||||
function easeInSpline(x,d) {
|
||||
return Math.pow(x, d);
|
||||
}
|
||||
|
||||
function easeOutSpline(x,d) {
|
||||
return 1 - Math.pow(1 - x, d);
|
||||
}
|
||||
|
||||
function easeInCirc(x) {
|
||||
return 1 - Math.sqrt(1 - Math.pow(x, 2));
|
||||
}
|
||||
|
||||
function easeOutCirc(x) {
|
||||
return Math.sqrt(1 - Math.pow(x - 1, 2));
|
||||
}
|
||||
|
||||
function easeOutExpo(x) {
|
||||
return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
|
||||
}
|
||||
|
||||
function easeInOutCirc(x) {
|
||||
return x < 0.5
|
||||
? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2
|
||||
: (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
|
||||
|
||||
}
|
||||
|
||||
function easeInSine(x) {
|
||||
return 1 - Math.cos((x * Math.PI) / 2);
|
||||
|
||||
}
|
||||
|
||||
function easeOutCubic(x) {
|
||||
return 1 - Math.pow(1 - x, 3);
|
||||
}
|
||||
|
||||
function easeInOutQuad(x) {
|
||||
return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
|
||||
|
||||
}
|
||||
|
||||
function easeInOutSine(x) {
|
||||
return -(Math.cos(Math.PI * x) - 1) / 2;
|
||||
}
|
||||
|
||||
function easeInOutCubic(x) {
|
||||
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
|
||||
|
||||
}
|
||||
|
||||
function triangleWave(x, amplitude, period, offset) {
|
||||
let normalized = ((x+period/2) * (2 / period)) % 2;
|
||||
let wave = Math.abs(normalized - 1);
|
||||
return (wave * amplitude) + offset;
|
||||
}
|
||||
|
||||
function dpathO() {
|
||||
let d = `M ${(r).toFixed(nDecimals)} 0 V ${(r).toFixed(nDecimals)} A ${r.toFixed(nDecimals)} ${r.toFixed(nDecimals)} 0 0 1 ${(-r).toFixed(nDecimals)} ${(r).toFixed(nDecimals)} V ${(-r).toFixed(nDecimals)} A ${r.toFixed(nDecimals)} ${r.toFixed(nDecimals)} 0 0 1 ${(r).toFixed(nDecimals)} ${(-r).toFixed(nDecimals)} Z`;
|
||||
return d;
|
||||
}
|
||||
|
||||
function dpathM() {
|
||||
let d = 'M -100 100 L 100 -100';
|
||||
return d;
|
||||
}
|
||||
|
||||
function drawLayer(i) {
|
||||
|
||||
let si = (scrollId%scrollPerLoop)/(scrollPerLoop-1);
|
||||
|
||||
let scale = (nLayers - i - si)/nLayers;
|
||||
|
||||
let rate = triangleWave((nLayers - i - si)/(nLayers-1),1,1,0.0);
|
||||
if (i == 0) {
|
||||
rate = 0;
|
||||
}
|
||||
// increase = easeInSine(increase);
|
||||
// rate = easeInOutSine(rate);
|
||||
|
||||
let myLayer = document.getElementById(`layer${i}`);
|
||||
|
||||
let myGrad = document.getElementById(`grad${i}`);
|
||||
myGrad.innerHTML = `<stop offset="0.1" stop-color="black" /><stop offset="${0.5-0.3*scale}" stop-color="${hslToHex(205.0/360.0,1,lValue*rate)}" /><stop offset="${0.5+0.3*scale}" stop-color="${hslToHex(205.0/360.0,1,lValue*rate)}" /><stop offset="0.9" stop-color="black" />`;
|
||||
// myGrad.setAttribute('gradientTransform', ` translate (0.5 0.5) scale(${scale}) translate (-0.5 -0.5)`);
|
||||
|
||||
let o = document.getElementById(`o${i}`);
|
||||
let mo = document.getElementById(`mo${i}`);
|
||||
|
||||
o.setAttribute('transform', `scale(${scale})`);
|
||||
mo.setAttribute('transform', `scale(${scale})`);
|
||||
myLayer.setAttribute('fill', `url(#grad${i})`);
|
||||
|
||||
}
|
||||
|
||||
function svgChar(i,c) {
|
||||
let mySvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
// mySvg.setAttribute('width','128px');
|
||||
// mySvg.setAttribute('height','128px');
|
||||
mySvg.setAttribute('viewBox','-0.5 -0.5 1 1');
|
||||
mySvg.setAttribute('version','1.1');
|
||||
mySvg.setAttribute('id',`svg${i}`);
|
||||
mySvg.setAttribute('xmlns','http://www.w3.org/2000/svg');
|
||||
mySvg.setAttribute('xmlns:svg','http://www.w3.org/2000/svg');
|
||||
mySvg.setAttribute('height','100px');
|
||||
mySvg.setAttribute('width','100px');
|
||||
let myChar = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
myChar.setAttribute('x','0');
|
||||
myChar.setAttribute('y','0');
|
||||
myChar.setAttribute('fill','none');
|
||||
myChar.setAttribute('id',`text${i}`);
|
||||
myChar.setAttribute('text-anchor','middle');
|
||||
myChar.setAttribute('dominant-baseline','middle');
|
||||
let myText = document.createTextNode(c);
|
||||
myChar.appendChild(myText);
|
||||
mySvg.appendChild(myChar);
|
||||
thit.appendChild(mySvg);
|
||||
}
|
||||
|
||||
function doThit() {
|
||||
console.log(stringToConvert);
|
||||
thit.innerHTML = '';
|
||||
for (let i = 0; i < stringToConvert.length; i++) {
|
||||
svgChar(i,stringToConvert.charAt(i));
|
||||
}
|
||||
}
|
||||
|
||||
function doThas() {
|
||||
for (let i = 0; i < stringToConvert.length; i++) {
|
||||
cutOutChar(i);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function cutOutChar(i) {
|
||||
let mySvg = document.getElementById(`svg${i}`);
|
||||
let myChar = document.getElementById(`text${i}`);
|
||||
let myBBox = myChar.getBBox();
|
||||
let myRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
myRect.setAttribute('x',-1);
|
||||
myRect.setAttribute('y',-1);
|
||||
myRect.setAttribute('width',2);
|
||||
myRect.setAttribute('height',2);
|
||||
// myRect.setAttribute('x',myBBox.x);
|
||||
// myRect.setAttribute('y',myBBox.y);
|
||||
// myRect.setAttribute('width',myBBox.width);
|
||||
// myRect.setAttribute('height',myBBox.height);
|
||||
myRect.setAttribute('fill','#404040');
|
||||
let myRect2 = myRect.cloneNode();
|
||||
myRect.setAttribute('mask',`url(#mask${i})`);
|
||||
myRect2.setAttribute('fill','white');
|
||||
let myMask = document.createElementNS('http://www.w3.org/2000/svg', 'mask');
|
||||
myMask.setAttribute('id',`mask${i}`);
|
||||
myMask.setAttribute('mask-type','luminance');
|
||||
mySvg.innerHTML = '';
|
||||
myChar.setAttribute('fill','black');
|
||||
let myOutline = myChar.cloneNode(true);
|
||||
myOutline.setAttribute('fill','none');
|
||||
myOutline.setAttribute('stroke','black');
|
||||
myOutline.setAttribute('stroke-width','0.005');
|
||||
let myGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||
myMask.appendChild(myRect2);
|
||||
myMask.appendChild(myChar);
|
||||
myGroup.appendChild(myMask);
|
||||
myGroup.appendChild(myRect);
|
||||
myGroup.appendChild(myOutline);
|
||||
|
||||
|
||||
for (let j = nLayers-1; j > 0; j--) {
|
||||
let couleur = (j+1)/nLayers*1/5;
|
||||
let ratio = 1-(j)/nLayers;
|
||||
let myClone = myGroup.cloneNode(true);
|
||||
myClone.firstChild.setAttribute('id',`mask${i}_${j}`);
|
||||
myClone.childNodes[1].setAttribute('mask',`url(#mask${i}_${j})`);
|
||||
myClone.childNodes[1].setAttribute('fill',`${hslToHex(couleur,1,0.5)}`);
|
||||
myClone.setAttribute('transform',`translate(0 ${-(j+1)*0.0035}) scale(${ratio})`);
|
||||
mySvg.appendChild(myClone);
|
||||
}
|
||||
|
||||
mySvg.appendChild(myGroup);
|
||||
|
||||
}
|
||||
|
||||
function addLayers() {
|
||||
for (let i = 0; i < nLayers; i++) {
|
||||
let e = document.createElement("linearGradient");
|
||||
e.setAttribute('id', `grad${i}`);
|
||||
e.setAttribute('x1','0');
|
||||
e.setAttribute('y1', '0');
|
||||
e.setAttribute('x2', '1');
|
||||
e.setAttribute('y2', '0');
|
||||
// let e = document.createElement("radialGradient");
|
||||
// e.setAttribute('cx', '50%');
|
||||
// e.setAttribute('id', `grad${i}`);
|
||||
// e.setAttribute('cy','50%');
|
||||
// e.setAttribute('r', '50%');
|
||||
// e.setAttribute('fx', '50%');
|
||||
// e.setAttribute('fy', '50%');
|
||||
gradientsGroup.appendChild(e);
|
||||
}
|
||||
for (let i = nLayers - 1; i >= 0; i--) {
|
||||
let g = document.createElement("g");
|
||||
g.setAttribute('id', `group${i}`);
|
||||
g.setAttribute('shape-rendering','geometricPrecision')
|
||||
let r = document.createElement("rect");
|
||||
r.setAttribute('id', `rect${i}`);
|
||||
r.setAttribute('x',-1);
|
||||
r.setAttribute('y',-1);
|
||||
r.setAttribute('width',2);
|
||||
r.setAttribute('height',2);
|
||||
r.setAttribute('fill',"white");
|
||||
let o = document.createElement("path");
|
||||
o.setAttribute('id', `o${i}`);
|
||||
o.setAttribute('d',dpathO());
|
||||
o.setAttribute('fill',"black");
|
||||
let mo = document.createElement("path");
|
||||
mo.setAttribute('id', `mo${i}`);
|
||||
mo.setAttribute('d',dpathM());
|
||||
mo.setAttribute('stroke',"black");
|
||||
mo.setAttribute('stroke-width',`${sw}`);
|
||||
|
||||
// e.setAttribute('mask', `url(#mask${i})`);
|
||||
let m = document.createElement("mask");
|
||||
m.setAttribute('id', `mask${i}`);
|
||||
m.appendChild(r);
|
||||
m.appendChild(o);
|
||||
m.appendChild(mo);
|
||||
g.appendChild(m);
|
||||
|
||||
let l = document.createElement("rect");
|
||||
l.setAttribute('id', `layer${i}`);
|
||||
l.setAttribute('x',-1);
|
||||
l.setAttribute('y',-1);
|
||||
l.setAttribute('width',2);
|
||||
l.setAttribute('height',2);
|
||||
l.setAttribute('mask',`url(#mask${i})`);
|
||||
g.appendChild(l);
|
||||
myLogo.appendChild(g);
|
||||
}
|
||||
myLogo.innerHTML += '';
|
||||
redrawLayers();
|
||||
}
|
||||
|
||||
function redrawLayers() {
|
||||
mta = Math.atan2(-0.5+mty,-0.5+mtx)/(2*Math.PI)+0.5;
|
||||
mtr = Math.min(2* Math.sqrt(Math.pow(-0.5+mty,2)+Math.pow(-0.5+mtx,2)),1);
|
||||
for (let i = 0; i < nLayers; i++) {
|
||||
drawLayer(i);
|
||||
}
|
||||
}
|
||||
|
||||
function componentToHex(c) {
|
||||
var hex = c.toString(16);
|
||||
return hex.length == 1 ? "0" + hex : hex;
|
||||
}
|
||||
|
||||
function rgbToHex(r, g, b) {
|
||||
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||
}
|
||||
|
||||
function rgbaToHex(r, g, b, a) {
|
||||
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b) + componentToHex(a);
|
||||
}
|
||||
|
||||
function hslToHex(h, s, l) {
|
||||
var r, g, b;
|
||||
|
||||
if (s == 0) {
|
||||
r = g = b = 0; // achromatic
|
||||
} else {
|
||||
function hue2rgb(p, q, t) {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
|
||||
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
var p = 2 * l - q;
|
||||
|
||||
r = Math.round(hue2rgb(p, q, h + 1/3) * 255);
|
||||
g = Math.round(hue2rgb(p, q, h) * 255);
|
||||
b = Math.round(hue2rgb(p, q, h - 1/3) * 255);
|
||||
}
|
||||
|
||||
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||
}
|
||||
|
||||
document.addEventListener("wheel", (e) => {
|
||||
// e.preventDefault();
|
||||
scrollId += e.deltaY;
|
||||
if (scrollId <= 0){
|
||||
scrollId = 0;
|
||||
console.log("You reached 1ᵉʳ janvier 1970")
|
||||
}
|
||||
// redrawLayers();
|
||||
});
|
||||
|
||||
document.addEventListener("scroll", (e) => {
|
||||
// e.preventDefault();
|
||||
scrollId += e.deltaY;
|
||||
if (scrollId <= 0){
|
||||
scrollId = 0;
|
||||
console.log("You reached 1ᵉʳ janvier 1970")
|
||||
}
|
||||
// redrawLayers();
|
||||
});
|
||||
|
||||
ready(doThit());
|
||||
|
||||
doThas()
|
||||
|
||||
function letFlow() {
|
||||
scrollId += 50;
|
||||
// redrawLayers();
|
||||
}
|
||||
|
||||
setInterval(letFlow, 60);
|
||||
Reference in New Issue
Block a user