diff --git a/index.html b/index.html new file mode 100644 index 0000000..8462eb3 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + +
+THIT +
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b371a26 --- /dev/null +++ b/styles.css @@ -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; +} diff --git a/thit.js b/thit.js new file mode 100644 index 0000000..688a90e --- /dev/null +++ b/thit.js @@ -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 = ``; + // 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); \ No newline at end of file