Canvas snake animation random bezier curve looped
How do I make an canvas snake animation random bezier curve looped?
What is a canvas snake animation random bezier curve looped? How do you make a canvas snake animation random bezier curve looped? This script and codes were developed by Sladix on 09 December 2022, Friday.
Canvas snake animation random bezier curve looped - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas snake animation random bezier curve looped</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="title">
<canvas id="myCanvas"></canvas>
</div> <script src="js/index.js"></script>
</body>
</html>
Canvas snake animation random bezier curve looped - Script Codes CSS Codes
body{ background:black;
}
#title
{ height: 100%; width:100%;
}
Canvas snake animation random bezier curve looped - Script Codes JS Codes
function Vector2(x,y)
{ this.x = x; this.y = y;
}
function getRandomInt (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}
function Track(position)
{ this.position = position; this.draw = function(context){ context.beginPath(); context.rect(this.position.x, this.position.y, 20, 20); context.fillStyle = '#43ED00'; context.fill(); context.lineWidth = 1; context.strokeStyle = '#111'; context.stroke(); }
}
var startTime;
window.onload = function(){ document.getElementById('myCanvas').width = document.getElementById('title').offsetWidth; document.getElementById('myCanvas').height = document.getElementById('title').offsetHeight; setTimeout(function() { startTime = (new Date()).getTime(); animate(startTime); }, 1000);
}
var timer = 0;
var totalLoopTime = 10000;
window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };
})();
var path = [];
var ttd = [];
function animate(startTime) { if(ttd.length>100) ttd.shift(); var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // update timer = (new Date()).getTime() - startTime; if(path.length == 0) path = generateRandomPoints(canvas); else { var nexPoint = getNextCoordinates(startTime, totalLoopTime, path); ttd.push(new Track(nexPoint)); } // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw stuff for (var i = ttd.length - 1; i >= 0; i--) { ttd[i].draw(context); }; // request new frame requestAnimFrame(function() { animate(startTime); });
}
function getTimer(){ return timer;
}
function generateRandomPoints(context)
{ var resultingVector = []; for(var i = 0; i < 6; i++) { var x = getRandomInt(0,context.offsetWidth); var y = getRandomInt(0,context.offsetHeight); var currentPoint3D = new Vector2(x, y); resultingVector.push(currentPoint3D); } return resultingVector;
}
function getNextCoordinates(loopStartTime, totalLoopTime, path) { var resultingPoint = new Vector2(); var passedTime = timer; //Total passed ratio var passedRatio = passedTime / totalLoopTime; var totalSegments = path.length / 3; var totalTimePerSegment = totalLoopTime / totalSegments; //So it can loop forever while (passedRatio > 1) { passedRatio -= 1; } //Let's find our current bezier curve segment number var currentSegment = Math.floor( passedRatio * totalSegments); var currentSegmentRatio = (passedTime - currentSegment * totalTimePerSegment) / totalTimePerSegment; //It can be optimized here while (currentSegmentRatio > 1) { currentSegmentRatio -= 1; } var startingIndex = currentSegment * 3; if(startingIndex == path.length) startingIndex = 0; //our four path vertices var point0 = path[startingIndex]; var point1 = path[startingIndex + 1]; var point2 = path[startingIndex + 2]; //if it's a last segment, we need to "connect" to the first vertex if (startingIndex + 3 >= path.length) { var point3 = path[0]; } else { point3 = path[startingIndex + 3]; } //At last, we find our coordinates if(typeof point0 == "undefined") { console.log(startingIndex); console.log(loopStartTime); console.log(path); } var tempRatio = 1 - currentSegmentRatio; resultingPoint.x = tempRatio * tempRatio * tempRatio * point0.x + 3 * tempRatio * tempRatio * currentSegmentRatio * point1.x + 3 * tempRatio * currentSegmentRatio * currentSegmentRatio * point2.x + currentSegmentRatio * currentSegmentRatio * currentSegmentRatio * point3.x; resultingPoint.y = tempRatio * tempRatio * tempRatio * point0.y + 3 * tempRatio * tempRatio * currentSegmentRatio * point1.y + 3 * tempRatio * currentSegmentRatio * currentSegmentRatio * point2.y + currentSegmentRatio * currentSegmentRatio * currentSegmentRatio * point3.y; return resultingPoint; }
Developer | Sladix |
Username | Sladix |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,882 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Text reveal test | 2,423 Kb |
Canvas snake animation random bezier curve looped | 2,882 Kb |
Fibonacci color test | 2,310 Kb |
Agent Chaos | 4,709 Kb |
HMD | 8,249 Kb |
Visualizer tests | 3,361 Kb |
CSS Letter animations | 2,116 Kb |
Responsive Stack slider | 3,527 Kb |
A Pen by Sladix | 3,349 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Drop Cap | Gsaiki | 1,571 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Toolbar | Onsen | 5,414 Kb |
Resize image | Happyhj | 1,892 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!