The Birth of a Sine Wave
How do I make an the birth of a sine wave?
Animation that creates a sine wave.It has been done many times before, but I had to do my own version.. What is a the birth of a sine wave? How do you make a the birth of a sine wave? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.
The Birth of a Sine Wave - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Birth of a Sine Wave</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="controls" class="float"> <span title="Speed">Speed: </span><input type="range" id="speedSlider"> <span title="Radius">Radius: </span><input type="range" id="radiusSlider">
</div>
<canvas id="c"></canvas> <script src="js/index.js"></script>
</body>
</html>
The Birth of a Sine Wave - Script Codes CSS Codes
html, body { color: white; background-color: black; width: 100%; height: 100%; margin: 0; overflow: hidden;
}
@media (max-width: 600px) { #controls { display: none; }
}
span { font-size: x-large; margin-left: 10px;
}
.float { position: absolute;
}
The Birth of a Sine Wave - Script Codes JS Codes
/* Johan Karlsson (DonKarlssonSan)
*/
(function () { var canvas = document.getElementById("c"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); var points = []; var x, y; var angle = 0; var r = 100; var leftMargin = 10; var speed = 0.02; ctx.strokeStyle = "white"; ctx.fillStyle = "black"; function draw() { ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(r + leftMargin, canvas.height/2, r, 0, Math.PI*2, true); ctx.stroke(); x = Math.cos(angle) * r + r + leftMargin; y = Math.sin(angle) * r + canvas.height/2; points.push(y); // Ticking bomb, it just grows... ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI*2, true); ctx.fill(); for(var xx = 0; xx < points.length; ++xx) { ctx.lineTo(r * 2 + leftMargin +xx, points[points.length-xx]); } ctx.stroke(); angle += speed; window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw); var speedSlider = document.getElementById("speedSlider"); speedSlider.step = 0.001; speedSlider.min = 0.001; speedSlider.max = 0.3; speedSlider.value = speed; speedSlider.addEventListener("change", function () { speed = parseFloat(this.value); }); var radiusSlider = document.getElementById("radiusSlider"); radiusSlider.max = 300; radiusSlider.value = r; radiusSlider.addEventListener("change", function () { r = parseInt(this.value); }); function resize () { if(canvas.width != window.innerWidth) { canvas.width = window.innerWidth; } if(canvas.height != window.innerHeight) { canvas.height = window.innerHeight; } ctx.strokeStyle = "white"; ctx.fillStyle = "black"; } function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; var debouncedResize = debounce(resize, 250); window.addEventListener("resize", debouncedResize, false);
})();
Developer | Johan Karlsson |
Username | DonKarlssonSan |
Uploaded | July 26, 2022 |
Rating | 4.5 |
Size | 2,607 Kb |
Views | 38,456 |
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 |
Phone Case Pattern Animation | 2,774 Kb |
Moss by Brownian Motion | 2,792 Kb |
Circuit Board Warper | 4,057 Kb |
Photobooth - Webcam with realtime CSS filters. | 4,390 Kb |
Cash by Brownian Motion | 3,530 Kb |
Fireflies | 2,572 Kb |
Sine Perlin | 5,654 Kb |
Text by Brownian Motion | 3,182 Kb |
Particle Text | 5,685 Kb |
Portrait by Brownian Motion | 3,612 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 |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Button fills | Zubfatal | 5,205 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Animated bar chart | CreativePunch | 3,124 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!