Fire JS Bin - FlowerPower

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

(function ($) {

Garden.options = {
    petalCount: {
      min: 5,
      max: 15
    },
    petalStretch: {
      min: 0.1,
      max: 3
    },
    growFactor: {
      min: 0.1,
      max: 1
    },
    bloomRadius: {
      min: 5,
      max: 20
    },
    density: 10,
    growSpeed: 1000 / 60,
    color: {
      min: 0,
      max: 255,
      opacity: 0.5
    },
    tanAngle: 90
  };
  Garden.random = function (min, max) {
    return Math.random() * (max - min) + min;
  };
  Garden.randomInt = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  Garden.circle = 2 * Math.PI;
  Garden.degrad = function (angle) {
    return Garden.circle / 360 * angle;
  };
  Garden.raddeg = function (angle) {
    return angle / Garden.circle * 360;
  };
  Garden.rgba = function (r, g, b, a) {
    return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
  };
  Garden.randomrgba = function (min, max, a) {
    return Garden.rgba(Math.round(Garden.random(min, max)), Math.round(Garden.random(min, max)), Math.round(Garden.random(min, max)), a);
  };
  Garden.previewColor = "rgba(127,127,127,0.4)";

$(function () {

function previewBloomRadius() {
      $lblPreview.html("Size [left: min, right: max]");
      preview.createBloom(80, 100, Garden.options.bloomRadius.min, Garden.previewColor, Garden.options.petalCount.min);
      preview.createBloom(220, 100, Garden.options.bloomRadius.max, Garden.previewColor, Garden.options.petalCount.max);
    }

function previewPetalCount() {
      $lblPreview.text("Petals [left: min, right: max]");
      preview.createBloom(80, 100, 30, Garden.previewColor, Garden.options.petalCount.min);
      preview.createBloom(220, 100, 30, Garden.previewColor, Garden.options.petalCount.max);
    }

function previewPetalStretch() {
      $lblPreview.text("Bezier stretch factor");
      preview.createBloom(80, 100, 30, Garden.previewColor, Garden.options.petalCount.min);
      preview.createBloom(220, 100, 30, Garden.previewColor, Garden.options.petalCount.max);
    }

function onChangeBloomRadius(v, caller) {
      saveValues("bloomRadius", v);
      renderPreview(caller);
      previewBloomRadius();
    }

function onChangePetalCount(v, caller) {
      saveValues("petalCount", v);
      renderPreview(caller);
      previewPetalCount();
    }

function onChangePetalStretch(v, caller) {
      saveValues("petalStretch", v);
      renderPreview(caller);
      previewPetalStretch();
    }

function onChangeColor(v, caller) {
      saveValues("color", v);
      renderPreview(caller);
      previewColor();
    }

function saveValues(name, values) {
      Garden.options[name].min = values[0];
      Garden.options[name].max = values[1];
    }

// variables
    var mousePressed = false,
        lastPos = new Vector(0, 0),
        actualPos = new Vector(0, 0),
        $window = $(window),
        $lblPreview = $("#lblPreview");

// garden
    var gardenCtx, gardenCanvas, $garden, garden, previewInterval;

// preview
    var previewCtx, previewCanvas, $preview, preview, $previewArea;

// saveCanvas
    var saveCtx, saveCanvas;

// setup save
    saveCanvas = $("#save")[0];
    saveCanvas.width = $window.width();
    saveCanvas.height = $window.height();
    saveCtx = saveCanvas.getContext("2d");
    saveCtx.globalCompositeOperation = "lighter";

// setup garden
    $garden = $("#garden");
    gardenCanvas = $garden[0];
    gardenCanvas.width = $window.width();
    gardenCanvas.height = $window.height() - 20;
    gardenCtx = gardenCanvas.getContext("2d");
    gardenCtx.globalCompositeOperation = "lighter";
    garden = new Garden(gardenCtx, gardenCanvas);

// setup preview
    $preview = $("#preview");
    $previewArea = $("#previewArea");
    previewCanvas = $preview[0];
    previewCtx = previewCanvas.getContext("2d");
    previewCtx.globalCompositeOperation = "lighter";
    preview = new Garden(previewCtx, previewCanvas);

// renderLoop
    setInterval(function () {
      garden.render();
    }, Garden.options.growSpeed);

// sliders
    $("#sliderBloomRadius").slider({
      range: true,
      min: 3,
      max: 40,
      values: [5, 20],
      start: function (e, ui) {
        onChangeBloomRadius(ui.values, this);
      },
      slide: function (e, ui) {
        onChangeBloomRadius(ui.values, this);
      }
    });

$("#sliderPetalCount").slider({
      range: true,
      min: 3,
      max: 25,
      values: [5, 15],
      start: function (e, ui) {
        onChangePetalCount(ui.values, this);
      },
      slide: function (e, ui) {
        onChangePetalCount(ui.values, this);
      }
    });

$("#sliderPetalStretch").slider({
      range: true,
      min: 0.2,
      max: 5,
      values: [0.1, 3],
      start: function (e, ui) {
        onChangePetalStretch(ui.values, this);
      },
      slide: function (e, ui) {
        onChangePetalStretch(ui.values, this);
      }
    });

$("#sliderColor").slider({
      range: true,
      min: 0,
      max: 255,
      values: [0, 255],
      start: function (e, ui) {
        onChangeColor(ui.values, this);
      },
      slide: function (e, ui) {
        onChangeColor(ui.values, this);
      }
    });

// events
    $garden.bind("mouseover", function (e) {
      clearInterval(previewInterval);
      $previewArea.fadeOut("slow");
    });
    //$(".label").bind("mouseover", function (e) {
    //    clearInterval(previewInterval);
    //    $previewArea.fadeOut("slow");
    //});
    $garden.bind("mousedown", function (e) {
      e.preventDefault();
      var x = e.clientX;
      var y = e.clientY - 30;
      mousePressed = true;
      garden.createRandomBloom(x, y);
    });
    $garden.bind("mouseup", function (e) {
      mousePressed = false;
    });
    $garden.bind("mousemove", function (e) {
      var x = e.clientX;
      var y = e.clientY - 30;
      var l = actualPos.set(x, y).subtract(lastPos).length();
      if (mousePressed && l > (Garden.options.bloomRadius.max)) {
        garden.createRandomBloom(x, y);
        lastPos.set(x, y);
      }
    });
    $("#btnClear").click(function (e) {
      garden.clear();
    });
    $("#btnSave").click(function (e) {
      saveCtx.fillStyle = '#000000';
      saveCtx.fillRect(0, 0, saveCanvas.width, saveCanvas.height);
      saveCtx.drawImage(gardenCanvas, 0, 0);
      window.open(saveCanvas.toDataURL('image/png'), 'FlowerPowerImage');
    });

// Welcome screen
    $("#welcomeScreen").css({
      top: $window.height() - 100,
      left: $window.width() / 2 - 300
    }).fadeIn("slow");

$("body").bind("click", function (e) {
      $("#welcomeScreen").fadeOut("slow");
      $(this).unbind("click");
    });

// About
    $("#btnAbout").toggle(function (e) {
      $("#aboutScreen").css({
        width: $("#configArea div.label:first").width() - 20,
        left: 10,
        top: 25
      }).fadeIn("slow");
    }, function (e) {
      $("#aboutScreen").fadeOut("slow");
    });

});
})(jQuery);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head>
  <title>FlowerPower</title> 
  <meta name="description" content="FlowerPower is a JavaScript experiment developed by mhepekka using JavaScript and Canvas. Draw the flowers!" /> 
  <meta name="keywords" content="FlowerPower, PlasmaTree, Flower, drawing, idea, inspiration, Canvas, JavaScript, mhepekka, HTML5, Experiment, Tree, Algorithm, ChromeExperiment, Google, new technology, ParticleWorld, bender_328" /> 
  <meta name="author" content="mhepekka" /> 
  <meta name="robots" content="index,follow" /> 
  <meta name="copyright" content="Copyright 2010 mhepekka" /> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  
</head> 
 
<body> 
  <div id="aboutScreen"> 
    <h3>More projects</h3> 
    <p> 
      <a href="http://www.openrise.com/lab/PlasmaTree/" title="ChromeExperiment, Canvas, JavaScript">PlasmaTree</a><br /> 
      <a href="http://www.openrise.com/lab/Bender_328/" title="Bender_328, panormam roboter, panoboter">Bender_328</a><br /> 
      <a href="http://www.openrise.com/lab/ParticleWorld" title="Canvas, JavaScript, Simulator">ParticleWorld</a><br /> 
    </p> 
    <h3>Contact</h3> 
    <p>
      <b>Alias:</b> mhepekka<br /> 
      <b>Location: </b><a href="http://maps.google.ch/maps?f=q&source=sq&hl=de&geocode=&q=sevelen+plattengass+1792&sll=47.12852,9.477146&sspn=0.00819,0.013797&ie=UTF8&hq=&hnear=Plattengass+1792,+9475+Sevelen,+Sankt+Gallen&t=h&ll=40.446947,11.865234&spn=37.296742,56.513672&z=4">Google Maps</a> <br /> 
      mhe[at]openrise.com
    </p> 
  </div>

<div id="configArea"> 
    <div class="label"><span style="padding: 4px 10px; background: #a7d7f9; color: Black;"><b>FlowerPower</b> © <a href="#" id="btnAbout">mhepekka</a></span></div> 
    <div class="label">Size</div> 
    <div class="slider"><div id="sliderBloomRadius"></div></div> 
    <div class="label">Petals</div> 
    <div class="slider"><div id="sliderPetalCount"></div></div>    
    <div class="label">Bezier</div> 
    <div class="slider"><div id="sliderPetalStretch"></div></div> 
    <div class="label">Color</div> 
    <div class="slider"><div id="sliderColor"></div></div> 
    <div class="label" style="float: right;"><a id="btnSave" href="#">Save</a></div> 
    <div class="label" style="float: right;"><a id="btnClear" href="#">Clear</a></div> 
    <div style="clear: both;"></div> 
    </div> 
  <canvas id="garden" width="2000" height="800" style="cursor: crosshair;"></canvas> 
  <canvas id="save" style="display:none"></canvas> 
  <div id="previewArea">
    <div id="lblPreview">Preview</div>
    <canvas id="preview" width="300" height="200"></canvas> 
  </div>
  <div id="welcomeScreen">Draw, draw, draw !!!</div>
</body> 
</html>

Pop out