<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Jeremboo/pen/jVNVqr?limit=all&page=72&q=app" />
<style class="cp-pen-styles">body,
html,
#app {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #4f8edb;
margin: 0;
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.f {
position: fixed;
bottom: 5px;
right: 15px;
font-family: 'Arial';
font-size: 0.7rem;
color: #30508f;
text-align: center;
}
.f a {
font-size: 0.8rem;
color: #fff;
}
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 3em;
}
.title,
.subtitle {
text-align: center;
line-height: 1;
margin: 0;
color: #fff;
}
</style></head><body>
<!-- Inspiration : Alex the CSS Husky by @davidkpiano-->
<!-- https://codepen.io/davidkpiano/pen/wMqXea-->
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.js'></script>
<script >var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
window.CP.exitedLoop(2);
return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(3)){break;}if (window.CP.shouldStopExecution(3)){break;} var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
window.CP.exitedLoop(3);
window.CP.exitedLoop(3);
} return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Component = React.Component;
var PropTypes = React.PropTypes;
var CONST = {
SCALE: 15, // 5
BASE_FREQUENCY: 0.04, // 0.03
NUM_OCTAVE: 2,
TYPE: 'fractalNoise', // fractalNoise | turbulence
FREQ: 50
};
var gui = new dat.GUI();
gui.add(CONST, 'SCALE', 0, 50);
gui.add(CONST, 'BASE_FREQUENCY', 0, 1.0);
gui.add(CONST, 'NUM_OCTAVE', 1, 5).step(1);
gui.add(CONST, 'TYPE', ['fractalNoise', 'turbulence']);
gui.add(CONST, 'FREQ', 25, 500);
var getRandomInt = function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var getRandomFloat = function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
};
var SquigglyContainer = function (_Component) {
_inherits(SquigglyContainer, _Component);
function SquigglyContainer(props) {
_classCallCheck(this, SquigglyContainer);
var _this = _possibleConstructorReturn(this, (SquigglyContainer.__proto__ || Object.getPrototypeOf(SquigglyContainer)).call(this, props));
_this.state = {
id: 0,
seed: 0,
scale: 2,
baseFrequency: 0.02,
numOctaves: 3,
type: 'turbulence'
};
_this.loop = _this.loop.bind(_this);
return _this;
}
_createClass(SquigglyContainer, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.loop();
}
}, {
key: 'loop',
value: function loop() {
var id = this.state.id + 1 % 10;
this.setState({
id: id,
seed: id,
scale: CONST.SCALE,
baseFrequency: CONST.BASE_FREQUENCY,
numOctaves: CONST.NUM_OCTAVE,
type: CONST.TYPE
});
setTimeout(this.loop, CONST.FREQ);
}
}, {
key: 'render',
value: function render() {
return React.createElement(
'div',
{ style: { filter: 'url(\'#squiggly-' + this.state.id + '\')' } },
React.createElement(Squiggly, _extends({ id: this.state.id }, this.state)),
this.props.children
);
}
}]);
return SquigglyContainer;
}(Component);
SquigglyContainer.propTypes = {
children: React.PropTypes.node
};
SquigglyContainer.defaultProps = {
children: null
};
var Squiggly = function Squiggly(props) {
var baseFrequency = props.baseFrequency,
numOctaves = props.numOctaves,
type = props.type,
seed = props.seed,
scale = props.scale;
var turbulenceProps = {
baseFrequency: baseFrequency,
numOctaves: numOctaves,
type: type,
seed: seed
};
var displacementMapProps = {
scale: scale
};
return React.createElement(
'svg',
{ style: { display: 'none' } },
React.createElement(
'defs',
null,
React.createElement(
'filter',
{ id: 'squiggly-' + props.id },
React.createElement('feTurbulence', _extends({}, turbulenceProps, {
result: 'noise'
})),
React.createElement('feDisplacementMap', _extends({}, displacementMapProps, {
'in': 'SourceGraphic',
xChannelSelector: 'R',
yChannelSelector: 'G'
}))
)
)
);
};
Squiggly.propTypes = {
id: PropTypes.number.isRequired,
baseFrequency: PropTypes.number,
numOctaves: PropTypes.number,
seed: PropTypes.number,
scale: PropTypes.number,
type: PropTypes.string
};
Squiggly.defaultProps = {
baseFrequency: 0.02,
numOctaves: 3,
seed: 0,
scale: 2,
type: 'turbulence'
};
ReactDOM.render(React.createElement(
SquigglyContainer,
null,
React.createElement(
'div',
{ className: 'content' },
React.createElement(
'h1',
{ className: 'title' },
'Codevember'
),
React.createElement(
'p',
{ className: 'subtitle' },
'day 2'
)
),
React.createElement(
'p',
{ className: 'f' },
React.createElement(
'a',
{ target: '_blank', href: 'http://www.jeremieboulay.fr' },
'@Jeremboo'
),
React.createElement('br', null),
' \u2517|\uFF40O\xB4|\u251B'
)
), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
