Animated rainbow wave on canvas

Developer
Chad Scira
Size
2,777 Kb
Views
91,080
  1. Animated rainbow wave on canvas Previews
  2. Animated rainbow wave on canvas HTML Codes
  3. Animated rainbow wave on canvas CSS Codes
  4. Animated rainbow wave on canvas JS Codes

How do I make an animated rainbow wave on canvas?

My 4th canvas animation pen.. What is a animated rainbow wave on canvas? How do you make a animated rainbow wave on canvas? This script and codes were developed by Chad Scira on 27 August 2022, Saturday.

Animated rainbow wave on canvas Previews
IQ Test

Animated rainbow wave on canvas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated rainbow wave on canvas</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { overflow: hidden; margin: 0; width: 100%; height: 100%;
}
.c { background: black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas class='c'>animated rainbow wave</canvas> <script src="js/index.js"></script>
</body>
</html>

Animated rainbow wave on canvas - Script Codes CSS Codes

* { overflow: hidden; margin: 0; width: 100%; height: 100%;
}
.c { background: black;
}

Animated rainbow wave on canvas - Script Codes JS Codes

var c = document.querySelector('.c') /* canvas element */, w /* canvas width */, h /* canvas height */, ctx = c.getContext('2d') /* canvas context */, /* previous & current coordinates */ x0, y0, x, y, t = 0, t_step = 1/20, tmp, /* just me being lazy */ exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, PI = Math.PI, sin = Math.sin, cos = Math.cos;
/* FUNCTIONS */
/* a random number between min & max */
var rand = function(max, min) { var b = (max === 0 || max) ? max : 1, a = min || 0; return a + (b - a)*Math.random();
};
var trimUnit = function(input_str, unit) { return parseInt(input_str.split(unit)[0], 10);
};
var initCanvas = function() { var s = getComputedStyle(c); w = c.width = trimUnit(s.width, 'px'); h = c.height = trimUnit(s.height, 'px');
};
var wave = function() { x0 = -1, y0 = h/2; ctx.clearRect(0, 0, w, h); tmp = pow(t, 1.75)/4; /* keep computation out of loop */ for(x = 0; x < w; x = x + 3) { y = 9*sqrt(x)*sin(x/23/PI + t/3 + sin(x/29 + t)) + 32*sin(t)*cos(x/19 + t/7) + 16*cos(t)*sin(sqrt(x) + rand(3, 2)*tmp) + h/2; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x, y); ctx.lineWidth = 2; ctx.strokeStyle = 'hsl(' + (2*x/w + t)*180 + ', 100%, 65%)'; ctx.stroke(); x0 = x; y0 = y; } t += t_step; requestAnimationFrame(wave);
};
/* START THE MADNESS */
setTimeout(function() { initCanvas(); wave(); /* fix looks on resize */ addEventListener('resize', initCanvas, false);
}, 15);
Animated rainbow wave on canvas - Script Codes
Animated rainbow wave on canvas - Script Codes
Home Page Home
Developer Chad Scira
Username icodeforlove
Uploaded August 27, 2022
Rating 3
Size 2,777 Kb
Views 91,080
Do you need developer help for Animated rainbow wave on canvas?

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!

Chad Scira (icodeforlove) Script Codes
Name
CSS Voxel Animation
Delayed Follow
Canvas Text Vortex
Text Vortex
Client-side nudity detection
8bit Animation
A Pen by Chad Scira
FontAwesome
Animated 3D Text
Raw Request to Requester Request
Create amazing sales emails with AI!

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!