mehmet07 Posted January 18, 2014 Share Posted January 18, 2014 Hi, How do I add water effect my project. to Example http://jsfiddle.net/esteewhy/5Ht3b/6/ Link to comment Share on other sites More sharing options...
Sherzod Posted January 21, 2014 Share Posted January 21, 2014 Hi mehmet pak. Well, a simple example, you can like this: 1. Add the form UniHTMLFrame1. 2. UniHTMLFrame1.html add <canvas id="mycanvas" width="400" height="400"> </canvas> 3. UniHTMLFrame1.AfterScript add (function(){ var canvas = document.getElementById('mycanvas'), /** @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); })(); Sincerely... Link to comment Share on other sites More sharing options...
mehmet07 Posted January 21, 2014 Author Share Posted January 21, 2014 Thanks on replying. is working. Link to comment Share on other sites More sharing options...
herculanojs Posted May 20, 2016 Share Posted May 20, 2016 You can add an image to the background? Link to comment Share on other sites More sharing options...
mmurgas Posted May 24, 2016 Share Posted May 24, 2016 Good Link to comment Share on other sites More sharing options...
herculanojs Posted May 24, 2016 Share Posted May 24, 2016 Hi mehmet pak. Well, a simple example, you can like this: 1. Add the form UniHTMLFrame1. 2. UniHTMLFrame1.html add <canvas id="mycanvas" width="400" height="400"> </canvas> 3. UniHTMLFrame1.AfterScript add (function(){ var canvas = document.getElementById('mycanvas'), /** @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); })(); Sincerely... how do you put a background image ?? Link to comment Share on other sites More sharing options...
topajin Posted May 27, 2016 Share Posted May 27, 2016 very good thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now