基于React和Canvas的数学公式可视化图形演示

Times table interactive demo | Math visualization | canvas | React.js

canvas, math

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2375
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//require('./index.html');
//require('file?name=[name].[ext]!./index.html');

//import domready from 'domready';
//import _curry from 'lodash/curry';
'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}

var _curry = _.curry;
//import React from 'react';
//import ReactDOM from 'react-dom';

var presets = {
    'default 2': '{"density":1,"modulo":{"value":88,"minMax":[1,1200],"random":[10,50]},"times":{"value":2,"minMax":[0,20],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'default 3': '{"density":1,"modulo":{"value":88,"minMax":[1,1200],"random":[10,50]},"times":{"value":"3","minMax":[0,20],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":3,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'default 4': '{"density":1,"modulo":{"value":"155","minMax":[1,1200],"random":[10,50]},"times":{"value":"4","minMax":[0,"155"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":"130","s":50,"l":"100","a":"0.75"}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":50,"l":"0","a":"0.88"}},"width":{"value":7,"minMax":[0,99]}}}}',
    'complex': '{"density":1,"modulo":{"value":"200","minMax":[1,1200],"random":[10,50]},"times":{"value":"115","minMax":[0,"200"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":"200","s":50,"l":50,"a":0.9}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":"0","minMax":[0,99]},"to":{"value":"100","minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"247","s":50,"l":"55","a":0.9}},"width":{"value":32,"minMax":[0,99]}}}}',
    'sunny': '{"density":1,"modulo":{"value":"200","minMax":[1,1200],"random":[10,50]},"times":{"value":"51","minMax":[0,"200"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":"34","a":0.9}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"h","limits":[0,100]},"range":{"from":{"value":"0","minMax":[0,99]},"to":{"value":"100","minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"45","s":"53","l":50,"a":0.9}},"width":{"value":32,"minMax":[0,99]}}}}',
    'eclipse': '{"density":1,"modulo":{"value":"300","minMax":[1,1200],"random":[10,50]},"times":{"value":"181","minMax":[0,"300"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"260","s":"100","l":"12","a":0.9}},"width":{"value":64,"minMax":[0,99]}}}}',
    'radial': '{"density":1,"modulo":{"value":"300","minMax":[1,1200],"random":[10,50]},"times":{"value":"251","minMax":[0,"300"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":3,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'rainbow grid': '{"density":1,"modulo":{"value":"144","minMax":[1,1200],"random":[10,50]},"times":{"value":142,"minMax":[0,"144"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":"228","s":"69","l":50,"a":1}},"width":{"value":"2","minMax":[0,30]},"shadowColor":{"value":{"h":"236","s":"86","l":"54","a":1}},"shadowWidth":{"value":9,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":"100","l":"48","a":0.9}},"width":{"value":1,"minMax":[1,99]},"vary":{"value":"h","limits":[0,100]},"range":{"from":{"value":"37","minMax":[0,99]},"to":{"value":"100","minMax":[38,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":"65","l":50,"a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'core 1': '{"density":1,"modulo":{"value":"267","minMax":[1,1200],"random":[10,50]},"times":{"value":"98","minMax":[0,"267"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":"0","minMax":[0,80]},"to":{"value":"81","minMax":[1,100]},"inverted":{"value":true}},"shadow":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'inner star': '{"density":1,"modulo":{"value":"729","minMax":[1,1200],"random":[10,50]},"times":{"value":"399","minMax":[0,"729"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":"17","minMax":[0,88]},"to":{"value":"89","minMax":[18,100]},"inverted":{"value":true}},"shadow":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'triangle': '{"density":1,"modulo":{"value":"144","minMax":[1,1200],"random":[10,50]},"times":{"value":"48","minMax":[0,"144"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":3,"minMax":[1,99]},"vary":{"value":"h","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":"22","l":"25","a":0.9}},"width":{"value":4,"minMax":[0,99]}}}}',
    'fire': '{"density":1,"modulo":{"value":"544","minMax":[1,1200],"random":[10,50]},"times":{"value":"84","minMax":[0,"544"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":"310","s":50,"l":50,"a":1}},"width":{"value":"4","minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":"260","s":50,"l":"0","a":0.9}},"width":{"value":3,"minMax":[1,99]},"vary":{"value":"s","limits":[0,100]},"range":{"from":{"value":"61","minMax":[0,99]},"to":{"value":100,"minMax":[62,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"360","s":"54","l":50,"a":0.9}},"width":{"value":2,"minMax":[0,99]}}}}',
    'red': '{"density":1,"modulo":{"value":"204","minMax":[1,1200],"random":[10,50]},"times":{"value":"18","minMax":[0,"204"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":"0","s":"76","l":50,"a":1}},"width":{"value":"3","minMax":[0,30]},"shadowColor":{"value":{"h":"0","s":50,"l":"38","a":1}},"shadowWidth":{"value":22,"minMax":[0,50]}},"composite":{"value":"difference"},"linesConfig":{"color":{"value":{"h":"0","s":"59","l":"86","a":"1"}},"width":{"value":3,"minMax":[1,99]},"vary":{"value":"l","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"200","s":"14","l":"25","a":"0.31"}},"width":{"value":6,"minMax":[0,99]}}}}',
    'irregular': '{"density":1,"modulo":{"value":"204","minMax":[1,1200],"random":[10,50]},"times":{"value":"18","minMax":[0,"204"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":"0","s":"76","l":50,"a":1}},"width":{"value":"3","minMax":[0,30]},"shadowColor":{"value":{"h":"0","s":50,"l":"38","a":1}},"shadowWidth":{"value":22,"minMax":[0,50]}},"composite":{"value":"difference"},"linesConfig":{"color":{"value":{"h":"0","s":"59","l":"86","a":"1"}},"width":{"value":23,"minMax":[1,99]},"vary":{"value":"l","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"200","s":"14","l":"25","a":"0.31"}},"width":{"value":6,"minMax":[0,99]}}}}',
    'random': '{"density":1,"modulo":{"value":"99","minMax":[1,1200],"random":[10,50]},"times":{"value":"18","minMax":[0,"99"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":"0","s":"76","l":50,"a":1}},"width":{"value":"3","minMax":[0,30]},"shadowColor":{"value":{"h":"0","s":50,"l":"38","a":1}},"shadowWidth":{"value":22,"minMax":[0,50]}},"composite":{"value":"difference"},"linesConfig":{"color":{"value":{"h":"0","s":"59","l":"86","a":"1"}},"width":{"value":23,"minMax":[1,99]},"vary":{"value":"l","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":"200","s":"14","l":"25","a":"0.31"}},"width":{"value":6,"minMax":[0,99]}}}}',
    'depth': '{"density":1,"modulo":{"value":"119","minMax":[1,1200],"random":[10,50]},"times":{"value":"31","minMax":[0,"119"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":"0","s":"76","l":50,"a":1}},"width":{"value":"3","minMax":[0,30]},"shadowColor":{"value":{"h":"0","s":50,"l":"38","a":1}},"shadowWidth":{"value":22,"minMax":[0,50]}},"composite":{"value":"source-over"},"linesConfig":{"color":{"value":{"h":"15","s":"92","l":50,"a":"1"}},"width":{"value":23,"minMax":[1,99]},"vary":{"value":"l","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,87]},"to":{"value":"88","minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":50,"l":"0","a":0.9}},"width":{"value":6,"minMax":[0,99]}}}}',
    'stand out': '{"density":1,"modulo":{"value":88,"minMax":[1,1200],"random":[10,50]},"times":{"value":2,"minMax":[0,20],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":40,"l":0}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":50,"a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":5,"minMax":[0,50]}},"composite":{"value":"lighter"},"linesConfig":{"color":{"value":{"h":300,"s":50,"l":50,"a":"0.26"}},"width":{"value":3,"minMax":[1,99]},"vary":{"value":"h","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":50,"l":50,"a":0.9}},"width":{"value":28,"minMax":[0,99]}}}}',
    'void': '{"density":1,"modulo":{"value":"165","minMax":[1,1200],"random":[10,50]},"times":{"value":"11","minMax":[0,"165"],"randomMinMax":[3,20]},"showSmallCircles":false,"background":{"color":{"value":{"h":50,"s":"88","l":"97"}}},"circle":{"r":{"value":275.5},"show":{"value":true,"random":false},"color":{"value":{"h":50,"s":50,"l":"0","a":1}},"width":{"value":2,"minMax":[0,30]},"shadowColor":{"value":{"h":300,"s":50,"l":99,"a":1}},"shadowWidth":{"value":0,"minMax":[0,50]}},"composite":{"value":"darken"},"linesConfig":{"color":{"value":{"h":"206","s":"3","l":"12","a":"0.68"}},"width":{"value":2,"minMax":[1,99]},"vary":{"value":"none","limits":[0,100]},"range":{"from":{"value":0,"minMax":[0,99]},"to":{"value":100,"minMax":[1,100]},"inverted":{"value":false}},"shadow":{"color":{"value":{"h":300,"s":"0","l":"97","a":0.9}},"width":{"value":5,"minMax":[0,99]}}}}'

};

var Picker = (function() {
    //import React from 'react';

return (function(_React$Component) {
        _inherits(Picker, _React$Component);

function Picker() {
            _classCallCheck(this, Picker);

_React$Component.call(this);
            this.state = {
                color: {
                    h: 0,
                    s: 0,
                    l: 0,
                    a: 1
                }
            };
        }

Picker.prototype.componentWillMount = function componentWillMount() {
            this.state.color = this.props.color;
            this.setState(this.state);
        };

Picker.prototype.render = function render() {
            var _this = this;

return Picker;
    })(React.Component);
})();

var App = (function() {
    //import React from 'react';
    //import _set from 'lodash/set';
    //import _bind from 'lodash/bind';
    //import _curry from 'lodash/curry';
    //import _curryR from 'lodash/curryRight';
    //import _isNan from 'lodash/isNaN';
    //import _map from 'lodash/map';
    var _set = _.set;
    var _bind = _.bind;
    var _curry = _.curry;
    var _curryR = _.curryRight;
    var _isNan = _.isNaN;
    var _map = _.map;

//compositive oprations
    var cops = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];

var _parseInt = _curryR(parseInt)(10);

var extractInt = function extractInt(cb) {
        return function(e) {
            return cb(parseInt(e.target.value, 10));
        };
    };

var NumberAndRange = (function(_React$Component2) {
        _inherits(NumberAndRange, _React$Component2);

function NumberAndRange() {
            _classCallCheck(this, NumberAndRange);

_React$Component2.apply(this, arguments);
        }

NumberAndRange.prototype.render = function render() {
            return React.createElement(
                'div', {
                    className: 'numberAndRange'
                },
                React.createElement('input', {
                    type: 'number',
                    value: this.props.v.value,
                    min: this.props.v.minMax[0],
                    max: this.props.v.minMax[1],
                    onChange: extractInt(this.props.onChange)
                }),
                React.createElement('input', {
                    type: 'range',
                    value: this.props.v.value,
                    min: this.props.v.minMax[0],
                    max: this.props.v.minMax[1],
                    onChange: extractInt(this.props.onChange),
                    step: '1'
                })
            );
        };

return NumberAndRange;
    })(React.Component);

return (function(_React$Component3) {
        _inherits(App, _React$Component3);

function App() {
            _classCallCheck(this, App);

_React$Component3.call(this);
            //data, circleVisuals, background, lineVisuals, advanced
            this.state = {
                ui: {
                    activeTab: 'data',
                    showParams: false
                },
                app: {}
            };

this.actionSetValue = _curry(_bind(this.actionSetValue, this));
            this.setValue = _curry(_bind(this.setValue, this));
        }

App.prototype.componentWillMount = function componentWillMount() {
            var _this2 = this;

this.state.app = this.props.appState;
            this.setState(this.state);
            this.props.appStatePubsub.subscribe('newState', function(type, newState) {
                _this2.state.app = newState;
                _this2.setState(_this2.state);
            });
        };

App.prototype.render = function render() {
            var _this3 = this;

return React.createElement(
                'div', {
                    className: 'controls-wrapper'
                },
                React.createElement(
                    'div', {
                        className: 'controls'
                    },
                    React.createElement(
                        'div', {
                            className: 'line'
                        },
                        'Formula is: ',
                        React.createElement(
                            'code',
                            null,
                            '(i * x) % m '
                        ),
                        ' ; ',
                        React.createElement(
                            'code',
                            null,
                            'i = 0 to m'
                        )
                    ),
                    React.createElement(
                        'div', {
                            className: 'line'
                        },
                        'presets: ',
                        React.createElement(
                            'select', {
                                onChange: function(e) {
                                    _this3.props.appStatePubsub.publish('newState', JSON.parse(presets[e.target.value]));
                                }
                            },
                            _map(presets, function(p, idx) {
                                if (idx === 'sunny') {
                                    return React.createElement(
                                        'option', {
                                            selected: true,
                                            value: idx,
                                            key: idx
                                        },
                                        idx
                                    );
                                }
                                return React.createElement(
                                    'option', {
                                        value: idx,
                                        key: idx
                                    },
                                    idx
                                );
                            })
                        ),
                        'Params: ',
                        React.createElement('input', {
                            style: {
                                display: 'inline',
                                width: 'auto'
                            },
                            type: 'checkbox',
                            checked: this.state.ui.showParams,
                            onChange: function(e) {
                                _this3.state.ui.showParams = !_this3.state.ui.showParams;
                                _this3.setState(_this3.state);
                            }
                        })
                    ),
                    React.createElement(
                        'div', {
                            className: this.state.ui.showParams ? '' : 'hide'
                        },
                        React.createElement(
                            'h3', {
                                onClick: function() {
                                    _this3.state.ui.activeTab = 'data';
                                    _this3.setState(_this3.state);
                                }
                            },
                            this.state.ui.activeTab === 'data' ? '-' : '+',
                            ' Data / behavior'
                        ),
                        React.createElement(
                            'section', {
                                className: this.state.ui.activeTab === 'data' ? '' : 'hide'
                            },
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        className: 'toggle'
                                    }),
                                    'Modulo (m)',
                                    React.createElement(
                                        'div', {
                                            className: 'extra-info'
                                        },
                                        'the number of points on the circle'
                                    )
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement('input', {
                                        type: 'number',
                                        value: this.state.app.modulo.value,
                                        min: this.state.app.modulo.minMax[0],
                                        max: this.state.app.modulo.minMax[1],
                                        onChange: this.actionSetValue('modulo.value')
                                    }),
                                    React.createElement('input', {
                                        type: 'range',
                                        value: this.state.app.modulo.value,
                                        min: this.state.app.modulo.minMax[0],
                                        max: this.state.app.modulo.minMax[1],
                                        step: '1',
                                        onChange: this.actionSetValue('modulo.value')
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        className: 'toggle'
                                    }),
                                    'Times (x)',
                                    React.createElement(
                                        'div', {
                                            className: 'extra-info'
                                        },
                                        'Multiply the variable i by this value'
                                    )
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement('input', {
                                        type: 'number',
                                        value: this.state.app.times.value,
                                        min: this.state.app.times.minMax[0],
                                        max: this.state.app.times.minMax[1],
                                        onChange: this.actionSetValue('times.value')
                                    }),
                                    React.createElement('input', {
                                        type: 'range',
                                        value: this.state.app.times.value,
                                        min: this.state.app.times.minMax[0],
                                        max: this.state.app.times.minMax[1],
                                        step: '1',
                                        onChange: this.actionSetValue('times.value')
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'Line visibility'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(
                                        'span',
                                        null,
                                        this.state.app.linesConfig.range.from.value + '%',
                                        ' - ',
                                        this.state.app.linesConfig.range.to.value + '%'
                                    ),
                                    React.createElement('br', null),
                                    React.createElement(
                                        'div', {
                                            style: {
                                                border: '1px solid lightgray',
                                                borderRadius: '10px',
                                                height: 5,
                                                position: 'relative',
                                                backgroundColor: this.state.app.linesConfig.range.inverted.value ? 'green' : 'red'
                                            }
                                        },
                                        React.createElement('div', {
                                            style: {
                                                backgroundColor: this.state.app.linesConfig.range.inverted.value ? 'red' : 'green',
                                                position: 'absolute',
                                                top: 0,
                                                bottom: 0,
                                                left: this.state.app.linesConfig.range.from.value + '%',
                                                right: 100 - this.state.app.linesConfig.range.to.value + '%'
                                            }
                                        })
                                    ),
                                    React.createElement('br', null),
                                    React.createElement('input', {
                                        type: 'range',
                                        value: this.state.app.linesConfig.range.from.value,
                                        min: this.state.app.linesConfig.range.from.minMax[0],
                                        max: this.state.app.linesConfig.range.from.minMax[1],
                                        onChange: this.actionSetValue('linesConfig.range.from.value')
                                    }),
                                    React.createElement('input', {
                                        type: 'range',
                                        value: this.state.app.linesConfig.range.to.value,
                                        min: this.state.app.linesConfig.range.to.minMax[0],
                                        max: this.state.app.linesConfig.range.to.minMax[1],
                                        onChange: this.actionSetValue('linesConfig.range.to.value')
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'Invert line range'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        checked: this.state.app.linesConfig.range.inverted.value,
                                        onChange: function(e) {
                                            var checked = e.target.checked;
                                            _this3.setValue('linesConfig.range.inverted.value', checked);
                                        }
                                    })
                                )
                            )
                        ),
                        React.createElement(
                            'h3', {
                                onClick: function() {
                                    _this3.state.ui.activeTab = 'background';
                                    _this3.setState(_this3.state);
                                }
                            },
                            this.state.ui.activeTab === 'background' ? '-' : '+',
                            ' Background'
                        ),
                        React.createElement(
                            'section', {
                                className: this.state.ui.activeTab === 'background' ? '' : 'hide'
                            },
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'Background color'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(Picker, {
                                        color: this.state.app.background.color.value,
                                        id: 'backgroundColor',
                                        onChange: function(c) {
                                            _this3.setValue('background.color.value', c);
                                        }
                                    })
                                )
                            )
                        ),
                        React.createElement(
                            'h3', {
                                onClick: function() {
                                    _this3.state.ui.activeTab = 'circleVisuals';
                                    _this3.setState(_this3.state);
                                }
                            },
                            this.state.ui.activeTab === 'circleVisuals' ? '-' : '+',
                            ' Circle visuals'
                        ),
                        React.createElement(
                            'section', {
                                className: this.state.ui.activeTab === 'circleVisuals' ? '' : 'hide'
                            },
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        className: 'toggle'
                                    }),
                                    'Show circle',
                                    React.createElement(
                                        'div', {
                                            className: 'extra-info'
                                        },
                                        'not randomized'
                                    )
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        checked: this.state.app.circle.show.value,
                                        onChange: function(e) {
                                            var checked = e.target.checked;
                                            _this3.setValue('circle.show.value', checked);
                                        }
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'circle color'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(Picker, {
                                        color: this.state.app.circle.color.value,
                                        id: 'circle',
                                        onChange: function(c) {
                                            _this3.setValue('circle.color.value', c);
                                        }
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'circle line width'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement('input', {
                                        type: 'number',
                                        value: this.state.app.circle.width.value,
                                        min: this.state.app.circle.width.minMax[0],
                                        max: this.state.app.circle.width.minMax[1],
                                        step: '1',
                                        onChange: this.actionSetValue('circle.width.value')
                                    }),
                                    React.createElement('input', {
                                        type: 'range',
                                        value: this.state.app.circle.width.value,
                                        min: this.state.app.circle.width.minMax[0],
                                        max: this.state.app.circle.width.minMax[1],
                                        step: '1',
                                        onChange: this.actionSetValue('circle.width.value')
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'circle shadow color'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(Picker, {
                                        color: this.state.app.circle.shadowColor.value,
                                        id: 'circleShadowColor',
                                        onChange: function(c) {
                                            _this3.setValue('circle.shadowColor.value', c);
                                        }
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'circle shadow width'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(NumberAndRange, {
                                        v: this.state.app.circle.shadowWidth,
                                        onChange: this.setValue('circle.shadowWidth.value')
                                    })
                                )
                            )
                        ),
                        React.createElement(
                            'h3', {
                                onClick: function() {
                                    _this3.state.ui.activeTab = 'lineVisuals';
                                    _this3.setState(_this3.state);
                                }
                            },
                            this.state.ui.activeTab === 'lineVisuals' ? '-' : '+',
                            ' Line visuals'
                        ),
                        React.createElement(
                            'section', {
                                className: this.state.ui.activeTab === 'lineVisuals' ? '' : 'hide'
                            },
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'line color'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(Picker, {
                                        color: this.state.app.linesConfig.color.value,
                                        id: 'lineColor',
                                        onChange: function(c) {
                                            _this3.setValue('linesConfig.color.value', c);
                                        }
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'line width'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(NumberAndRange, {
                                        v: this.state.app.linesConfig.width,
                                        onChange: this.setValue('linesConfig.width.value')
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'vary'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(
                                        'select', {
                                            onChange: this.actionSetValue('linesConfig.vary.value'),
                                            value: this.state.app.linesConfig.vary.value
                                        },
                                        React.createElement(
                                            'option', {
                                                value: 'none'
                                            },
                                            'none'
                                        ),
                                        React.createElement(
                                            'option', {
                                                value: 'h'
                                            },
                                            'Hue'
                                        ),
                                        React.createElement(
                                            'option', {
                                                value: 's'
                                            },
                                            'Saturation'
                                        ),
                                        React.createElement(
                                            'option', {
                                                value: 'l'
                                            },
                                            'Lightness'
                                        ),
                                        React.createElement(
                                            'option', {
                                                value: 'a'
                                            },
                                            'Alpha'
                                        )
                                    )
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'Shadow color'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(Picker, {
                                        color: this.state.app.linesConfig.shadow.color.value,
                                        id: 'lineShadowColor',
                                        onChange: function(c) {
                                            _this3.setValue('linesConfig.shadow.color.value', c);
                                        }
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    'shadow width'
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(NumberAndRange, {
                                        v: this.state.app.linesConfig.shadow.width,
                                        onChange: this.setValue('linesConfig.shadow.width.value')
                                    })
                                )
                            ),
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        className: 'toggle'
                                    }),
                                    'Compositing',
                                    React.createElement(
                                        'div', {
                                            className: 'extra-info'
                                        },
                                        'Canvas compositing operation, used for line intersection'
                                    )
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement(
                                        'select', {
                                            onChange: this.actionSetValue('composite.value'),
                                            value: this.state.app.composite.value
                                        },
                                        cops.map(function(cop) {
                                            return React.createElement(
                                                'option', {
                                                    value: cop,
                                                    key: cop
                                                },
                                                cop
                                            );
                                        })
                                    )
                                )
                            )
                        ),
                        React.createElement(
                            'h3', {
                                onClick: function() {
                                    _this3.state.ui.activeTab = 'advanced';
                                    _this3.setState(_this3.state);
                                }
                            },
                            this.state.ui.activeTab === 'advanced' ? '-' : '+',
                            ' Advanced'
                        ),
                        React.createElement(
                            'section', {
                                className: this.state.ui.activeTab === 'advanced' ? '' : 'hide'
                            },
                            React.createElement(
                                'div', {
                                    className: 'line'
                                },
                                React.createElement(
                                    'div', {
                                        className: 'left'
                                    },
                                    React.createElement('input', {
                                        type: 'checkbox',
                                        className: 'toggle'
                                    }),
                                    'current setup export',
                                    React.createElement(
                                        'div', {
                                            className: 'extra-info'
                                        },
                                        'Import coming soon'
                                    )
                                ),
                                React.createElement(
                                    'div', {
                                        className: 'right'
                                    },
                                    React.createElement('input', {
                                        value: JSON.stringify(this.state.app),
                                        readOnly: true
                                    })
                                )
                            )
                        )
                    )
                )
            );
        };

App.prototype.actionSetValue = function actionSetValue(path, event) {
            var value = event.target.value;
            //value = _parseInt(value);
            this.setValue(path, value);
        };

App.prototype.setValue = function setValue(path, value) {
            var newAppState = this.state.app;
            _set(newAppState, path, value);

switch (path) {
                case 'linesConfig.range.from.value':
                    newAppState.linesConfig.range.to.minMax[0] = parseInt(value, 10) + 1;
                    break;
                case 'linesConfig.range.to.value':
                    newAppState.linesConfig.range.from.minMax[1] = parseInt(value, 10) - 1;
                    break;
                case 'modulo.value':
                    //if the modulo changes, change the times max and the value if it's bigger
                    newAppState.times.minMax[1] = value;
                    //TODO: the next line logic is too linked to the formula in the main file
                    //..if i change the formula, i need to change this also :(
                    if (_isNan(newAppState.times.value % value)) {
                        debugger;
                    }
                    //newAppState.times.value = newAppState.times.value % value;
                    if (value - 2 < appState.times.value) {
                        newAppState.times.value = value - 2;
                        if (newAppState.times.value < 0) {
                            newAppState.times.value = 0;
                        }
                    }

break;
                default:
                    break;
            }
            this.props.appStatePubsub.publish('newState', newAppState);
        };

App.prototype.actionSetModulo = function actionSetModulo(modulo) {
            var newState = this.state.app;
            newState.modulo.value = modulo;
            this.props.appStatePubsub.publish('newState', newState);
        };

App.prototype.actionSetTimes = function actionSetTimes(times) {
            var newState = this.state.app;
            newState.times.value = times;
            this.props.appStatePubsub.publish('newState', newState);
        };

return App;
    })(React.Component);
})();

var pubsub = (function() {
    //TODO: add sync/async option
    var subUid = 0;

var _publish = function _publish(topic, args, store) {
        if (!store[topic]) {
            return false;
        }
        var handle = function handle() {
            var subscribers = store[topic],
                len = subscribers ? subscribers.length : 0;

while (len--) {
                subscribers[len].func(topic, args);
            }
        };
        //setTimeout(hadle, 0);
        handle();
        return true;
    };

return function() {
        var store = {};

return {
            subscribe: function subscribe(topic, func) {
                return _subscribe(topic, func, store);
            },
            publish: function publish(topic, data) {
                return _publish(topic, data, store);
            },
            unsubscribe: function unsubscribe(token) {
                return _unsubscribe(token, store);
            }
        };
    };
})();

var appStatePubsub = pubsub();

var doublePI = Math.PI * 2;

// width and height of the css dimensions
var context = [400, 400];
var circleR = 190;
// application state
var appState = JSON.parse(presets.sunny);

// canvas representation of the state
var canvasState = {
    circle: {
        x: 0,
        y: 0,
        r: 100,
        show: true
    },
    points: [
        [10, 10]
    ],
    lines: [{
        from: [10, 10],
        to: [10, 10]
    }]
};

// give the application state, it transforms it to the canvas state
function appToCanvasState(appState) {

var r = circleR;
    var modulo = appState.modulo.value;
    var times = appState.times.value;
    var circleColor = appState.circle.color.value;
    var circleShadowColor = appState.circle.shadowColor.value;
    var backgroundColor = appState.background.color.value;

var visibilityState = appState.linesConfig.range;
    visibilityState = {
        from: visibilityState.from.value / 100,
        to: visibilityState.to.value / 100,
        inverted: visibilityState.inverted.value
    };

// the circle
    var state = {
        circle: {
            x: 0,
            y: 0,
            r: r,
            show: appState.circle.show.value,
            color: 'hsla(' + circleColor.h + ', ' + circleColor.s + '%, ' + circleColor.l + '%, ' + circleColor.a + ' )',
            width: appState.circle.width.value,
            shadowWidth: appState.circle.shadowWidth.value,
            shadowColor: 'hsla(' + circleShadowColor.h + ', ' + circleShadowColor.s + '%, ' + circleShadowColor.l + '%, ' + circleShadowColor.a + ' )'
        },
        composite: appState.composite.value,
        background: {
            color: 'hsl(' + backgroundColor.h + ', ' + backgroundColor.s + '%, ' + backgroundColor.l + '% )'
        }
    };

//calculate points, based on modulo
    var angle = 1 / modulo * doublePI;

var firstPoint = [-r, 0]; //start from the left

var points = [firstPoint];

for (var i = 1; i < modulo; i++) {
        points.push([Math.cos(Math.PI - angle * i) * r, Math.sin(Math.PI - angle * i) * r]);
    }
    state.points = points;

//lines
    var lines = [];
    var uniqueLines = {};
    for (var i = 0; i < modulo; i++) {
        var result = i * times % modulo;
        //let result = (i * times * i) % modulo;
        //let result = (Math.pow(i*times, times)) % modulo;
        if (result === i) {
            continue;
        }
        var key = result < i ? result + '-' + i : i + '-' + result;
        if (uniqueLines[key]) {
            continue;
        }
        uniqueLines[key] = true;

var lineSize = Math.abs(i - result) / (modulo / 2);
        if (lineSize > 1) {
            lineSize = 2 - lineSize;
        }

state.showSmallCircles = appState.showSmallCircles;

return state;
}

function canvasStateToCtx(state, ctx) {

//set to source-over for clearing
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = state.background.color;
    ctx.fillRect.apply(ctx, [0, 0].concat(context));

ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'hsla(300, 50%, 50%, 0.9)';

if (state.circle.show && parseInt(state.circle.width, 10)) {
        //draw the big circle
        ctx.lineWidth = state.circle.width * appState.density;
        ctx.strokeStyle = state.circle.color;

if (parseInt(state.circle.shadowWidth, 10)) {
            ctx.shadowColor = state.circle.shadowColor;
            ctx.shadowBlur = state.circle.shadowWidth;
        }

ctx.arc.apply(ctx, ptc(state.circle.x, state.circle.y).concat([state.circle.r, 0, Math.PI * 2, true]));
        ctx.stroke();
    }

ctx.strokeStyle = 'blue';

ctx.shadowColor = "hsla(360, 50%, 50%, 0.6)"; //a bit of red glow
    ctx.shadowBlur = 2;

ctx.globalCompositeOperation = state.composite;
    ctx.lineWidth = 2;
    //draw the points

if (state.showSmallCircles) {
        for (var i = 0, l = state.points.length; i < l; i++) {
            var point = state.points[i];

ctx.beginPath();
            ctx.arc.apply(ctx, ptc.apply(undefined, point).concat([4, 0, Math.PI * 2, true]));

ctx.stroke();
        }
    }

//ctx.strokeStyle = 'hsla(300, 50%, 50%, 0.9)';
    ctx.strokeStyle = state.linesConfig.colorString;
    ctx.lineWidth = state.linesConfig.width * appState.density;

ctx.shadowColor = state.linesConfig.shadow.color;
    ctx.shadowBlur = state.linesConfig.shadow.width;

//draw the lines
    //line color vary
    var vary = state.linesConfig.vary;
    for (var _iterator = state.lines, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
        var _ref;

if (_isArray) {
            if (_i >= _iterator.length) break;
            _ref = _iterator[_i++];
        } else {
            _i = _iterator.next();
            if (_i.done) break;
            _ref = _i.value;
        }

var line = _ref;

if (vary !== 'none') {
            var lineColor = state.linesConfig.color;
            switch (vary) {
                case 'h':
                    ctx.strokeStyle = 'hsla(' + line.size * 360 + ', ' + lineColor.s + '%, ' + lineColor.l + '%, ' + lineColor.a + ' )';
                    break;
                case 's':
                    ctx.strokeStyle = 'hsla(' + lineColor.h + ', ' + line.size * 100 + '%, ' + lineColor.l + '%, ' + lineColor.a + ' )';
                    break;
                case 'l':
                    ctx.strokeStyle = 'hsla(' + lineColor.h + ', ' + lineColor.s + '%, ' + line.size * 100 + '%, ' + lineColor.a + ' )';
                    break;
                case 'a':
                    ctx.strokeStyle = 'hsla(' + lineColor.h + ', ' + lineColor.s + '%, ' + lineColor.l + '%, ' + line.size + ' )';
                    break;
                case 'none':
                default:
                    break;
            }
        }

ctx.beginPath();
        ctx.moveTo.apply(ctx, ptc.apply(undefined, line.from));
        ctx.lineTo.apply(ctx, ptc.apply(undefined, line.to));
        ctx.stroke();
    }
}

function setupReact() {
    var uiRoot = document.querySelector('.ui');
    React.render(React.createElement(App, {
        appState: appState,
        appStatePubsub: appStatePubsub
    }), uiRoot);
}

function setupCanvas() {
    var canvas = document.querySelector("canvas.main");

var _canvas$getBoundingClientRect = canvas.getBoundingClientRect();

var width = _canvas$getBoundingClientRect.width;
    var height = _canvas$getBoundingClientRect.height;

width *= appState.density;
    height *= appState.density;
    canvas.width = width;
    canvas.height = height;
    context = [width, height];

appState.circle.r.value = height / 2 - 20 * appState.density;
    circleR = appState.circle.r.value;

ptc = _curry(pointToCanvas).apply(undefined, context);
    var ctx = canvas.getContext("2d");
    //ctx.translate(0.5, 0.5);
    //ctx.imageSmoothingEnabled = true;
    return ctx;
}

function start() {
    setupReact();
    var ctx = setupCanvas();

canvasState = appToCanvasState(appState);
    canvasStateToCtx(canvasState, ctx);

var shouldHandle = false;

appStatePubsub.subscribe('newState', function(topic, newAppState) {
        shouldHandle = true;
        appState = newAppState;
    });
    var frame = function frame() {
        if (!shouldHandle) {
            requestAnimationFrame(frame);
        } else {
            shouldHandle = false;
            canvasState = appToCanvasState(appState);
            canvasStateToCtx(canvasState, ctx);
            requestAnimationFrame(frame);
        }
    };
    frame();
}
domready(function() {
    start();
});

///////
// utils
///////
/**
 * 0, 140 -> totalX/2 + 0, totalY/2 - 140
 * @param x
 * @param y
 * @param totalX
 * @param totalY
 */
var pointToCanvas = function pointToCanvas(totalX, totalY, x, y) {
    var r = [totalX / 2 + x, totalY / 2 - y];
    return r;
};
var ptc = _curry(pointToCanvas).apply(undefined, context);
/**** DATA ****/
/***** Background *****/ /***** CircleVisuals *****/ /***** LineVisuals *****/

编译

CSS

HTML

Times table interactive demo | Math visualization | canvas | React.js

canvas, math

编辑器支持Emmet

快捷键

Times table interactive demo | Math visualization | canvas | React.js

canvas, math

使用svg filter和canvas实现的图像碎片化特效

使用React实现的美丽数学模式图形

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：