Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
167 lines (142 sloc) 5.62 KB
<!DOCTYPE html>
<html>
<head>
<title>Water</title>
<script src="myr.js"></script>
<script src="convTex.js"></script>
</head>
<body>
<canvas id="renderer" width=1200 height=800></canvas>
<script>
const gridSize = 48;
const gridColorBack = new Myr.Color(0.82, 0.75, 0.46);
const gridColorFront = new Myr.Color(0.63, 0.6, 0.45);
const brushRadius = 16;
const brushSpacing = brushRadius * 0.25;
const canvas = document.getElementById("renderer");
const rect = canvas.getBoundingClientRect();
const mousePrevious = new Myr.Vector(0, 0);
const mouseCurrent = new Myr.Vector(0, 0);
const myr = new Myr(canvas);
const image = new myr.Surface(myr.getWidth(), myr.getHeight());
const texture = new ConvTex(
myr,
new myr.Shader(
"void main() {" +
"lowp float damping = 0.997;" +
"lowp vec4 pixel = texture(source, uv);" +
"lowp vec4 pixelLeft = texture(source, vec2(uv.x - pixelSize.x, uv.y));" +
"lowp vec4 pixelUp = texture(source, vec2(uv.x, uv.y - pixelSize.y));" +
"lowp vec4 pixelRight = texture(source, vec2(uv.x + pixelSize.x, uv.y));" +
"lowp vec4 pixelDown = texture(source, vec2(uv.x, uv.y + pixelSize.y));" +
"color = vec4(((pixelLeft.r + pixelUp.r + pixelRight.r + pixelDown.r) / 2.0 - pixel.g) * damping, pixel.r, 0, 1);" +
"}",
["source"],
[]
),
myr.getWidth(),
myr.getHeight(),
1);
const displacementShader = new myr.Shader(
"lowp float get(int x, int y) {" +
"return texture(displacement, uv + vec2(x, y) * pixelSize).r;" +
"}" +
"void main() {" +
"lowp float dx = get(1, 0) - get(-1, 0);" +
"lowp float dy = get(0, 1) - get(0, -1);" +
"lowp vec2 displacement = vec2(dx, dy);" +
"lowp vec2 focus = vec2(-0.1, 0.1);" +
"lowp float shiny = max(0.0, displacement.y - displacement.x);" +
"color = texture(source, uv + displacement * 0.1) * (1.0 + shiny);" +
"}",
["source", "displacement"],
[]
);
let brushDown = false;
// Initialize convtex
displacementShader.setSurface("source", image);
texture.setClearColor(new Myr.Color(0, 0, 0, 1));
texture.getFront().bind();
texture.getFront().clear();
// Initialize image
image.bind();
image.clear();
for (let y = 0; y < image.getHeight(); y += gridSize << 1) {
for (let x = 0; x < image.getWidth(); x += gridSize << 1) {
myr.primitives.fillRectangle(
gridColorBack,
x, y,
gridSize * 2, gridSize * 2
);
myr.primitives.fillRectangle(
gridColorFront,
x, y,
gridSize, gridSize
);
myr.primitives.fillRectangle(
gridColorFront,
x + gridSize, y + gridSize,
gridSize, gridSize
);
}
}
myr.setClearColor(Myr.Color.WHITE);
myr.utils.loop(function(timeStep) {
brushed = false;
texture.update();
myr.bind();
myr.clear();
displacementShader.setSurface("displacement", texture.getFront());
displacementShader.draw(0, 0);
myr.setAlpha(0.5);
texture.getFront().drawScaled(0, 0, 0.2, 0.2);
myr.setAlpha(1);
myr.primitives.drawCircle(
Myr.Color.BLUE,
mouseCurrent.x,
mouseCurrent.y,
brushRadius
);
myr.flush();
return true;
});
canvas.addEventListener("mousedown", event => {
mouseCurrent.x = event.clientX - rect.left;
mouseCurrent.y = event.clientY - rect.top;
brushDown = true;
texture.getFront().bind();
myr.primitives.fillCircleGradient(
new Myr.Color(1, 0, 0, 1),
new Myr.Color(0, 0, 0, 0),
mouseCurrent.x, mouseCurrent.y,
brushRadius
);
});
canvas.addEventListener("mouseup", () => {
brushDown = false;
});
canvas.addEventListener("mousemove", event => {
mousePrevious.x = mouseCurrent.x;
mousePrevious.y = mouseCurrent.y;
mouseCurrent.x = event.clientX - rect.left;
mouseCurrent.y = event.clientY - rect.top;
if (brushDown) {
const dx = mouseCurrent.x - mousePrevious.x;
const dy = mouseCurrent.y - mousePrevious.y;
const dl = Math.sqrt(dx * dx + dy * dy);
texture.getFront().bind();
myr.setAlpha(brushSpacing / brushRadius);
for (let d = 0; d < dl; d += brushSpacing)
myr.primitives.fillCircleGradient(
new Myr.Color(1, 0, 0, 1),
new Myr.Color(0, 0, 0, 0),
mousePrevious.x + dx * (d / dl),
mousePrevious.y + dy * (d / dl),
brushRadius
);
myr.setAlpha(1);
}
});
</script>
</body>
</html>