react-watercolor

npm i react-watercolor

Or the repo and spin it up with storybook...

npm i
npm run storybook

The Maths!

numberOfPolygonsGenerated = numberOfInitialShapeLayers * numberOfOverlays

numberOfPointsInEachOverlayAfterDeform = initPolygonPoints * (2 ^ maxNumberOfRecurrsionsForInitDeform + maxNumberOfRecurrsionsForOverlayDeform)

BlackLine.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const BlackLine = () => {
  const svgHeight: number = 200
  const svgWidth: number = 500

  const horizontalLine: GenerateWaterDropDataParams = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originX: svgWidth * .5,
      originY: svgHeight * .5,
      colors: ['black'],
      opacity: .045,              
      numberOfOverlays: 3,
      numberOfInitialShapeLayers: 12,
      maxRandomNumberForInitDeform: 20,
      maxNumberOfRecurrsionsForInitDeform: 3,
      maxRandomNumberForOverlayDeform: 3,
      maxNumberOfRecurrsionsForOverlayDeform: 3,
  }
  
  const lineEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: [
          horizontalLine,
      ]
  }
  
  return (
    <WatercolorGenerator 
      {...lineEx}
    />
  )
}

Props

WatercolorGeneratorProps

Name	Type	Default	Description
svgHeight	number		Height of the svg component
svgWidth	number		Width of the svg component
watercolorShapes	GenerateWaterDropDataParams[]		The shape or shapes generated with GenerateWaterDropDataParams that will be rendered on the svg
backgroundColor?	string	'white'	The color of the svg background

GenerateWaterDropDataParams

Name	Type	Default	Description
initPolygonPoints	number		Number of points for the initial polygon that will be equal distance from each other
initPolygonRadius	number \| ((index: number) => number)		Distance that the initial points will be away from the origin point
originX	number \| ((index: number) => number)		X coordinate for initial shape origin
originY	number \| ((index: number) => number)		Y coordinate for initial shape origin, 0 being the top of the SVG
colors	string[]		First index is the color of the shape (update coming for multicolor)
opacity	number \| ((index: number) => number)		The opacity of each layer
numberOfOverlays	number		Number of overlays, each made of their own shape layers
numberOfInitialShapeLayers	number		Each shape layer is made of a randomized version of the initial polygon that was deformed
maxRandomNumberForInitDeform	number		Dictates how much variance randomly generated midpoints can have on a guassian skew with the highest likelyhood being the midpoint between this max and 0. This deforms the initial polygon that the lower layers will iterate on.
maxNumberOfRecurrsionsForInitDeform	number		The maximum number of times that a new random midpoint will be generated between two endpoints in the intial deforming.
maxRandomNumberForOverlayDeform	number		Guassian skew max for each overlay layer that will lead to more jagged deformations on generated midpoints
maxNumberOfRecurrsionsForOverlayDeform	number		The maximum number of times that a new random midpoint will be generated between two endpoints in each overlay.
initRotationAngle?	number	number \| ((index: number) => number)	Rotates the inital polygon shape in degrees.

BlueTriangle.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const BlueTriangle = () => {
  const svgHeightAndWidth = 500
  const basicTriangle: GenerateWaterDropDataParams = {
    initPolygonPoints: 3,
    initPolygonRadius: svgHeightAndWidth * .5,
    originX: svgHeightAndWidth * .5,
    originY: svgHeightAndWidth * .5,
    colors: ['blue'],
    opacity: .035,
    numberOfOverlays: 3,
    numberOfInitialShapeLayers: 12,
    maxRandomNumberForInitDeform: 20,
    maxNumberOfRecurrsionsForInitDeform: 3,
    maxRandomNumberForOverlayDeform: 3,
    maxNumberOfRecurrsionsForOverlayDeform: 3
  }
  const basicTriangleEx: WatercolorGeneratorProps = {
    svgHeight: svgHeightAndWidth,
    svgWidth: svgHeightAndWidth,
    watercolorShapes: [
      basicTriangle
    ]
  }
  
  return (
    <WatercolorGenerator 
      {...basicTriangleEx}
    />
  )
}

ThreeLines.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const ThreeLines = () => {
  const svgHeight: number = 500
  const svgWidth: number = 500

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      opacity: .035,              
      numberOfOverlays: 3,
      numberOfInitialShapeLayers: 12,
      maxRandomNumberForInitDeform: 20,
      maxNumberOfRecurrsionsForInitDeform: 3,
      maxRandomNumberForOverlayDeform: 3,
      maxNumberOfRecurrsionsForOverlayDeform: 3,
  }
  
  const horizontalLine: GenerateWaterDropDataParams = {
      originX: svgWidth * .5,
      originY: svgHeight * .25,
      colors: ['blue'],
      ...stuffThatIsTheSameForEach
  }
  
  const verticalLine: GenerateWaterDropDataParams = {
      originX: svgWidth * .25,
      originY: svgHeight * .5,
      colors: ['red'],
      initRotationAngle: 90,
      ...stuffThatIsTheSameForEach
  }
  
  const diagonalLine: GenerateWaterDropDataParams = {
      originX: svgWidth * .5,
      originY: svgHeight * .5,
      colors: ['gold'],
      initRotationAngle: 45,
      ...stuffThatIsTheSameForEach
  }
  
  export const crossingLinesEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: [
          horizontalLine,
          verticalLine,
          diagonalLine
      ]
  }
  
  return (
    <WatercolorGenerator 
      {...crossingLinesEx}
    />
  )
}

StaggeredInitRadius.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const StaggeredInitRadius = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfInitialShapeLayers = 12

  const staggerRadius: (index: number, maxRadius: number, numberOfInitialShapeLayers: number) => number = (
      index: number, 
      maxRadius: number, 
      numberOfInitialShapeLayers: number
  ) => {
      return maxRadius * (1 - (1 / numberOfInitialShapeLayers) * index)
  }
  
  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 3,
      originY: svgHeight * .5,
      colors: ['blue'],
      opacity: .035,              
      numberOfOverlays: 3,
      numberOfInitialShapeLayers: 12,
      maxRandomNumberForInitDeform: 20,
      maxNumberOfRecurrsionsForInitDeform: 3,
      maxRandomNumberForOverlayDeform: 3,
      maxNumberOfRecurrsionsForOverlayDeform: 3,
  }
  
  const staggeredRadius: GenerateWaterDropDataParams = {
      initPolygonPoints: 3,
      initPolygonRadius: (index:number) => staggerRadius(index, svgHeight * .4, numberOfInitialShapeLayers),
      originX: svgWidth * .66,
      ...stuffThatIsTheSameForEach
  }
  
  const basicTriangle: GenerateWaterDropDataParams = {
      initPolygonPoints: 3,
      initPolygonRadius: svgHeight * .4,
      originX: svgWidth * .33,
      ...stuffThatIsTheSameForEach
  }
  
  const staggeredRadiusEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: [
          basicTriangle,
          staggeredRadius
      ]
  }
  
  return (
    <WatercolorGenerator 
      {...lineEx}
    />
  )
}

BaseExample.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const BaseExample = () => {
  const svgHeight: number = 800
  const svgWidth: number = 800
  const numberOfInitialShapeLayers = 12

  const staggerRadius: (index: number, maxRadius: number, numberOfInitialShapeLayers: number) => number = (
      index: number, 
      maxRadius: number, 
      numberOfInitialShapeLayers: number
  ) => {
      return maxRadius * (1 - (1 / numberOfInitialShapeLayers) * index)
  }
  
  const base: GenerateWaterDropDataParams = {
    initPolygonPoints: 12,
    initPolygonRadius: (index:number) => staggerRadius(index, svgHeight * .35, numberOfInitialShapeLayers),
    originX: svgWidth * .5,
    originY: svgHeight * .5,
    colors: ['rgb(0, 105, 92)'],
    opacity: .015,              
    numberOfOverlays: 6,
    numberOfInitialShapeLayers: numberOfInitialShapeLayers,
    maxRandomNumberForInitDeform: 50,
    maxNumberOfRecurrsionsForInitDeform: 5,
    maxRandomNumberForOverlayDeform: 5,
    maxNumberOfRecurrsionsForOverlayDeform: 3,
  }
  
  const baseEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: [
          base
      ]
  }
  
  return (
    <WatercolorGenerator 
      {...baseEx}
    />
  )
}

Everything.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const Everything = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfInitialShapeLayers = 12

  const staggerRadius: (index: number, maxRadius: number, numberOfInitialShapeLayers: number) => number = (
      index: number, 
      maxRadius: number, 
      numberOfInitialShapeLayers: number
  ) => {
      return maxRadius * (1 - (1 / numberOfInitialShapeLayers) * index)
  }
  
  const purple: GenerateWaterDropDataParams = {
    initPolygonPoints: 12,
    initPolygonRadius: (index:number) => staggerRadius(index, svgHeight * .25, numberOfInitialShapeLayers),
    originX: svgWidth * .35,
    originY: svgHeight * .35,
    colors: ['rebeccapurple'],
    opacity: .1,              
    numberOfOverlays: 6,
    numberOfInitialShapeLayers: 3,
    maxRandomNumberForInitDeform: 100,
    maxNumberOfRecurrsionsForInitDeform: 3,
    maxRandomNumberForOverlayDeform: 25,
    maxNumberOfRecurrsionsForOverlayDeform: 3,
  }

  const aqua: GenerateWaterDropDataParams = {
      initPolygonPoints: 12,
      initPolygonRadius: (index:number) => staggerRadius(index, svgHeight * .2, numberOfInitialShapeLayers),
      originX: svgWidth * .65,
      originY: svgHeight * .65,
      colors: ['aqua'],
      opacity: .1,              
      numberOfOverlays: 6,
      numberOfInitialShapeLayers: 2,
      maxRandomNumberForInitDeform: 100,
      maxNumberOfRecurrsionsForInitDeform: 6,
      maxRandomNumberForOverlayDeform: 15,
      maxNumberOfRecurrsionsForOverlayDeform: 3,
  }

  const everythingEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: [
          purple,
          aqua
      ],
      backgroundColor: 'salmon'
  }
  
  return (
    <WatercolorGenerator 
      {...everythingEx}
    />
  )
}

Recipes

The numberOfInitialShapes determines how many base polygons will be rendered. Each one of these will have layers that are then be iterated on and further deformed with more randomized path points and more slightly deformed layers.

NumberOfInitialShapes.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const NumberOfInitialShapes: React.FC = () => {
const svgHeight: number = 500
const svgWidth: number = 1000
const numberOfShapesAndOverlays: number = 5

const calcEvenlySpacedNumbers: (fullDimension: number, index: number, numberOfPoints: number) => number = (fullDimension: number, index: number, numberOfPoints: number) => {
    const distanceBetweenPoints = fullDimension / (numberOfPoints + 1)
    return distanceBetweenPoints + (distanceBetweenPoints * index)
}

const stuffThatIsTheSameForEach = {
    initPolygonPoints: 2,
    initPolygonRadius: svgHeight * .5,
    originY: svgHeight * .5,
    colors: ['#6527BE'],
    opacity: .2,              
    numberOfInitialShapeLayers: 1,
    maxRandomNumberForInitDeform: 30,
    maxNumberOfRecurrsionsForInitDeform: 1,
    maxRandomNumberForOverlayDeform: 10,
    maxNumberOfRecurrsionsForOverlayDeform: 1,
    initRotationAngle: 90
}

const shapesArray = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
    return {
        numberOfInitialShapes: index + 1,
        originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
        ...stuffThatIsTheSameForEach
    }
})

const numberOfOverlaysEx: WatercolorGeneratorProps = {
    svgHeight: svgHeight,
    svgWidth: svgWidth,
    watercolorShapes: shapesArray,
    backgroundColor: '#A7EDE7' 
}
  
  return (
    <WatercolorGenerator 
      {...numberOfOverlaysEx}
    />
  )
}

The numberOfOverlays makes a deformed copy of the initial shape. Each one of these will have layers that are then be iterated on and further deformed with more randomized path points and more slightly deformed layers.

NumberOfOverlays.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps} from 'react-watercolor'

export default const NumberOfOverlays = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const calcEvenlySpacedNumbers: (fullDimension: number, index: number, numberOfPoints: number) => number = (fullDimension: number, index: number, numberOfPoints: number) => {
      const distanceBetweenPoints = fullDimension / (numberOfPoints + 1)
      return distanceBetweenPoints + (distanceBetweenPoints * index)
  }

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#6527BE'],
      opacity: .2,              
      numberOfInitialShapeLayers: 1,
      maxRandomNumberForInitDeform: 30,
      maxNumberOfRecurrsionsForInitDeform: 1,
      maxRandomNumberForOverlayDeform: 10,
      maxNumberOfRecurrsionsForOverlayDeform: 1,
      initRotationAngle: 90
  }

  const shapesArray = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          numberOfOverlays: index + 1,
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const numberOfOverlaysEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: '#A7EDE7' 
  }
  
  return (
    <WatercolorGenerator 
      {...numberOfOverlaysEx}
    />
  )
}

The total number of polygons that make up a shape is calculated like this...

numberOfPolygonsGenerated = numberOfInitialShapeLayers * numberOfOverlays

NumberOfInitialShapesAndOverlaysEx.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps, calcEvenlySpacedNumbers} from 'react-watercolor'

export default const NumberOfInitialShapesAndOverlaysEx: React.FC = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#6527BE'],
      opacity: .2,             
      maxRandomNumberForInitDeform: 30,
      maxNumberOfRecurrsionsForInitDeform: 1,
      maxRandomNumberForOverlayDeform: 10,
      maxNumberOfRecurrsionsForOverlayDeform: 1,
      initRotationAngle: 90
  }

  const shapesArray = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          numberOfOverlays: index + 1,
          numberOfInitialShapeLayers: index + 1,        
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const numberOfOverlaysEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: '#A7EDE7' 
  }
  
  return (
    <WatercolorGenerator 
      {...numberOfOverlaysEx}
    />
  )
}

maxRandomNumberForInitDeform controls how far midpoints that are generated can be + or - this value based on a guassian curve for the intial deforming of the shapes. These points will be further split by the overlay deformation.

MaxRandomNumberForInitDeformEx.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps, calcEvenlySpacedNumbers} from 'react-watercolor'

export default const MaxRandomNumberForInitDeformEx: React.FC = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#025464'],
      opacity: 1,              
      maxNumberOfRecurrsionsForInitDeform: 10,
      maxRandomNumberForOverlayDeform: 1,
      maxNumberOfRecurrsionsForOverlayDeform: 1,
      numberOfOverlays: 1,
      numberOfInitialShapeLayers: 1,
      initRotationAngle: 90
  }

  const shapesArray: GenerateWaterDropDataParams[] = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          maxRandomNumberForInitDeform: index * 5,
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const maxRandomNumberForInitDeformEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: 'white' 
  }
  
  return (
    <WatercolorGenerator 
      {...maxRandomNumberForInitDeformEx}
    />
  )
}

maxRandomNumberForOverlayDeform determins how far overlay generated points can vary from the initial points using the same guassian curve ideas.

MaxRandomNumberForInitDeformEx.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps, calcEvenlySpacedNumbers} from 'react-watercolor'

export default const MaxRandomNumberForInitDeformEx: React.FC = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#025464'],
      opacity: 1,              
      maxRandomNumberForInitDeform: 40,
      maxNumberOfRecurrsionsForInitDeform: 1,
      maxNumberOfRecurrsionsForOverlayDeform: 1,
      numberOfOverlays: 1,
      numberOfInitialShapeLayers: 1,
      initRotationAngle: 90
  }

  const shapesArray: GenerateWaterDropDataParams[] = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          maxRandomNumberForOverlayDeform: 25 + (index * 25),
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const maxRandomNumberForOverlayDeformEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: 'white' 
  }
  
  return (
    <WatercolorGenerator 
      {...maxRandomNumberForOverlayDeformEx}
    />
  )
}

maxNumberOfRecurrsionsForInitDeform controls how many times the initial point array will be iterated on, each time, adding a new midpoint between midpoints.

MaxNumberOfRecurrsionsForInitDeformEx.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps, calcEvenlySpacedNumbers} from 'react-watercolor'

export default const MaxRandomNumberForInitDeformEx: React.FC = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#025464'],
      opacity: 1,              
      maxRandomNumberForInitDeform: 40,
      maxRandomNumberForOverlayDeform: 1,
      maxNumberOfRecurrsionsForOverlayDeform: 2,
      numberOfOverlays: 1,
      numberOfInitialShapeLayers: 1,
      initRotationAngle: 90
  }

  const shapesArray: GenerateWaterDropDataParams[] = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          maxNumberOfRecurrsionsForInitDeform: (1 + index),
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const maxNumberOfRecurrsionsForInitDeformEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: 'white' 
  }
  
  return (
    <WatercolorGenerator 
      {...maxRandomNumberForOverlayDeformEx}
    />
  )
}

maxNumberOfRecurrsionsForOverlayDeform further deforms the initial deformed polygon for each overlay.

MaxNumberOfRecurrsionsForOverlayDeformEx.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps, calcEvenlySpacedNumbers} from 'react-watercolor'

export default const MaxNumberOfRecurrsionsForOverlayDeformEx: React.FC = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#025464'],
      opacity: 1,              
      maxRandomNumberForInitDeform: 40,
      maxNumberOfRecurrsionsForInitDeform: 2,
      maxRandomNumberForOverlayDeform: 1,
      numberOfOverlays: 1,
      numberOfInitialShapeLayers: 1,
      initRotationAngle: 90
  }

  const shapesArray: GenerateWaterDropDataParams[] = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          maxNumberOfRecurrsionsForOverlayDeform: index + 1,
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const maxNumberOfRecurrsionsForOverlayDeformEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: 'white' 
  }
  
  return (
    <WatercolorGenerator 
      {...maxRandomNumberForOverlayDeformEx}
    />
  )
}

maxNumberOfRecurrsionsForOverlayDeform and maxNumberOfRecurrsionsForInitDeform exponentially magnify each other like this...

numberOfPointsInEachOverlayAfterDeform = initPolygonPoints * (2 ^ maxNumberOfRecurrsionsForInitDeform + maxNumberOfRecurrsionsForOverlayDeform)

MaxNumberOfRecursionsForInitAndOverlaysEx.tsx

import {GenerateWaterDropDataParams, WatercolorGenerator, WatercolorGeneratorProps, calcEvenlySpacedNumbers} from 'react-watercolor'

export default const MaxNumberOfRecursionsForInitAndOverlaysEx: React.FC = () => {
  const svgHeight: number = 500
  const svgWidth: number = 1000
  const numberOfShapesAndOverlays: number = 5

  const stuffThatIsTheSameForEach = {
      initPolygonPoints: 2,
      initPolygonRadius: svgHeight * .5,
      originY: svgHeight * .5,
      colors: ['#025464'],
      opacity: 1,              
      maxRandomNumberForInitDeform: 40,
      maxNumberOfRecurrsionsForInitDeform: 2,
      maxRandomNumberForOverlayDeform: 1,
      numberOfOverlays: 1,
      numberOfInitialShapeLayers: 1,
      initRotationAngle: 90
  }

  const shapesArray: GenerateWaterDropDataParams[] = new Array(numberOfShapesAndOverlays).fill(undefined).map((item: any, index: number) => {
      return {
          maxNumberOfRecurrsionsForOverlayDeform: index + 1,
          originX: calcEvenlySpacedNumbers(svgWidth, index, numberOfShapesAndOverlays),
          ...stuffThatIsTheSameForEach
      }
  })

  const maxNumberOfRecurrsionsForOverlayDeformEx: WatercolorGeneratorProps = {
      svgHeight: svgHeight,
      svgWidth: svgWidth,
      watercolorShapes: shapesArray,
      backgroundColor: 'white' 
  }
  
  return (
    <WatercolorGenerator 
      {...maxRandomNumberForOverlayDeformEx}
    />
  )
}

react-watercolor

react-watercolor

The Maths!

BlackLine.tsx

Props

WatercolorGeneratorProps

GenerateWaterDropDataParams

BlueTriangle.tsx

ThreeLines.tsx

StaggeredInitRadius.tsx

BaseExample.tsx

Everything.tsx

Recipes

NumberOfInitialShapes.tsx

NumberOfOverlays.tsx

NumberOfInitialShapesAndOverlaysEx.tsx

MaxRandomNumberForInitDeformEx.tsx

MaxRandomNumberForInitDeformEx.tsx

MaxNumberOfRecurrsionsForInitDeformEx.tsx

MaxNumberOfRecurrsionsForOverlayDeformEx.tsx

MaxNumberOfRecursionsForInitAndOverlaysEx.tsx

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

react-watercolor

react-watercolor

The Maths!

BlackLine.tsx

Props

WatercolorGeneratorProps

GenerateWaterDropDataParams

BlueTriangle.tsx

ThreeLines.tsx

StaggeredInitRadius.tsx

BaseExample.tsx

Everything.tsx

Recipes

NumberOfInitialShapes.tsx

NumberOfOverlays.tsx

NumberOfInitialShapesAndOverlaysEx.tsx

MaxRandomNumberForInitDeformEx.tsx

MaxRandomNumberForInitDeformEx.tsx

MaxNumberOfRecurrsionsForInitDeformEx.tsx

MaxNumberOfRecurrsionsForOverlayDeformEx.tsx

MaxNumberOfRecursionsForInitAndOverlaysEx.tsx

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads