bryanracic/svgdragoncurve-reactjs

Draws a Heighway Dragon Curve using only React JS & SVG library

Heighway Dragon Curve

A recursive fractal curve for design purposes

This example is based on the following equation:

S_n0 = 1 (right turn) 
(S_n)' = the opposite and reversed S_n
S_(n+1) = S_n + 1 + (S_n)'

Sources

• Dragon curves revisited - S. Tabachnikov∗

Yarn Usage:

$ yarn init 
$ yarn create react-app appname
$ cd appname
$ yarn start

React JS Notes

Components can be classes or functions, child components can inherit variables called props

Components use this.props.propname, instead of just prop.propname (which is reserved for classes)

EX.

    ReactDOM.render() {
        <componentName variableName = {variableValue}/>
    }
    function componentName (props){
        const variableName = props.variableName;
    }

svgdragoncurve-reactjs's Issues

Reorganize & Clean

var baseCurvePoints = [1,1,0,1,1,0,0,1,1,1....]
var curveCoord = [0,0 0,10....]
calcCurve(numIter)
calcCoord()
updateLine(numLines)

Round Corners of <polyline>

May require replacing polyline w/ another object

REMOVE GLOBAL VARS

Fix inheritance in DragonCurve.js

Fix Curve Animation

Should animate one line at a time: origin -> complete curve -> origin