Water ripple effect.

Developer
Wenting Zhang
Size
2,746 Kb
Views
16,192
  1. Water ripple effect. Previews
  2. Water ripple effect. HTML Codes
  3. Water ripple effect. JS Codes

How do I make an water ripple effect.?

What is a water ripple effect.? How do you make a water ripple effect.? This script and codes were developed by Wenting Zhang on 14 November 2022, Monday.

Water ripple effect. Previews
IQ Test

Water ripple effect. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Water ripple effect.</title>
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Water ripple effect. - Script Codes JS Codes

/** * Water ripple effect. * Original code (Java) by Neil Wallis * @link http://www.neilwallis.com/java/water.html * * @author Sergey Chikuyonok ([email protected]) * @link http://chikuyonok.ru */
(function(){ var canvas = document.getElementById('c'), /** @type {CanvasRenderingContext2D} */ ctx = canvas.getContext('2d'), width = 400, height = 400, half_width = width >> 1, half_height = height >> 1, size = width * (height + 2) * 2, delay = 30, oldind = width, newind = width * (height + 3), riprad = 3, ripplemap = [], last_map = [], ripple, texture, line_width = 20, step = line_width * 2, count = height / line_width; canvas.width = width; canvas.height = height; /* * Water ripple demo can work with any bitmap image * (see example here: http://media.chikuyonok.ru/ripple/) * But I need to draw simple artwork to bypass 1k limitation */ with (ctx) { fillStyle = '#a2ddf8'; fillRect(0, 0, width, height); fillStyle = '#07b'; save(); rotate(-0.785); for (var i = 0; i < count; i++) { fillRect(-width, i * step, width * 3, line_width); } restore(); } texture = ctx.getImageData(0, 0, width, height); ripple = ctx.getImageData(0, 0, width, height); for (var i = 0; i < size; i++) { last_map[i] = ripplemap[i] = 0; } /** * Main loop */ function run() { newframe(); ctx.putImageData(ripple, 0, 0); } /** * Disturb water at specified point */ function disturb(dx, dy) { dx <<= 0; dy <<= 0; for (var j = dy - riprad; j < dy + riprad; j++) { for (var k = dx - riprad; k < dx + riprad; k++) { ripplemap[oldind + (j * width) + k] += 128; } } } /** * Generates new ripples */ function newframe() { var a, b, data, cur_pixel, new_pixel, old_data; var t = oldind; oldind = newind; newind = t; var i = 0; // create local copies of variables to decrease // scope lookup time in Firefox var _width = width, _height = height, _ripplemap = ripplemap, _last_map = last_map, _rd = ripple.data, _td = texture.data, _half_width = half_width, _half_height = half_height; for (var y = 0; y < _height; y++) { for (var x = 0; x < _width; x++) { var _newind = newind + i, _mapind = oldind + i; data = ( _ripplemap[_mapind - _width] + _ripplemap[_mapind + _width] + _ripplemap[_mapind - 1] + _ripplemap[_mapind + 1]) >> 1; data -= _ripplemap[_newind]; data -= data >> 5; _ripplemap[_newind] = data; //where data=0 then still, where data>0 then wave data = 1024 - data; old_data = _last_map[i]; _last_map[i] = data; if (old_data != data) { //offsets a = (((x - _half_width) * data / 1024) << 0) + _half_width; b = (((y - _half_height) * data / 1024) << 0) + _half_height; //bounds check if (a >= _width) a = _width - 1; if (a < 0) a = 0; if (b >= _height) b = _height - 1; if (b < 0) b = 0; new_pixel = (a + (b * _width)) * 4; cur_pixel = i * 4; _rd[cur_pixel] = _td[new_pixel]; _rd[cur_pixel + 1] = _td[new_pixel + 1]; _rd[cur_pixel + 2] = _td[new_pixel + 2]; } ++i; } } } canvas.onmousemove = function(/* Event */ evt) { disturb(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY); }; setInterval(run, delay); // generate random ripples var rnd = Math.random; setInterval(function() { disturb(rnd() * width, rnd() * height); }, 700);
})();
Water ripple effect. - Script Codes
Water ripple effect. - Script Codes
Home Page Home
Developer Wenting Zhang
Username wentin
Uploaded November 14, 2022
Rating 3
Size 2,746 Kb
Views 16,192
Do you need developer help for Water ripple effect.?

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!

Wenting Zhang (wentin) Script Codes
Name
100 days of research
Angular directive poc
Fibonacci output
Profession.is type transitions
P5.js Tail
Color drop animation for profession.is
ResponsifyJS demo
A Pen by Wenting Zhang
Responsify images
Shaking mustache
Create amazing web content 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!