/* trigonometry, ellipsis: https://math.stackexchange.com/a/1123448 */ window.onload = () => { let animationState = 1; const r = document.querySelector(':root'); const cnv = document.getElementById('cnv'); const ctx = cnv.getContext('2d'); cnv.width = window.innerHeight < window.innerWidth ? window.innerHeight*0.9: window.innerWidth*0.9; cnv.height = cnv.width; function rotateVertex(ctrX, ctrY, x, y, rad) { const x2 = Math.cos(rad) * (x-ctrX) - Math.sin(rad) * (y-ctrY) + ctrX; const y2 = Math.sin(rad) * (x-ctrX) + Math.cos(rad) * (y-ctrY) + ctrY; return [x2, y2]; } function dist2d(x0, y0, x1, y1) { return Math.sqrt((Math.pow(x0 - x1, 2)) + (Math.pow(y0 - y1, 2))); } function sampleInt(lower, upper) { return parseInt(Math.random() * (upper - lower) + lower); } class Gold { constructor(x, y, rX, rY) { this.x = x; this.y = y; this.rX = rX; this.rY = rY; this.state = 0; this.monsterMouth = 1.2; } #drawGuest(ctx) { // face ctx.fillStyle = 'ivory'; ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.ellipse(this.x, this.y, this.rX, this.rY, 0, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); // eyes ctx.fillStyle = 'black'; ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.ellipse(this.x+this.rX*0.5, this.y-this.rY*0.2, this.rX*0.2, this.rY*0.07, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x-this.rX*0.5, this.y-this.rY*0.2, this.rX*0.2, this.rY*0.07, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); // mouth ctx.beginPath(); ctx.ellipse(this.x, this.y+this.rY*0.6, this.rX*0.4, this.rY*0.1, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); // marks ctx.fillStyle = '#dec0de'; ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.moveTo(this.x+this.rX*0.45, this.y-this.rY*0.65); ctx.lineTo(this.x+this.rX*0.5+this.rX*0.1, this.y-this.rY*0.65+this.rY*0.3); ctx.lineTo(this.x+this.rX*0.5-this.rX*0.1, this.y-this.rY*0.65+this.rY*0.3); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x-this.rX*0.45, this.y-this.rY*0.65); ctx.lineTo(this.x-this.rX*0.5+this.rX*0.1, this.y-this.rY*0.65+this.rY*0.3); ctx.lineTo(this.x-this.rX*0.5-this.rX*0.1, this.y-this.rY*0.65+this.rY*0.3); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x+this.rX*0.45, this.y+this.rY*0.5); ctx.lineTo(this.x+this.rX*0.5+this.rX*0.1, this.y-this.rY*0.25+this.rY*0.3); ctx.lineTo(this.x+this.rX*0.5-this.rX*0.1, this.y-this.rY*0.25+this.rY*0.3); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x-this.rX*0.45, this.y+this.rY*0.5); ctx.lineTo(this.x-this.rX*0.5+this.rX*0.1, this.y-this.rY*0.25+this.rY*0.3); ctx.lineTo(this.x-this.rX*0.5-this.rX*0.1, this.y-this.rY*0.25+this.rY*0.3); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x, this.y+this.rY*0.77, this.rX*0.2, this.rY*0.02, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x+this.rX*0.5, this.y-this.rY*0.05, this.rX*0.15, this.rY*0.02, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x-this.rX*0.5, this.y-this.rY*0.05, this.rX*0.15, this.rY*0.02, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); } #drawMonster(ctx) { // mouth /*ctx.fillStyle = '#4f0015'; ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.arc(this.x, this.y, this.rX, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); // teeth ctx.fillStyle = 'ivory'; ctx.strokeStyle = ctx.fillStyle; let nn = 18, x, y, r = this.rX*0.15, rr; let st = 0, rad = (360/nn) * (Math.PI/180) ; for (let i = 0; i < nn; i++) { x = (this.rX-r)*Math.sin(st) + this.x; y = (this.rX-r)*Math.cos(st) + this.y; rr = -(360/nn)*i * (Math.PI/180); if ((i < 4) || ((i > 5) && (i < 13)) || (i > 14)) { ctx.beginPath(); ctx.moveTo(...rotateVertex(x, y, (x-r/1.5), (y-r/2), rr)); ctx.lineTo(...rotateVertex(x, y, (x+r/1.5), (y-r/2), rr)); ctx.lineTo(...rotateVertex(x, y, (x+r/2), (y+r/2), rr)); ctx.lineTo(...rotateVertex(x, y, (x-r/2), (y+r/2), rr)); ctx.closePath(); ctx.stroke(); ctx.fill(); } st += rad; }*/ // eyes ctx.fillStyle = 'ivory'; ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.ellipse(this.x+this.rX*0.6, this.y-this.rY, this.rX*0.3, this.rY*0.1, -40*(Math.PI/180), 0, 2*Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x-this.rX*0.6, this.y-this.rY, this.rX*0.3, this.rY*0.1, 40*(Math.PI/180), 0, 2*Math.PI); ctx.stroke(); ctx.fill(); ctx.fillStyle = '#4f0015'; ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.ellipse(this.x, this.y, this.rX*1.1, this.rY*1.1*0.5*this.monsterMouth, 0, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); // teeth ctx.fillStyle = 'ivory'; ctx.strokeStyle = ctx.fillStyle; let nn = 18, x, y, r = this.rX*0.15, rr; let st = 0, rad = (360/nn) * (Math.PI/180) ; for (let i = 0; i < nn; i++) { x = (this.rX)*Math.sin(st) + this.x; y = (this.rY*0.5*this.monsterMouth)*Math.cos(st) + this.y; rr = -(360/nn)*i * (Math.PI/180); rr = rr + Math.atan( ((this.rX-this.rY)*Math.tan(rr)) / (this.rY + this.rX*Math.atan(rr)**2)); if ((i < 4) || ((i > 5) && (i < 13)) || (i > 14)) { ctx.beginPath(); ctx.moveTo(...rotateVertex(x, y, (x-r/2), (y-r/3), rr)); ctx.lineTo(...rotateVertex(x, y, (x+r/2), (y-r/3), rr)); ctx.lineTo(...rotateVertex(x, y, (x+r/3), (y+r/3), rr)); ctx.lineTo(...rotateVertex(x, y, (x-r/3), (y+r/3), rr)); //ctx.rect(x, y, 10, 10); ctx.closePath(); ctx.stroke(); ctx.fill(); } st += rad; } } draw(ctx) { switch (this.state) { case 0: this.#drawGuest(ctx); break; case 1: this.#drawMonster(ctx); break; } } } const token = { r: cnv.width*0.07, x: 0, y: 0, lowerLim: 0, upperLim: cnv.width, n: 0, N: 13-1, sample: function() { this.x = sampleInt(this.lowerLim+token.r, this.upperLim-token.r); this.y = sampleInt(this.lowerLim+token.r, this.upperLim-token.r); }, draw: function(ctx) { this.sample(); ctx.fillStyle = getComputedStyle(r).getPropertyValue('--ba17Col'); ctx.strokeStyle = ctx.fillStyle; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI); ctx.stroke(); ctx.fill(); } } const alias = [67,114,101,97,116,101,100,32,98,121,32,76,105,115,97,55357,56368,46,32,84,104,97,110,107,115,32,102,111,114,32,115,116,117,100,121,105,110,103,32,116,104,101,32,99,111,100,101,33,55356,57195]; // init const gold = new Gold(cnv.width*0.5, cnv.height*0.5, cnv.width*0.3, cnv.height*0.45, true); gold.draw(ctx); token.draw(ctx); cnv.addEventListener('click', function(ev) { let [px, py] = [ev.pageX - cnv.getBoundingClientRect().left, ev.pageY - cnv.getBoundingClientRect().top]; if (animationState == 1) { if (token.n < token.N) { if (dist2d(px, py, token.x, token.y) <= token.r) { token.n++; r.style.setProperty('--blurPx', `${token.n}px`); ctx.clearRect(0, 0, cnv.width, cnv.height); if (token.n == 1) { //document.getElementsByClassName('color')[0].classList.remove('color'); document.getElementsByTagName('h1')[0].style.visibility = 'hidden'; } if (token.n >= token.N) animationState = 2; gold.draw(ctx); token.draw(ctx); } } return; } else if (animationState == 2) { ctx.clearRect(0, 0, cnv.width, cnv.height); r.style.setProperty('--blurPx', `${0}px`); gold.state = 1; gold.y = cnv.height*0.6; gold.draw(ctx); animationState = 3; return; } else if (animationState == 3) { animationState = 4; let id = setInterval(function() { ctx.clearRect(0, 0, cnv.width, cnv.height); gold.monsterMouth -= 0.2; if (gold.monsterMouth <= 0.4) clearInterval(id); gold.draw(ctx); }, 17); } }); }

ClickBa17Color