All examples By author By category About

larsvers

Full window Github gist

ch1ex4b

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>

body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

canvas { border:  1px solid #ccc; }

button {
		display: inline-block;
		position:  absolute;
		width: 6em;
		margin: 0;
		padding: .5em;
		outline: none;
		color: #555;
		background-color: #f7f7f7;
		border: 1px dotted #f0f0f0;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		cursor: pointer;
	}

button:hover {
		background-color: rgba(173, 206, 255, .7);
	}

button#enter { top: 20px; left: 625px; }
	button#update { top: 140px; left: 625px; }
	button#exit { top: 260px; left: 625px; }
	button#rerun { top: 377px; left: 625px; }

</style>
</head>

<body>

<canvas id="main-canvas" width="600" height="400"></canvas>
  <button id="enter"><strong>Enter</strong><br> forms a cloud</button>
  <button id="update"><strong>Update</strong><br> lets it rain</button>
  <button id="exit"><strong>Exit</strong><br> makes grass</button>
  <button id="rerun">Again</button>

/* Setting up canvas and context */ 
  /* ============================= */

var canvas = d3.select('#main-canvas').node();
  var context = canvas.getContext('2d');

/* Drawing the background */
  /* ====================== */

function drawScene() {

context.save();

// The house
    context.fillStyle = 'royalblue';
    context.fillRect(50, 150, 200, 100);

// The door
    context.fillStyle = 'rgba(255, 255, 255, 0.9)';
    context.fillRect(60, 190, 40, 60);

// The window
    context.save();

context.translate(140, 190);
    context.fillRect(0, 0, 60, 30);

context.restore();

// The roof
    context.beginPath();
    context.moveTo(50, 150);
    context.lineTo(250, 150);
    context.lineTo(50+200/2, 100);
    context.closePath();
    context.fillStyle = '#A52A2A';
    context.fill();

// The tree
    context.beginPath();
    context.lineWidth = 10;
    context.strokeStyle = 'brown'
    context.moveTo(300, 250);
    context.lineTo(300, 125);
    context.stroke();

context.beginPath();
    context.fillStyle = 'green';
    context.arc(300, 150, 25, 0, Math.PI * 2);
    context.fill();

context.restore();

} // drawScene()

function drawRainScene() {

// cloud
    // point cloud roughly from 60,10 to 540, 70
    context.beginPath();
    context.moveTo(65, 65);
    context.lineTo(535, 65);
    context.bezierCurveTo(560, 5, 441, 5, 441, 40);
    context.bezierCurveTo(441, 0, 347, 0, 347, 40);
    context.bezierCurveTo(347, 5, 253, 5, 253, 40);
    context.bezierCurveTo(253, 10, 159, 10, 159, 40);
    context.bezierCurveTo(159, 15, 40, 15, 65, 65);
    context.closePath();
    context.fillStyle = '#f7f7f7';
    context.fill();

// Rain path
    // cloud shape from 65, 65 to 535, 65
    // puddle shape from 30, 250 to 560, 270
    context.beginPath();
    context.moveTo(65, 70);
    context.lineTo(535, 70);
    context.lineTo(530, 255);
    context.lineTo(45, 253);
    context. closePath();
    context.fillStyle = '#ffffff';
    context.fill();

// Puddle
    context.beginPath();
    context.moveTo(529.52,256.19);
    context.bezierCurveTo(532.01,260.53,513.31,265.85,516.94,272.4);
    context.bezierCurveTo(521.06,279.82,547.94,278.27,553.81,286.4);
    context.bezierCurveTo(557.57,291.58,552.04,299.53,542.08,303.045);
    context.bezierCurveTo(520.38,310.726,493.13,291.9,444.8,292.045);
    context.bezierCurveTo(410.16,292.184,409.0,301.976,364.45,307.383);
    context.bezierCurveTo(302.314,314.91,237.732,304.003,237.0,296.383);
    context.bezierCurveTo(236.582,290.383,276.83,287.115,275.633,282.75);
    context.bezierCurveTo(273.71,275.856,167.702,276.425,166.71,281.485);
    context.bezierCurveTo(166.073,284.753,209.81,287.045,209.44,291.124);
    context.bezierCurveTo(208.85,297.744,92.88,304.52,83.76,291.124);
    context.bezierCurveTo(78.85,283.90,106.86,273.726,100.52,268.77);
    context.bezierCurveTo(94.66,264.20,68.52,271.16,39.35,264.83);
    context.bezierCurveTo(32.35,263.314,26.7303,261.36,25.118,258.26);
    context.bezierCurveTo(23.78,255.71,34.735,251.362,43.54,250.814);
    context.bezierCurveTo(56.446,250.982,453.02,250.753,458.2,250.883);
    context.bezierCurveTo(506.06,249.68,525,248.36,529.52,256.19);
    context.closePath();
    context.fillStyle = "#ffffff";
    context.fill();

} // drawRainScene()

/* Produce rain data */
  /* ================= */

function getDrop(index) {

var x = Math.random() * (canvas.width * 0.9) + (canvas.width * 0.05);

var obj = {};
    obj.index = index;
    obj.xCloud = x;
    obj.yCloud = Math.random() * 55 + 10;
    obj.xPuddle = x;
    obj.yPuddle = Math.random() * 60 + 253;
    obj.radiusCloud = 1;
    obj.radiusPuddle = 2;
    obj.radiusGrass = 8;

return obj;

} // getDrop()

function getRainData(length, data) {

d3.range(length).forEach(function(el) {

var drop = getDrop(el);
      data.push(drop);

});

return data;

} // getRainData()

/* Enter Exit Update and Draw the rain */
  /* =================================== */

// Create in-memory base for elements
  var customBase = document.createElement('custom')
  var custom = d3.select(customBase);

function databind(data) {

var join = custom.selectAll('custom.drop')
        .data(data, function(d) { return d.index; });

var exit = join
      .exit().transition()
        .duration(dur)
        .delay(function(d,i) { return i ; })
        .attr('r', function(d) { return d.radiusGrass; })
        .attr('fillStyle', '#01A611');

} // databind()

function draw(ctx) {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawRainScene();

drawScene();

var elements = custom.selectAll('custom.drop');

elements.each(function(d, i) {

var node = d3.select(this);

ctx.save();

ctx.beginPath();
      ctx.globalCompositeOperation = 'source-atop'
      ctx.fillStyle = node.attr('fillStyle');
      ctx.arc(node.attr('cx'), node.attr('cy'), node.attr('r'), 0, 2 * Math.PI);
      ctx.fill();

ctx.restore();

});

} // draw()

/* Draw the initial scene */
  /* ====================== */

drawRainScene();
  drawScene();

/* Animate */
  /* ======= */

var max = 2500;
  var raindrops = [];
  var rainData = getRainData(max, raindrops);
  var dur = 2000;
  var running = false;

function rainAnimation(data) {

databind(data);

var t = d3.timer(function(elapsed) {
      running = elapsed > 1 && elapsed < dur * 2 ? true : false;
      draw(context);
      d3.selectAll('button').style('color', '#aaa');
      if (elapsed > dur * 2) {
        d3.selectAll('button').style('color', '#555');
        t.stop();
      }
    });

} // rainAnimation()

/* Interact */
  /* ======== */

d3.select('button#enter').on('mousedown', enterRain);
  d3.select('button#update').on('mousedown', updateRain);
  d3.select('button#exit').on('mousedown', exitRain);

function enterRain() {
    if (!running) rainAnimation(rainData);
  };

function updateRain() {
    if (!running) rainAnimation(rainData);
  };

function exitRain() {	
    if (!running) rainAnimation([]);
  };

d3.select('button#rerun').on('mousedown', function() {
    location.reload();
  });

</script>
</body>

https://d3js.org/d3.v4.min.js