Last active
July 31, 2018 04:04
-
-
Save redblobgames/ba198c31af7b932875daf78c9e50d922 to your computer and use it in GitHub Desktop.
d3 unconf block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: apache-2.0 | |
scrolling: no | |
height: 1500 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var canvas = d3.select("canvas"); | |
var ctx = canvas.node().getContext('2d'); | |
var SEED = 123456; | |
var noisegens = []; | |
(function makeNoiseGens() { | |
for (var i = 0; i < 10; i++) { | |
var rng = makeRandFloat(SEED + i); | |
noisegens[i] = new SimplexNoise(rng); | |
} | |
})(); | |
function smooth_biome_color(z, m) { | |
// This function copied from another project; see http://www.redblobgames.com/maps/terrain-from-noise/#biomes | |
var water = 0.1; | |
// Reshape these because perlin noise isn't evenly distributed | |
z = z * 1.3 - 0.45; | |
m = m * 3.0 - 0.7; | |
if (z < water) { | |
return d3.rgb(48 + 48*z/water, 64 + 64*z/water, 127 + 64 + 64*z/water); | |
} | |
// Green or brown at low elevation, and make it more white-ish | |
// as you go up | |
z = z * z * 0.7; | |
var r = 210 - 100*m, g = 215 - 70*m, b = 139 - 45*m; | |
return d3.rgb(255 * z + r * (1-z), | |
255 * z + g * (1-z), | |
255 * z + b * (1-z)); | |
} | |
function noise_at(x, y, u, v, spectrum, frequency) { | |
var total = 0.0; | |
var z = 0; | |
for (var octave = 0; octave < spectrum.length; octave++, frequency *= 2) { | |
z += spectrum[octave] * (noisegens[octave].noise4D(x * frequency, y * frequency, u, v)/2 + 0.5); | |
total += spectrum[octave]; | |
} | |
return 1.2 * z / total - 0.05; /* hackery */ | |
} | |
function color_at_xy(x, y, phase) { | |
var z = noise_at(x, y, 2 + phase, 0, [1, 1/4, 1/8], 3); | |
var m = noise_at(x, y, 0, 2 + phase, [1, 1/2, 1/3], 3); | |
return smooth_biome_color(z, m); | |
} | |
function makeHexGrid(size, phase) { | |
this.ctx.clearRect(0, 0, 1050, 1500); | |
var layout = Layout(layout_pointy, Point(size, size), Point(0, 0)); | |
for (var row = 0; row <= 1500/size; row++) { | |
for (var col = 0; col <= 1050/size; col++) { | |
var hex = roffset_to_cube(EVEN, OffsetCoord(col, row)); | |
var center = hex_to_pixel(layout, hex); | |
var color = color_at_xy(center.x / 1050, center.y / 1500, phase); | |
var polygon = polygon_corners(layout, hex); | |
this.ctx.beginPath(); | |
this.ctx.fillStyle = color.toString(); | |
this.ctx.strokeStyle = color.toString(); | |
this.ctx.moveTo(polygon[5].x, polygon[5].y); | |
for (var j = 0; j < polygon.length; j++) { | |
this.ctx.lineTo(polygon[j].x, polygon[j].y); | |
} | |
this.ctx.fill(); | |
this.ctx.stroke(); | |
} | |
} | |
} | |
var frame = 0; | |
function redraw() { | |
makeHexGrid(15, frame/20); | |
frame++; | |
} | |
redraw(); | |
setInterval(redraw, 1000); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<!-- this page assembled quick & dirty style, not for maintaining --> | |
<title>d3 unconf badge</title> | |
<style> | |
html, body { margin: 0; padding: 0; } | |
body { overflow: hidden; } | |
</style> | |
<!-- d3 of course! --> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<!-- random number generator, noise generator --> | |
<script src="/js/prng.js"></script> | |
<script src="/js/simplex-noise.js"></script> | |
<script>var exports = window; /* hack */</script> | |
<!-- hexagon code from http://www.redblobgames.com/grids/hexagons/implementation.html --> | |
<script src="http://www.redblobgames.com/grids/hexagons/codegen/output/lib-functions.js"></script> | |
</head> | |
<body> | |
<canvas width="1050" height="1500"/> | |
<script src="d3-unconf-badge.js"></script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment