mouse pos uniform

2 files changed, 58 insertions, 17 deletions

diff --git a/index.html b/index.html
index 2d3e186..fdf3d3e 100644
--- a/index.html
+++ b/index.html
@@ -55,20 +55,6 @@
 		position: absolute;
 	}
 	
-	button {
-		border: 2px solid var(--ui-border);
-		background-color: black;
-		color: white;
-	}
-	button:hover, input:hover, input:active {
-		background-color: #fff3;
-	}
-	button:active {
-		background-color: #fff6;
-	}
-	button:focus, input:focus {
-		outline: 1px solid #0f0;
-	}
 	#ui-resize {
 		flex-grow: 0;
 		flex-shrink: 0;
@@ -88,12 +74,20 @@
 		flex-basis: 30%;
 	}
 	input, button {
-		display: inline-block;
-		border: 2px solid var(--ui-border);
+		border: 1px solid var(--ui-border);
 		background-color: transparent;
 		color: white;
 		padding: 0;
 	}
+	input[type=submit]:hover, button:hover {
+		background-color: #fff5;
+	}
+	input[type=submit]:active, button:active {
+		background-color: #fff9;
+	}
+	input:focus, [contenteditable]:focus, button:focus {
+		outline: 2px solid #77f;
+	}
 	.in select {
 		width: 5em;
 	}
@@ -192,6 +186,27 @@
 	summary {
 		cursor: pointer;
 	}
+	#title {
+		vertical-align: middle;
+		font-weight: bold;
+		font-size: 0.5cm;
+	}
+	#title img {
+		height: 1cm;
+	}
+	#resolution-form input[type=number] {
+		width: 4em;
+	}
+
+	input[type=number]::-webkit-inner-spin-button,
+	input[type=number]::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		appearance: none;
+		margin: 0;
+	}
+	input[type=number] {
+		-moz-appearance: textfield;
+	}
 	</style>
 	<meta charset="utf-8">
 	<meta content="width=device-width,initial-scale=1" name="viewport">
@@ -209,14 +224,24 @@
 <div id="page">
 	<div id="main">
 		<div id="ui">
+			<div id="title">
+				<img src="icon.png"> pugl
+			</div>
 			<form action="#" method="dialog" id="code-form">
 				<input type="text" placeholder="Code" id="code">
 				<input type="submit" value="import">
 			</form>
+			<form action="#" method="dialog" id="resolution-form">
+				<input type="number" placeholder="width">
+				×
+				<input type="number" placeholder="height">
+				<input type="submit" value="change resolution">
+			</form>
 			Add <input type="text" id="widget-search" placeholder="Search">
 			<div id="widget-choices"></div>
 			<div id="widgets-container"></div>
 		</div>
+		
 		<div id="ui-resize"></div>
 		
 		<div id="canvas-container">
diff --git a/pugl.js b/pugl.js
index 19333c9..6976783 100644
--- a/pugl.js
+++ b/pugl.js
@@ -6,7 +6,6 @@ TODO:
 - settings:
   - enable/disable auto-update
   - resolution
-- mouse pos uniform
 */
 
 const APP_ID = 'dh3YgVZQdX1Q';
@@ -34,6 +33,7 @@ let widgets_container;
 let code_input;
 let error_element;
 let parsed_widgets;
+const mouse_pos_ndc = Object.preventExtensions({ x: 0, y: 0 });
 
 const render_width = 1080,
 	render_height = 1080;
@@ -1310,6 +1310,7 @@ precision highp float;
 
 uniform sampler2D _texture;
 uniform float _time;
+uniform vec2 _mouse;
 uniform vec2 _texture_size;
 in vec2 _pos;
 out vec4 _out_color;
@@ -1859,6 +1860,10 @@ ${this.code.join('')}
 					return { code: '(0.5+0.5*_pos)', type: 'vec2' };
 				case '.time':
 					return { code: '_time', type: 'float' };
+				case '.mouse':
+					return { code: '_mouse', type: 'vec2' };
+				case '.mouse01':
+					return { code: '(0.5+0.5*_mouse)', type: 'vec2' };
 				default:
 					return { error: `no such builtin: ${input}` };
 			}
@@ -2465,6 +2470,12 @@ void main() {
 	import_widgets_from_local_storage();
 
 	frame(0.0);
+
+	canvas.addEventListener('mousemove', (e) => {
+		mouse_pos_ndc.x = (e.offsetX / canvas.offsetWidth) * 2 - 1;
+		mouse_pos_ndc.y = 1 - (e.offsetY / canvas.offsetHeight) * 2;
+	});
+
 	window.addEventListener('keydown', on_key_press);
 }
 
@@ -2541,6 +2552,11 @@ function perform_step() {
 		render_width,
 		render_height,
 	);
+	gl.uniform2f(
+		gl.getUniformLocation(program_main, '_mouse'),
+		mouse_pos_ndc.x,
+		mouse_pos_ndc.y,
+	);
 
 	if (parsed_widgets) {
 		for (const widget of parsed_widgets.values()) {