KOMPOOS.NL

smoke effect - javascript

home » manuals » javascript » smoke.html

sitemap

voorbeeld smoke effect javascript

uitleg javascript smoke script

De smoke procedure is valide html5 en CSS, en valideert ook onder de strenge norm van JSLint voor wat betreft het javascript. Ik denk dat het duidelijk is dat in stok-oude (IE)browsers er geen rook te bespeuren valt: maar in alle moderne browsers (de laatste versies) vliegen de vonken van de procedure af...
Plaats de regels html-code en het javascript in de body-sectie van jouw pagina om het smoke effect óók op jouw website ten toon te stellen.

html-code voor het smoke effect

<img alt="smoke effect" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAIg0lEQVRIicXXu64lN3YG4J+LiyxWFWvvOre+t6DEjpQ4mliJggEEGCNIgQBlDgQ9ghJlggI9gZIG3IFCJU6cCPALGNADCIKS1unT5+zel7qwWOSig5Ha1tgGPIYBr4QJgQ8/WUUuAv9Ppf6ayd9++6211tJ+v+emaehwOKBtW4zjKHVdyzzP6dNPP43/J/Dz58+p6zqrlHLMzABsKYVSSnw8HtG2LY7HozRNk8ZxTEqp+OOPP0ZjTPjiiy/kfwV/8803znvvnHOulOLqurYiwlprXteVDocDnHMIIUjXdSnGmJqmibe3t0FrHU6nU/jss8/CXwV//fXXjYg0T58+bZxzDRG5uq7tPM9cVZUFQNfX19jv90gppbfffluYOQKIOeegtQ7MPJRSwvvvvz/8j+Avv/zSn5+f+5yzf/z4cZNzdiLSiIgdhsEaYziEQC9evKBXr17JZrORt956K/V9H2OMoeu6ACAYY6YQwhBCGD755JPf4fSX6FdffdW0bevHcfQpJX86nTyAnog2IYR+mqZ+GIZ+nudz51xvjOmdc/04jj2APqXUK6U20zRtYoz+1atXHoB/9uxZ898mfv78uavr2ltr+91u55um8QC8tba5u7vzt7e3VkRc13U2pUQAsCwLHj58KLvdLmqtY4xxevr0aWDmQSk1/fzzz0fn3FBKOd67d+/4wQcfBADQv6Gff/45nZ2dtc65jYj4ZVk6AF4p5dd17XLOrda66/veN03ju67zl5eXTdM0rus6V0oxy7LocRxJRFRd12DmMo4jlmVJ+df66KOP4nfffVf4N/jRo0fu/PzcLcviQggNAOe998zs53n2WmtfVVXnnHPMbJmZtdZUVZXM85yWZYmHwyFora1Siuq6xrqu2Gw2ab/fN9vtNuWc4zzPEcD0Bp6myf7www9ORGzXdRZAMwyDY+ZGRHzXddu6rpuLi4sm5+y01lZrjRCCnE6nxMzBGGPbtqUYI47HoyzLIuM4xhBCrOs6KqXcOI4BwKQB4NmzZ3ZZlvZ4PLYAfFVVfhgGH0LoXr9+7ZVSnffeW2s3SilfSumUUm1d182yLG6aJiMiZIxRZ2dn4pyTYRhkHMccQkiXl5ep7/vVGLPO87y88847iQFgXVdOKbGIsPeenXM2hGCXZbEhBFfXdTMMQyMiTQhhU1VVU0pxSim+u7tLRBSYmTebDQFIKaWUc16maQo5ZzsMg63r2jIzP3r0yG63W2IAsNbS/fv36cmTJ0xEdlkW3u12fHZ2Zpm5quvavn792s3z3MQYG+/9pq7rxlrLMcZUVdVUVRUuLy9TSsnlnEPOuQJgjTFcSuGUEs/zzFdXV6y1ZgaAtm2JiMgYQ8uy0DiO5Jzjvu/p8vKSSyn88uVLO02TFRE3z3MzTdMm52wBxM1mA2tt3O12gYg458wPHjygX375hZRSdHNzQ0REzEw5ZxKRPyfWWuN4PFLXdRRCQFVVaJoGWmuUUhBjJKUU2rYlay1rrXmeZ7fb7fqmafbruk5aaz4cDqSUYu89AaBSCuWcqaoqOOdQVRWICKUUMAAcDgecTifknKWUIkopaP3nXzyEIEQkALDdboWZk/c+3d7eBgD7ZVnCuq6plJKmaRIiSsfjUfq+l59++km22y1EBPM8Y55nlFLEGIPfPi5Z1zWdTieZpkmcc0JEqWkayTlLVVXJex+32200xoTtdjs55/Dy5cvpeDymZVmmUkqoqiqmlNJ+v0/TNMnNzU26vLxMpRRxzqXD4SAAkHMWBoDr62tRSsnxeEzMnF68eJHu37+fUkqRmZdlWSKAkFKaRIR/XfbYdR3P85zWdQ3b7Xbq+z6klMJ+v49EtJydnaW+79O6rmm326XdbpeMMeni4kJ+2+PonEs552SMSSmlWNd1dM7Fvu+DUmoq40xqWkgpJTc//RwKYKUUOm9aESCWUuI0TRMRhaurq2CtDRcXF7GqqgggNk2TiCjVdR3bto0aAL7//nt59913zd3dnRERc319bUREX5BlPczGDsHWUWq3ZlOtme0q2iQhK0VMQbagVSeZdZYRWU6XDx8ct9vtdHZ2dkopjTnnIYQwGWPGruumjz/++N+PzKurq7Cua2DmMAzD9Le58v52QAtNjrSxipiZrWJtwcwwmophEqPTryNl1pRJYb3dS+r90DTNBCA450LTNEFrHX5dAbyBh2EIwzCEt19OeJJB3XqkVmDrQk2lyFutN9qwV840cNaiNlzqCsXZVKBYSCNrlRLYRlK8DMHOpwlDWqaLi4vQtm0opYSUUvhP9/E//ukfHvRz7tsol36RRy6XJ1VRj62ie2z0OTmzUd46dJXFxlHpaqB1SVwdi6unZKt9svY2Gr5eWP0yo1zPyDeT1S+stUdmHt57773wu8QA8PjVLNtxRb1kW8fsTS5bA5yz1ve00+fKW6+4smgzgwoVQ4DRUqyNhYvLWlEiSivxsBBZqwBGTjfDYaqqavrwww/fNH5v4H/5uz+5y+sT2iWhWoVMKo5L8RpqQ0ZvqHCPqjSqwMIQo9aExghaK8XmWFhINGLW1CTS1mrDRgMMSX+jz+0f/v6P038M+QZ++HpBN61iVwFnIc6FCGBSZFUpTlVwCtTAaKuaxNgkYJtQ2pTAmQqKCGA1KdZEpElDkUqKSpJCCX9Rb5q9/hCknVapwyrVkpNZs/AqopNAi0ArIeLCuhKmNjN12dI2s95kSz6zdkJsC1gjGaJkFUWnOdZskzdV+td/+uffNXtvErtxESNIuiBSQVDAoIgGqDIpIIBUgkGCg0VTgK4AnQC1iIIkLBKxSqBcJqAMgBqKUlNRFLJSqVI6/ddwFBAgCioqYILCUZXyGsAOSm2gsQHDwsDCglCB4IrASYJIhMgAkb2SsqOCO0DtWdEA0kE0oi/ud8+ZfwNHlfD1KzWD6QAAAABJRU5ErkJggg==' id='rookwolk' height='1' width='1' />
<canvas id='veel_rook' style='position:absolute;z-index:-1;margin-left:-65px;margin-top:-380px;height:400px;width:400px;'>upgrade jouw browser naar de laatste versie voor canvas support.</canvas>

javascript voor het smoke effect gebeuren

<script>
/*global document: false */
/*global setInterval: false */
/*global window: false */
var i;
var rook = null;
var contekst = null;
function willekeurig_getal(max, min) {
    if (!min) {
        return Math.floor(Math.random() * (max + 1));
    }
    return Math.floor(Math.random() * (max + 1 - min)) + min;
}
function verander_vorm(de_basis, verander_wolk) {
    return willekeurig_getal(de_basis - verander_wolk, de_basis + verander_wolk);
}
function smoke_effect(x, y, contekst) {
    var self = this;
    self.contekst = contekst;
    self.benoemd = {
        totaal_vervagen: 0.3,
        minimum_vervagen: 0.2,
        maximum_aantal_wolken: 70,
        maximum_nieuwe_wolken: 5,
        vervorming_x_as: 5,
        vervorming_y_as: 5,
        maximale_uitstoot: 40,
        uitstoot_hoeveelheid: 13,
        zijwind_x_as: 5,
        zijwind_y_as: 4
    };
    self.wolk_array = [];
    self.smoke_png = document.getElementById("rookwolk");
    self.advance_wolkjes = function () {
        var voeg_toe = 0;
        while (self.wolk_array.length < self.benoemd.maximum_aantal_wolken && voeg_toe < self.benoemd.maximum_nieuwe_wolken) {
            self.wolk_array.push({
                x: verander_vorm(x, self.benoemd.vervorming_x_as),
                y: verander_vorm(y, self.benoemd.vervorming_y_as),
                deze: self.benoemd.maximale_uitstoot - willekeurig_getal(self.benoemd.uitstoot_hoeveelheid)
            });
            ++voeg_toe;
        }
        var max_x = contekst.canvas.width;
        var max_y = contekst.canvas.height;
        for (i = 0; i < self.wolk_array.length; ++i) {
            var smoker = self.wolk_array[i];
            --smoker.deze;
            self.apply_vector(smoker);
            if (smoker.x < 0 || smoker.x > max_x || smoker.y < 0 || smoker.y > max_y) {
                smoker.deze = 0;
            }
        }
        self.wolk_array.sort(function (a, b) {
            return b.deze - a.deze;
        });
        while (self.wolk_array.length && self.wolk_array[self.wolk_array.length - 1].deze <= 0) {
            self.wolk_array.pop();
        }
    };
    self.apply_vector = function (smoker) {
        smoker.x += willekeurig_getal(self.benoemd.zijwind_x_as);
        smoker.y -= willekeurig_getal(self.benoemd.zijwind_y_as);
    };
    self.renderen = function () {
        for (i = 0; i < self.wolk_array.length; ++i) {
            var smoker = self.wolk_array[i];
            var alpha = (1 / (self.benoemd.maximale_uitstoot - smoker.deze)) * self.benoemd.totaal_vervagen + self.benoemd.minimum_vervagen;
            contekst.globalAlpha = alpha;
            contekst.drawImage(self.smoke_png, smoker.x, smoker.y);
        }
    };
    self.step = function () {
        self.advance_wolkjes();
        self.renderen();
    };
}
function check_voor_animatie() {
    if (!rook) {
        return;
    }
    contekst = rook.contekst;
    contekst.clearRect(0, 0, contekst.canvas.width, contekst.canvas.height);
    contekst.save();
    rook.step();
    contekst.restore();
}
function start_smoke_animatie() {
    var canvas = document.getElementById("veel_rook");
    if (!canvas || !canvas.getContext) {
        return;
    }
    contekst = canvas.getContext("2d");
    rook = new smoke_effect(50, 100, contekst);
    setInterval(function() {
        check_voor_animatie();
    },
    50);
}
window.onload = start_smoke_animatie;
</script>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.