/** * Animates bezier-curve * * original code: * https://www.pjgalbraith.com/drawing-animated-curves-javascript/ * */ /** * Draws a splitted bezier-curve * * @param ctx The canvas context to draw to * @param x0 The x-coord of the start point * @param y0 The y-coord of the start point * @param x1 The x-coord of the control point * @param y1 The y-coord of the control point * @param x2 The x-coord of the end point * @param y2 The y-coord of the end point * @param t0 The start ratio of the splitted bezier from 0.0 to 1.0 * @param t1 The start ratio of the splitted bezier from 0.0 to 1.0 */ 'use strict'; function drawBezierSplit(ctx, x0, y0, x1, y1, x2, y2, t0, t1) { ctx.beginPath(); if( 0.0 == t0 && t1 == 1.0 ) { ctx.moveTo( x0, y0 ); ctx.quadraticCurveTo( x1, y1, x2, y2 ); } else if( t0 != t1 ) { var t00 = t0 * t0, t01 = 1.0 - t0, t02 = t01 * t01, t03 = 2.0 * t0 * t01; var nx0 = t02 * x0 + t03 * x1 + t00 * x2, ny0 = t02 * y0 + t03 * y1 + t00 * y2; t00 = t1 * t1; t01 = 1.0 - t1; t02 = t01 * t01; t03 = 2.0 * t1 * t01; var nx2 = t02 * x0 + t03 * x1 + t00 * x2, ny2 = t02 * y0 + t03 * y1 + t00 * y2; var nx1 = lerp ( lerp ( x0 , x1 , t0 ) , lerp ( x1 , x2 , t0 ) , t1 ), ny1 = lerp ( lerp ( y0 , y1 , t0 ) , lerp ( y1 , y2 , t0 ) , t1 ); ctx.moveTo( nx0, ny0 ); ctx.quadraticCurveTo( nx1, ny1, nx2, ny2 ); } ctx.stroke(); ctx.closePath(); } /** * Linearly interpolate between two numbers v0, v1 by t */ function lerp(v0, v1, t) { return ( 1.0 - t ) * v0 + t * v1; } function randVal(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } function randColor(){ return '#'+Math.floor(Math.random()*16777215).toString(16); } function updateCurves(ctx, curves, exp){ for(var i=0;i= 1){ exp.createExplosion(curves[i].x2,curves[i].y2,curves[i].color); curves.splice(i,1); } } } function drawCurves(ctx, curves){ for(var i=0;i0.5? 0:canvas.width; var dir = x === 0? 1:-1; return { x:x, y:randVal(20,canvas.height/2), dx:randVal(1,4), dir:dir, size:30, icon: targetStock[randVal(0,targetStock.length-1)] }; } function updateTargets(canvas,targets,score){ for(var i=0;i canvas.width+tar.size){ targets.splice(i, 1); score.miss++; } } } function drawTargets(ctx, targets){ for(var i=0;i=0;j--){ var tar = targets[j]; /* var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(tar.x,tar.y,tar.size,0,2*Math.PI); ctx.stroke(); ctx.closePath(); */ if (Math.sqrt((curve.x2 - tar.x) * (curve.x2 - tar.x) + (curve.y2 - tar.y) * (curve.y2 - tar.y)) <= tar.size && curve.progress == 1.0) { combo.x = tar.x; combo.y = tar.y; hits++; hitsScore+=tar.dx; exp.createExplosion(tar.x,tar.y,"orange"); exp.createExplosion(tar.x,tar.y,"yellow"); exp.createExplosion(tar.x,tar.y,"red"); exp.createExplosion(tar.x,tar.y,"grey"); targets.splice(j, 1); } } } score.hits+=hits; if(hits){ score.score+=Math.pow(hitsScore,hits); if(hits>1){ messages.push({ x:combo.x, y:combo.y, text:hits+"X Combo!!!", color:"red", font:"Times New Roman", size:20, ttl:5*1000*33 }); } } } if (!window.requestAnimationFrame) (function() { 'use strict'; function requestAnimationFrame(callback) { var currentTime = now(), delay = Math.max(0, 16 - (currentTime - lastTime)); lastTime = currentTime; return setTimeout(function () { lastTime = now(); callback(lastTime - startTime); }, delay); } function cancelAnimationFrame(id) { clearTimeout(id); } var raf = 'RequestAnimationFrame', caf = 'CancelAnimationFrame', webkit = 'webkit', moz = 'moz', now = Date.now || function () { return new Date().getTime(); }, startTime = now(), lastTime = startTime; window.requestAnimationFrame = window[moz + raf] || window[webkit + raf] || requestAnimationFrame; window.cancelAnimationFrame = window[moz + caf] || window[webkit + caf] || window[webkit + 'CancelRequestAnimationFrame'] || cancelAnimationFrame; })(); window.onload=function(){ var canvas = document.getElementById('canvas'); var selector = document.getElementById('selector'); canvas.width = window.innerWidth*0.95; canvas.height = window.innerHeight*0.8; var ctx = canvas.getContext('2d'); var exp = new Explosion(ctx); canvas.onclick = manual; canvas.ontouchmove = manual; selector.onchange = selectMode; var messages = []; var curves = []; var targets = []; var TARGET_LIMIT = 5; var SHOT_LIMIT = 5; var targetStock = ["😬","🤗","😈","💩","😘","😱","😂","😎","😗","😇","😭","😜","😛","😝","😤","😵","😁","😑","😚","😍","😠","😐","🙄"]; var score = { hits:0, miss:0, fired:0, score:0, spawned:0 } var drawInterval = null; var autoInterval = null; var gameInterval = null; function drawMessages(){ for(var i=messages.length-1;i>=0;i--){ var msg = messages[i]; ctx.font = msg.size+"px "+msg.font; ctx.fillStyle = msg.color; ctx.fillText(msg.text ,msg.x-20,msg.y); msg.ttl-=1000; if(msg.ttl<0) messages.splice(i,1); } } function drawScore(){ ctx.font = "10px Times New Roman"; ctx.fillStyle = 'white'; ctx.fillText("Score: "+score.score, 10,20); ctx.fillText("Hits: "+score.hits, 10,30); ctx.fillText("Fired: "+score.fired, 10,40); ctx.fillText("Missed: "+score.miss, 10,50); ctx.fillText("Hit %: "+Math.round((score.hits/score.fired)*100,2)+"%", 10,60); } function game(){ ctx.clearRect(0,0,canvas.width,canvas.height); exp.update(33); drawMessages(); drawCurves(ctx, curves); drawTargets(ctx, targets); updateTargets(canvas, targets, score); updateGame(targets, curves, exp, canvas, score, messages); updateCurves(ctx, curves, exp); if(targets.length < TARGET_LIMIT){ targets.push(spawnTarget(targetStock,canvas)); score.spawned++; } drawScore(); ctx.font = "80px Times New Roman"; ctx.fillText("🏰",canvas.width/2-40,canvas.height); gameInterval = requestAnimationFrame(game); } function manual(evt){ // draw line from bottom of the canvas to the point where the user clicked (line path is random and determined by random point (x1,y1)) evt.preventDefault(); if(selector.value !== "manual" && selector.value !== "game"){return;} if(selector.value === "game" && curves.length >= SHOT_LIMIT){return;} if(selector.value === "game"){score.fired++;} var pos=canvas.getBoundingClientRect(); if(evt.touches) var touch=evt.touches[0]; var x = (evt.clientX-pos.left) || (touch.clientX-pos.left); var y = (evt.clientY-pos.top) || (touch.clientY-pos.top); var x0 = randVal(0,canvas.width), y0 = canvas.height, x1 = randVal(0,canvas.width), y1 = randVal(0,canvas.height); var duration = selector.value === "game"? 1000:randVal(2000,5000); var size = selector.value === "game"? 5:randVal(2,15); x0 = selector.value === "game"? canvas.width/2:x0; curves.push({ x0:x0, y0:y0, x1:x1, y1:y1, x2:x, y2:y, duration:duration, color:randColor(), size:size, start:null, progress:0 }); } function selectMode(){ // sets the drawing mode, auto adds line every 0.5 second, manual add line each click on the canvas if(autoInterval){ clearInterval(autoInterval); autoInterval = null; } if(gameInterval){ cancelAnimationFrame(gameInterval); gameInterval = null; } if(drawInterval){ cancelAnimationFrame(drawInterval); drawInterval = null; } if(selector.value === "auto"){ autoInterval = setInterval(auto,200); drawInterval = requestAnimationFrame(draw); } if(selector.value === "auto2"){ autoInterval = setInterval(auto2,200); drawInterval = requestAnimationFrame(draw); } else if(selector.value === "manual"){ drawInterval = requestAnimationFrame(draw); } else if(selector.value === "game"){ gameInterval = requestAnimationFrame(game); } } function auto(){ // generate randome points (x0,y0) always on bottom of the canvas, the rest are random var x0 = randVal(0,canvas.width), y0 = canvas.height, x1 = randVal(-100,canvas.width+100), y1 = randVal(-100,canvas.height), x2 = randVal(0,canvas.width), y2 = randVal(0,canvas.height); curves.push({ x0:x0, y0:y0, x1:x1, y1:y1, x2:x2, y2:y2, duration:randVal(2000,5000), color:randColor(), size:randVal(1,15), start:null, progress:0 }); } var auto2X = 0; function auto2(){ // generate randome points (x0,y0) always on bottom of the canvas, the rest are random var x0 = canvas.width/2, y0 = canvas.height, x1 = auto2X%(canvas.width), y1 = -300, x2 = auto2X%(canvas.width), y2 = canvas.height; curves.push({ x0:x0, y0:y0, x1:x1, y1:y1, x2:x2, y2:y2, duration:5000, color:randColor(), size:5, start:null, progress:0 }); auto2X+=20; } function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); exp.update(33); drawCurves(ctx, curves); updateCurves(ctx, curves, exp); if(Math.random()<0.5 && document.getElementById("chkExplosions").checked){ exp.createExplosion(randVal(0,canvas.width),randVal(0,canvas.height),randColor()); } drawInterval = requestAnimationFrame(draw); } // drawInterval = setInterval(draw,33); gameInterval = requestAnimationFrame(game); // var autoInterval = setInterval(auto2,400); };

Animated Bezier Curve (+Mini-Game)