<!doctype html>
<!-- prototyped this in ~24 hours to help so i don't have to manually enter lists of coordinates for gameboy sprite animations -->
<html>
<head>
<title>curve editor for gameboy animation</title>
<style>
body {
display: flex;
flex-direction: row;
gap: 1em;
}
#controls {
display: flex;
flex-direction: column;
gap: 1em;
}
</style>
</head>
<body>
<svg
viewBox="0 0 176 176"
style="border: 1px solid black; display: block; max-height: 700px"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="point">
<rect id="sprite" x="0" y="0" width="8" height="8" stroke="none" fill="gray" fill-opacity="25%"/>
<circle cx="0.5" cy="0.5" r="2" fill="black" fill-opacity="25%"/>
<circle cx="0.5" cy="0.5" r="0.5" fill="black" fill-opacity="100%"/>
</g>
<pattern id="smallGrid" width="1" height="1" patternUnits="userSpaceOnUse">
<path d="M 1 0 L 0 0 0 1" fill="none" stroke="darkseagreen" stroke-width="0.25"/>
</pattern>
<pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="8" height="8" fill="url(#smallGrid)"/>
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="darkseagreen" stroke-width="0.5"/>
</pattern>
</defs>
<image
id="background-container"
width="160"
height="144"
x="8" y="16"
opacity="50%"
xlink:href="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
<rect width="100%" height="100%" fill="url(#grid)" />
<rect x="8" y="16" width="160" height="144" style="fill: none; stroke: darkseagreen; stroke-width: 0.5"/>
<g id="lines">
</g>
<g id="sequence">
</g>
</svg>
<div id="controls">
<label for="background-selector">file for background</label>
<input type="file" id="background-selector" name="background-selector"/>
<fieldset>
<legend>control mode</legend>
<div>
<input type="radio" name="mode" id="add" value="add" checked/>
<label for="add"><strong>a</strong>dd points</label>
</div>
<div>
<input type="radio" name="mode" id="delete" value="delete"/>
<label for="delete"><strong>d</strong>elete points</label>
</div>
<div>
<input type="radio" name="mode" id="move" value="move"/>
<label for="move"><strong>g</strong>rab and move points</label>
</div>
</fieldset>
<div>
<label for="sprite_width">width in 8x8 sprites:</label>
<input type="number"
id="sprite_width"
name="sprite_width"
min="1" max="16" step="1" value="1"
onchange="sprite_dims_change()"/>
</div>
<div>
<label for="sprite_height">height in 8x8 sprites:</label>
<input type="number"
id="sprite_height"
name="sprite_height"
min="1" max="16" step="1" value="1"
onchange="sprite_dims_change()"/>
</div>
<p>output is a length-prefixed list of y,x pairs.</p>
<textarea id="output">db 0,</textarea>
</div>
</body>
<script>
var svg = null;
var svg_group = null;
var text_output = null;
var moving_point_index = -1;
var the_list = [];
var current_viewport = {center: {x: 0, y: 0}, radius: {x: 176, y: 176}};
var max_viewport = {center: {x: 0, y: 0}, radius: {x: 176, y:176}};
function length(dx, dy) {return Math.sqrt(dx*dx + dy*dy);}
const clicksvg = (event) => {
const mode = document.querySelector('input[name=mode]:checked').value; // either 'add', 'delete', or 'move'
const {x, y} = dom_to_svg_coords(svg, event.clientX, event.clientY);
if (mode == "add") {
the_list.push({x: Number((x-0.5).toFixed()),y: Number((y-0.5).toFixed())});
console.log(Number(x.toFixed()))
regenerate_svg_list();
regenerate_text_list();
}
if (mode == "delete") {
let closest = -1;
let distance = 3;
the_list.forEach((point, index) => {
let new_distance = length(point.x-x, point.y-y);
if (new_distance < distance) {
distance = new_distance;
closest = index;
}
});
if (closest != -1) {
the_list.splice(closest, 1);
}
regenerate_svg_list();
regenerate_text_list();
}
if (mode == "move" && moving_point_index != -1) {
const elem = document.querySelector(`g#sequence use:nth-child(${moving_point_index+1})`);
let newX = Number(Number(elem.getAttributeNS(null, "x")).toFixed());
let newY = Number(Number(elem.getAttributeNS(null, "y")).toFixed());
the_list[moving_point_index] = {x: newX, y: newY};
moving_point_index = -1;
regenerate_svg_list();
regenerate_text_list();
}
}
const mousemovesvg = (event) => {
const mode = document.querySelector('input[name=mode]:checked').value; // either 'add', 'delete', or 'move'
const {x, y} = dom_to_svg_coords(svg, event.clientX, event.clientY);
if (mode == 'move' && moving_point_index != -1) {
const previous_mouse_location = {x: event.clientX - event.movementX, y: event.clientY - event.movementY};
const prev_location_in_gbspace = dom_to_svg_coords(svg, previous_mouse_location.x, previous_mouse_location.y);
const gb_movement = {x: x - prev_location_in_gbspace.x, y: y - prev_location_in_gbspace.y};
const point = the_list[moving_point_index];
const elem = document.querySelector(`g#sequence use:nth-child(${moving_point_index+1})`);
let newX = Number(elem.getAttributeNS(null, "x")) + gb_movement.x;
let newY = Number(elem.getAttributeNS(null, 'y')) + gb_movement.y;
elem.setAttributeNS(null, "x", newX);
elem.setAttributeNS(null, "y", newY);
const lineTo = document.querySelector(`g#lines line:nth-child(${moving_point_index})`);
if (lineTo) {
lineTo.setAttributeNS(null, "x2", newX+0.5);
lineTo.setAttributeNS(null, "y2", newY+0.5);
}
const lineFrom = document.querySelector(`g#lines line:nth-child(${moving_point_index+1})`);
if (lineFrom) {
lineFrom.setAttributeNS(null, "x1", newX+0.5);
lineFrom.setAttributeNS(null, "y1", newY+0.5);
}
}
}
const mousedownsvg = (event) => {
const mode = document.querySelector('input[name=mode]:checked').value; // either 'add', 'delete', or 'move'
const {x, y} = dom_to_svg_coords(svg, event.clientX, event.clientY);
let closest = -1;
let distance = 3;
the_list.forEach((point, index) => {
let new_distance = length(point.x-x, point.y-y);
if (new_distance < distance) {
distance = new_distance;
closest = index;
}
});
if (mode == 'move') {
moving_point_index = closest;
}
}
const changetextarea = (event) => {
let raw = event.target.value;
let stripped = raw.replace(/db [0-9]+,/, "");
let pairs = stripped.matchAll(/ ?[0-9]+, ?[0-9]+/g);
let splits = pairs.map((x) => x[0].split(/,/));
let points = splits.map(([a, b]) => { return {y: Number(a), x: Number(b)}; } );
the_list = [... points];
regenerate_svg_list();
regenerate_text_list();
}
const sprite_dims_change = (event) => {
const width = document.querySelector('input#sprite_width').value;
const height = document.querySelector('input#sprite_height').value;
const rect = document.querySelector('g#point rect#sprite')
rect.setAttributeNS(null, "width", width*8);
rect.setAttributeNS(null, "height", height*8);
}
function regenerate_svg_list() {
svg_group.textContent = '';
for (const {x, y} of the_list) {
const newcircle = document.createElementNS("http://www.w3.org/2000/svg", "use");
newcircle.setAttributeNS(null, "href", "#point");
newcircle.setAttributeNS(null, "x", x);
newcircle.setAttributeNS(null, "y", y);
svg_group.appendChild(newcircle);
}
document.querySelector('g#lines').textContent = '';
for (const [second, first] of the_list.slice(1, the_list.length).map((e,i) => [e, the_list[i]])) {
const newline = document.createElementNS("http://www.w3.org/2000/svg", "line");
newline.setAttributeNS(null, "x1", first.x+0.5);
newline.setAttributeNS(null, "y1", first.y+0.5);
newline.setAttributeNS(null, "x2", second.x+0.5);
newline.setAttributeNS(null, "y2", second.y+0.5);
newline.setAttributeNS(null, "stroke", "black");
newline.setAttributeNS(null, "stroke-width", "0.25");
newline.setAttributeNS(null, "stroke-opacity", "50%");
document.querySelector('g#lines').appendChild(newline);
}
}
function regenerate_text_list() {
s = `db ${the_list.length}, `;
for (const {x, y} of the_list) {
s += `${y}, ${x}, `;
}
text_output.value = s;
}
function dom_to_svg_coords(s, clientX, clientY) {
// thanks to https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/
const pt = s.createSVGPoint();
pt.x = clientX;
pt.y = clientY;
const svgP = pt.matrixTransform( s.getScreenCTM().inverse() );
return svgP;
}
window.onload = () => {
svg = document.querySelector('svg');
svg.onclick = clicksvg;
svg.onmousemove = mousemovesvg;
svg.onmousedown = mousedownsvg;
svg_group = document.querySelector('g#sequence');
text_output = document.querySelector('textarea#output');
text_output.onchange = changetextarea;
sprite_dims_change();
let filePicker = document.querySelector('input#background-selector');
filePicker.onchange = (event) => {
var file = event.target.files[0];
// setting up the reader
var reader = new FileReader();
reader.readAsDataURL(file,'UTF-8');
// here we tell the reader what to do when it's done reading...
reader.onload = readerEvent => {
var content = readerEvent.target.result; // this is the content!
document
.querySelector('image#background-container')
.setAttributeNS("http://www.w3.org/1999/xlink", "href", content);
}
}
if (filePicker.files[0]) {
filePicker.onchange( {target: filePicker} );
}
document.onkeyup = (event) => {
const add_radio = document.querySelector('input[name=mode]#add'); // either 'add', 'delete', or 'move'
const delete_radio = document.querySelector('input[name=mode]#delete');
const move_radio = document.querySelector('input[name=mode]#move');
if (event.key == 'a') { add_radio.checked = true; }
if (event.key == 'd') { delete_radio.checked = true; }
if (event.key == 'g') { move_radio.checked = true; }
}
}
</script>
</html>