diff options
author | sanine <sanine.not@pm.me> | 2022-05-29 20:44:11 -0500 |
---|---|---|
committer | sanine <sanine.not@pm.me> | 2022-05-29 20:44:11 -0500 |
commit | 9ccb4a7bc728fd0e85c04fddb802fde02b73cfe2 (patch) | |
tree | 97af7969f2a7809543e5c70c20e62061f294771a /src/main.js | |
parent | 76d7e6c00ec11a72adfcb10fbfad6d92a873b253 (diff) |
add basic color brushing demo
Diffstat (limited to 'src/main.js')
-rw-r--r-- | src/main.js | 30 |
1 files changed, 20 insertions, 10 deletions
diff --git a/src/main.js b/src/main.js index d618d05..4527a90 100644 --- a/src/main.js +++ b/src/main.js @@ -1,27 +1,37 @@ +import Terrain from './Terrain.js'; import Canvas from './Canvas.js'; const $ = id => document.getElementById(id) window.onload = () => { const canvas = new Canvas('root'); + const terrain = new Terrain(); + + const BRUSH_RADIUS = 80; + let brushing = false; + canvas.onMouseDown = e => { + if (e.button == 0) brushing = true; + }; + canvas.onMouseUp = e => { + if (e.button == 0) brushing = false; + }; const pos = canvas.mouse.drawingPos; - canvas.onMouseMove = () => canvas.draw(); + canvas.onMouseMove = () => { + if (brushing) + terrain.applyBrush(pos.x, pos.y, (pt, strength) => { + pt.hue += 10 * strength; + }, 1, canvas.pixelsToUnits(BRUSH_RADIUS)); + canvas.draw(); + }; canvas.onDraw = ct => { - ct.fillStyle = '#f00'; - ct.fillRect(0, 0, 1/3, 1/3); - ct.fillStyle = '#0f0'; - ct.fillRect(2/3, 0, 1/3, 1/3); - ct.fillStyle = '#ff0'; - ct.fillRect(0, 2/3, 1/3, 1/3); - ct.fillStyle = '#00f'; - ct.fillRect(2/3, 2/3, 1/3, 1/3); + terrain.renderGrid(ct); ct.strokeStyle = '#fff'; ct.lineWidth = canvas.pixelsToUnits(1); ct.beginPath(); - ct.arc(pos.x, pos.y, canvas.pixelsToUnits(30), 0, 2*Math.PI); + ct.arc(pos.x, pos.y, canvas.pixelsToUnits(BRUSH_RADIUS), 0, 2*Math.PI); ct.closePath(); ct.stroke(); }; |