Tuesday 18 August 2020

js13K Day 4 - Curve Editor

 I've been doing a bit of work on the js13k mage dueling game.

I've got a paper prototype and am working on some formal rules for the game, still in progress but looks like it could be fun.

On the code side I still haven't started any actual tight game code but I have built a very simple svg editor which I needed to trace predictable svg from my art work samples. You can see this editor here https://elementalsystems.github.io/MageDuel/day3/svgedit/ which displays a SVG path (d attribute) in a edit box and draws the curve on the demo below. You can position the red circle on a point by clicking on the text representation of it. Clikcing on the diagram moves this point. 

I build this little toy because have a very specific requirement for my avatar paths - that each path has exactly the same number of points as any other which represent similar parts of the curve. Using this feature I can interpolate between two curves very efficiently and smoothly (and without byte costs).

This https://elementalsystems.github.io/MageDuel/day3/svgedit/test is a sample of this technology working in practice. Additionally there are two cool features I'm working on here: the 'paper' background is generated with svg filters and a noise function; and the fuzzyness of the lines supposed to look like chalk or charcoal which is generated using a displacement filter. I'm not really happy with either but I'm beginning to understand how to do what I want with filter effects.



No comments:

Post a Comment