javascript - multiple random images in let it snow plug-in -
i've been playing jason brown's let snow plug-in. code accommodates single custom image, , i've been trying figure out how change code accommodates multiple custom images within random range.
!function($){ var defaults = { speed: 0, interaction: true, size: 2, count: 200, opacity: 0, color: "#ffffff", windpower: 0, image: false }; $.fn.let_it_snow = function(options){ var settings = $.extend({}, defaults, options), el = $(this), flakes = [], canvas = el.get(0), ctx = canvas.getcontext("2d"), flakecount = settings.count, mx = -100, = -100; canvas.width = window.innerwidth; canvas.height = window.innerheight; (function() { var requestanimationframe = window.requestanimationframe || window.mozrequestanimationframe || window.webkitrequestanimationframe || window.msrequestanimationframe || function(callback) { window.settimeout(callback, 1000 / 60); }; window.requestanimationframe = requestanimationframe; })(); function snow() { ctx.clearrect(0, 0, canvas.width, canvas.height); (var = 0; < flakecount; i++) { var flake = flakes[i], x = mx, y = my, mindist = 100, x2 = flake.x, y2 = flake.y; var dist = math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < mindist) { var force = mindist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltav = force / 2; flake.velx -= deltav * xcomp; flake.vely -= deltav * ycomp; } else { flake.velx *= .98; if (flake.vely <= flake.speed) { flake.vely = flake.speed } switch (settings.windpower) { case false: flake.velx += math.cos(flake.step += .05) * flake.stepsize; break; case 0: flake.velx += math.cos(flake.step += .05) * flake.stepsize; break; default: flake.velx += 0.01 + (settings.windpower/100); } } var s = settings.color; var patt = /^#([\da-fa-f]{2})([\da-fa-f]{2})([\da-fa-f]{2})$/; var matches = patt.exec(s); var rgb = parseint(matches[1], 16)+","+parseint(matches[2], 16)+","+parseint(matches[3], 16); flake.y += flake.vely; flake.x += flake.velx; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } if (settings.image == false) { ctx.fillstyle = "rgba(" + rgb + "," + flake.opacity + ")" ctx.beginpath(); ctx.arc(flake.x, flake.y, flake.size, 0, math.pi * 2); ctx.fill(); } else { ctx.drawimage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2); } } requestanimationframe(snow); }; function reset(flake) { if (settings.windpower == false || settings.windpower == 0) { flake.x = math.floor(math.random() * canvas.width); flake.y = 0; } else { if (settings.windpower > 0) { var xarray = array(math.floor(math.random() * canvas.width), 0); var yarray = array(0, math.floor(math.random() * canvas.height)) var allarray = array(xarray, yarray) var selected_array = allarray[math.floor(math.random()*allarray.length)]; flake.x = selected_array[0]; flake.y = selected_array[1]; } else { var xarray = array(math.floor(math.random() * canvas.width),0); var yarray = array(canvas.width, math.floor(math.random() * canvas.height)) var allarray = array(xarray, yarray) var selected_array = allarray[math.floor(math.random()*allarray.length)]; flake.x = selected_array[0]; flake.y = selected_array[1]; } } flake.size = (math.random() * 3) + settings.size; flake.speed = (math.random() * 1) + settings.speed; flake.vely = flake.speed; flake.velx = 0; flake.opacity = (math.random() * 0.5) + settings.opacity; } function init() { (var = 0; < flakecount; i++) { var x = math.floor(math.random() * canvas.width), y = math.floor(math.random() * canvas.height), size = (math.random() * 3) + settings.size, speed = (math.random() * 1) + settings.speed, opacity = (math.random() * 0.5) + settings.opacity; flakes.push({ speed: speed, vely: speed, velx: 0, x: x, y: y, size: size, stepsize: (math.random()) / 30, step: 0, angle: 180, opacity: opacity }); } snow(); } if (settings.image != false) { $("<img src='"+settings.image+"' style='display: none' id='lis_flake'>").prependto("body") } init(); $(window).resize(function() { if(this.resizeto) cleartimeout(this.resizeto); this.resizeto = settimeout(function() { el2 = el.clone(); el2.insertafter(el); el.remove(); el2.let_it_snow(settings); }, 200); }); if (settings.interaction == true) { canvas.addeventlistener("mousemove", function(e) { mx = e.clientx, = e.clienty }); }}}(window.jquery); right @ top of code, in defaults properties, point url of image. below i've put in, chooses between image1.jpeg , image2.jpeg
image: "img/image'+math.floor((math.random() * 2) + 1)+'.jpeg"; however, when "snowflakes" respawn, image stays same instead of choosing random number again. have change when snowflake created, chooses random image , becomes it?
i hope questions clear, let me know if need more clarity. i'm new j-script, appreciated.
the plugin author loads single custom image hidden element with
if (settings.image != false) { $("<img src='"+settings.image+"' style='display: none' id='lis_flake'>").prependto("body") } and loads snowflakes this
ctx.drawimage($("img#lis_flake").get(0) this solution hasn't been tested, if willing hack plugin bit, potentially make following changes use 2 optional images:
1) add before init(); function call. adds hidden image settings.image2.
if (settings.image2) { $("<img src='"+settings.image2+"' style='display: none' id='lis_flake2'>").prependto("body") } 2) modify function init() with
flakes.push({ // create new property called 'imgnum' hold either "" or "2"; imgnum: (settings.image2 && math.floor(math.random() * 2) === 0 ? "2" : ""), // rest of code ... speed: speed, 3) change
ctx.drawimage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2); to
ctx.drawimage($("img#lis_flake" + flake.imgnum).get(0), flake.x, flake.y, flake.size * 2, flake.size * 2); to chose image based on flake.imgnum set randomly in init().
4) change options pass plugin so:
options = { // other options image: "img/image1.jpeg", image2: "img/image2.jpeg", // other options } these changes should allow plugin still work if image2 isn't set.
Comments
Post a Comment