dmackinnon1/celtic

generator for celtic knot patterns

celtic

Generator and editors for Celtic Knot patterns. Please see the live example here: https://dmackinnon1.github.io/celtic. See these blog posts:

• http://www.mathrecreation.com/2018/09/some-knots-and-not-knots.html
• http://www.mathrecreation.com/2018/09/generating-celtic-knot-patterns.html

The classes for doing various things with the knots are spread over a few js files:

• celtic_base.js Basic knot classes.
• celtic_display.js Classes for rendering static SVG knot representations.
• celtic_editor.js Classes and functions for SVG knot editor.
• celtic_calc.js Functions that perform some calculations on the knot (crossing counts, region counts).

Some code for generating static knots below, see index.html for example of editable knot display.

example 1 - The Trefoil

//setup the grid, height 3, width 3 (results in x ranging from 0 to 4, y from 0 to 4)
let grid = new Grid(3,3);
grid.initialize();
grid.borders();
//connect nodes on secondary grid
grid.from(1,3).to(3,3);
//use a display object to create an svg
let display =  new RibbonKnotDisplay(grid, 40, 'white', 'darkblue');
let knotDiv = document.getElementById('knot');
knotDiv.innerHTML = display.init().build();

example 2 - The Figure Eight

//setup the grid, height 3, width 4 (results in x from 0 to 6, y from 0 to 4)
let grid = new Grid(3,4);
grid.initialize();
grid.borders();
//connect nodes on secondary grid
grid.from(1,1).to(1,3);
grid.from(3,1).to(5,1);
grid.from(3,3).to(5,3);	
//use a display object to create an svg
let display =  new RibbonKnotDisplay(grid, 40, 'lightblue', 'orangered');
let knotDiv = document.getElementById('knot');
knotDiv.innerHTML = display.init().build();

example 3 - A Random Knot Pattern

//setup the grid, height 10, width 10 (results in x from 0 to 18, y from 0 to 18)
let  grid = new Grid(10,10);
grid.initialize();
grid.borders();
//connect nodes on secondary grid - make a border
grid.from(1,1).to(17,17);
//connect nodes on secondary grid - generate random lines
grid.randomLines();
//use a display object to create an svg
let display =  new RibbonKnotDisplay(grid, 22, 'white', 'black');
let knotDiv = document.getElementById('knot');
knotDiv.innerHTML = display.init().build();

celtic's Issues

the 'download' button should be a 'save' button

When you save an image from the page, you are not really 'downloading' it from anywhere, merely saving the generated image off the page. So 'download' might not be the right name for the button that does this.

bug: duplicate junctions can be added through editor

duplicate junctions can be added through the editor, once added these cannot be removed.

1. remove all junctions through a point, not just the first one (in case of duplicates)
2. guard against duplicates by checking for existing before adding to the list.

consider straightening out narrow strips

When a node is constrained on one side, consider flattening it completely and pushing out the opposite boundary so that the 'strip' looks straight instead of weirdly kinked.

there is no indication what style is currently selected.

the 'style' buttons should be highlighted/selected based on the current style.

download does not respect selected style

When you click 'download' you get the image using 'style 1' regardless of selected style.

consider a black square, instead of a donut

When a node is completely boxed in, it might look better to create a large filled square, rather than leave a small node that looks like a donut hole.