rot3, ui cleanup

3 files changed, 34 insertions, 28 deletions

diff --git a/fractiform.js b/fractiform.js
index 70ff412..583a894 100644
--- a/fractiform.js
+++ b/fractiform.js
@@ -2,8 +2,7 @@
 
 /*
 TODO:
-- widgets:
-	- rotate 3D
+- rearrange widgets
 */
 
 let gl;
@@ -293,6 +292,26 @@ ${type} clamp_(${type} x, ${type} minimum, ${type} maximum) {
 	return clamp(x, minimum, maximum);
 }
 `).join('\n'),
+	`
+//! .name: Rotate 3D
+//! .id: rot3
+//! .category: geometry
+//! .description: rotate a 3D vector about an axis
+//! v.description: the vector to rotate
+//! axis.description: the axis to rotate around. the magnitude must be non-zero but otherwise is ignored.
+//! axis.default: 0,1,0
+//! angle.name: θ
+//! angle.description: the angle in radians
+//! angle.default: 0.57
+
+vec3 rot3(vec3 v, vec3 axis, float angle) {
+	axis = normalize(axis);
+	float c = cos(angle);
+	float s = sin(angle);
+	// https://en.wikipedia.org/wiki/Rodrigues%27_rotation_formula
+	return v * c + cross(axis, v) * s + axis * dot(axis, v) * (1.0 - c);
+}
+`,
 ];
 
 function is_input(element) {
diff --git a/index.html b/index.html
index 71d304b..690eaf7 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@
 	button:hover, input:hover, input:active {
 		background-color: #fff3;
 	}
-	button:active, button[data-selected="true"] {
+	button:active {
 		background-color: #fff6;
 	}
 	button:focus, input:focus {
@@ -76,16 +76,11 @@
 	#ui-resize {
 		flex-grow: 0;
 		flex-shrink: 0;
-		width: 8px;
+		width: 0.3cm;
 		cursor: col-resize;
 		display: flex;
 		justify-content: center;
-	}
-	#ui-resize-bar {
-		width: 2px;
-		height: 100%;
-		background: #fff;
-		margin: auto 0;
+		background: linear-gradient(90deg, #000, #444 30%, #fff 50%, #444 70%, #000);
 	}
 	#ui {
 		overflow-x: auto;
@@ -103,9 +98,6 @@
 		color: white;
 		padding: 0;
 	}
-	#ui input[type=color] {
-		padding: 0;
-	}
 	.in select {
 		width: 5em;
 	}
@@ -122,16 +114,9 @@
 		margin-left: 0.5em;
 		white-space: nowrap;
 	}
-	input[type="number"] {
-		/* disable increment/decrement buttons (firefox) */
-		-moz-appearance: textfield;
-	}
-	input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-		/* disable increment/decrement buttons (webkit) */
-		-webkit-appearance: none;
-	}
-	img.icon {
-		height: 1.5em;
+	input[type="submit"] {
+		padding-left: 0.5em;
+		padding-right: 0.5em;
 	}
 	.widget {
 		display: block;
@@ -162,9 +147,10 @@
 		filter: saturate(500%);
 	}
 	.widget-choice {
-		width: 100%;
+		width: calc(100% - 0.4em);
 		border: 1px solid white;
-		margin: 0;
+		margin: 0.2em;
+		padding: 0.1em 0;
 	}
 	.widget-choice:focus {
 		outline: 0;
@@ -172,6 +158,7 @@
 	}
 	#widget-choices {
 		margin: 0.2em;
+		padding-bottom: 0.3em;
 		border-bottom: 2px solid white;
 	}
 	</style>
@@ -192,13 +179,13 @@
 		<div id="ui">
 			<form action="#" method="dialog" id="code-form">
 				<input type="text" placeholder="Code" id="code">
-				<input type="submit" value="✓">
+				<input type="submit" value="load">
 			</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 id="ui-resize-bar"></div></div>
+		<div id="ui-resize"></div>
 		
 		<div id="canvas-container">
 			<canvas id="canvas">
diff --git a/package.json b/package.json
index 533351a..f4d5276 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "pommicket",
-  "license": "ISC",
+  "license": "WTFPL",
   "devDependencies": {
     "eslint": "^8.45.0"
   }