How to use the trianglify.defaults function in trianglify

To help you get started, we’ve selected a few trianglify examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github qrohlf / trianglify / js / components / ColorBrewerDemo.jsx View on Github external
constructor(props) {
    super(props);
    this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
  }
github nus-mtp / cubist / src / webapp / components / _containers / HomeContainer.js View on Github external
class HomeContainer extends PureComponent {
  static fetchData({ dispatch }) {
    return Promise.all([
      dispatch(ModelActions.getTopModels()),
      dispatch(ModelActions.getLatestModels())
    ]);
  }

  static propTypes = {
    latestModels: React.PropTypes.instanceOf(Immutable.List),
    topModels: React.PropTypes.instanceOf(Immutable.List)
  };

  state = {
    ...Trianglify.defaults,
    width: process.env.BROWSER ? window.innerWidth : DEFAULT_WIDTH,
    height: process.env.BROWSER ? window.innerHeight : DEFAULT_HEIGHT,
    x_colors: 'YlGnBu',
    cell_size: 40,
    resize_timer: null,
    variance: 0.75,
    seed: Math.random()
  };

  componentDidMount() {
    window.addEventListener('resize', this._onDebounceResize);
    window.addEventListener('orientationchange', this._onDebounceResize);
    this.setState({
      // Provide some offset height at initial load
      height: ReactDOM.findDOMNode(this.refs.hero).offsetHeight + 25
    });
github qrohlf / trianglify / js / components / TrianglifyOptionDemo.jsx View on Github external
constructor(props) {
    super(props);
    this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
    this.state.width = 700;
    this.state.x_colors = 'random';
    this.state.seed = Math.random().toString(36).substr(2, 5);
    if(props.demo === 'palette') {
      this.state.palette = [
  ['#468966', '#FFF0A5', '#FFB03B', '#B64926', '#8E2800'],
  ['#96CA2D', '#B5E655', '#EDF7F2', '#4BB5C1', '#7FC6BC'],
  ['#EA6045', '#F8CA4D', '#F5E5C0', '#3F5666', '#2F3440']];
    }
    if(props.demo === 'color_function') {
      this.state.color_function = function(x, y) {
        return 'hsl('+Math.floor(Math.abs(x*y)*360)+',80%,60%)';
      }
    }
  }
github qrohlf / trianglify / js / components / Hero.jsx View on Github external
constructor(props) {
    super(props);
    this.state = React.addons.update(Trianglify.defaults, {}); // Copy Trianglify.defaults instead of referencing it. Prevents heisenbugs
    this.state.height = window.innerHeight;
    this.state.width = window.innerWidth;
    this.state.x_colors = 'RdBu';
    this.state.cell_size = 40;
    this.state.resize_timer = null;
    this.state.seed = Math.random();
  }
github nus-mtp / cubist / src / webapp / components / common / TrianglifyCanvas.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import Trianglify from 'trianglify';

class TrianglifyCanvas extends React.Component {
  static defaultProps = {
    ...Trianglify.defaults
  };

  componentDidMount() {
    this._renderCanvas();
  }

  shouldComponentUpdate(nextProps) {
    for (const key in nextProps) {
      if (this.props[key] !== nextProps[key]) {
        return true;
      }
    }
    return false;
  }

  componentDidUpdate() {

trianglify

Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.

GPL-3.0
Latest version published 4 years ago

Package Health Score

50 / 100
Full package analysis

Popular trianglify functions