Merge pull request #53 from bence-toth/diagonal-variance

Introduced diagonal option

Author: bence-toth

README.md

@@ -79,20 +79,26 @@ The options `xResolution` and `yResolution` are the only options which cannot be
 
 ### Variance
 
-| Member name            | Description                                        |
-|------------------------|----------------------------------------------------|
-| `shapeFuzz`            | Variance factor of grid points (0-1)               |
-| `colorFuzz.hue`        | Variance factor of triangle color hue (0-1)        |
-| `colorFuzz.saturation` | Variance factor of triangle color saturation (0-1) |
-| `colorFuzz.lightness`  | Variance factor of triangle color lightness (0-1)  |
-| `colorFuzz.alpha`      | Variance factor of triangle color alpha (0-1)      |
+| Member name            | Description                                                 |
+|------------------------|-------------------------------------------------------------|
+| `shapeFuzz`            | Variance factor of grid points (0-1)                        |
+| `colorFuzz.hue`        | Variance factor of triangle color hue (0-1)                 |
+| `colorFuzz.saturation` | Variance factor of triangle color saturation (0-1)          |
+| `colorFuzz.lightness`  | Variance factor of triangle color lightness (0-1)           |
+| `colorFuzz.alpha`      | Variance factor of triangle color alpha (0-1)               |
+| `diagonals`            | Either `'nw-se'`, `'ne-sw'`, `'alternating'`, or `'random'` |
 
 Variance options control how the triangles can deviate from their original shape and coloring.
 
 The option `shapeFuzz` controls how far the grid points may venture from their original location.
 
 Parameters that belong the object `colorFuzz` control how much the triangle colors may deviate from their original color. This can be controlled along all four axes of the HSLA color representation.
 
+The option `diagonals` controls which diagonals of the squares of the grid are used:
+- `'nw-se'` draws the diagonals from the top left corners to the bottom right corners (North-West - South-East)
+- `'ne-sw'` draws the diagonals from the top right corners to the bottom left corners (North-East - South-West)
+- `'alternating'` draws diagonals alternating, so that no two neighboring squares have the same diagonal
+- `'random'` draws diagonals randomly
 
 For example:
 
@@ -106,6 +112,7 @@ const options = {
     lightness:  0.1,
     alpha:      0
   },
+  diagonals: 'nw-se',
   ...
 }
 ```
@@ -264,6 +271,7 @@ let options = {
     lightness:  0.1,
     alpha:      0
   },
+  diagonals: 'nw-se',
   coloring: {
     mode: 'linearGradient',
     start: {
@@ -326,4 +334,4 @@ console.log(myNewSvgCode)
 
 Triangle Mosaic is [licensed under MIT](./LICENSE).
 
-Whatever you create with the library or web-based tool is yours and you may license it in any way you see fit.
+The images you create with the library or web-based tool are yours and you may license them in any way you see fit.

changelog.md

@@ -1,5 +1,14 @@
 # Change log
 
+## 1.1.0
+
+Bugfix: Gradients do not fail anymore if start and end point have the same x coordinates.
+
+Bugfix: Hue fuzz/variance can now correctly cross the 0-360° mark.
+
+New feature: Introduced `diagonal` option.
+
+
 ## 1.0.1
 
 Got rid of optional chaining operator as it was causing issues.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "triangle-mosaic",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Generate colorful triangle-based SVG patterns (like this point_down) with ease.",
   "main": "./triangle-mosaic/triangle-mosaic.js",
   "repository": {

package.json

@@ -17,7 +17,7 @@
     "react-scripts": "3.4.3",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "triangle-mosaic": "^1.0.1"
+    "triangle-mosaic": "^1.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

triangle-mosaic-demo/package-lock.json

@@ -26,10 +26,12 @@
 
 #sidebar > footer {
   text-align: center;
+  margin-bottom: 2rem;
 }
 
 #sidebar > footer > .byLine {
-  font-size: 1.1rem;
+  margin-top: 1rem;
+  font-size: 0.8rem;
 }
 
 #sidebar > footer a {
@@ -39,6 +41,11 @@
   text-decoration: none;
 }
 
+#sidebar > footer > .byLine a {
+  padding: 0;
+  font-size: 0.8rem;
+}
+
 #sidebar > footer a:hover,
 #sidebar > footer a:active {
   text-decoration: underline;

triangle-mosaic-demo/package.json

@@ -44,6 +44,7 @@ const App = () => {
           <Variance
             shapeFuzz={state.shapeFuzz}
             colorFuzz={state.colorFuzz}
+            diagonals={state.diagonals}
             dispatch={dispatch}
           />
           <ColoringPresets
@@ -60,36 +61,38 @@ const App = () => {
           />
         </div>
         <footer>
-          <div className='byLine'>
+          <div>
             <a
-              href='https://github.com/bence-toth'
+              href='https://github.com/bence-toth/triangle-mosaic#readme'
               target='_blank'
               rel='noopener noreferrer'
             >
-              by Bence A. Tóth
+              About
             </a>
-          </div>
-          <div>
             <a
-              href='https://github.com/bence-toth/triangle-mosaic#readme'
+              href='https://github.com/bence-toth/triangle-mosaic/issues'
               target='_blank'
               rel='noopener noreferrer'
             >
-              About
+              Report a bug
             </a>
             <a
               href='https://github.com/bence-toth/triangle-mosaic#license'
               target='_blank'
               rel='noopener noreferrer'
             >
-              License
+              License (MIT)
             </a>
+          </div>
+          <div className='byLine'>
+            made with ❤ by
+            {' '}
             <a
-              href='https://github.com/bence-toth/triangle-mosaic/issues'
+              href='https://github.com/bence-toth'
               target='_blank'
               rel='noopener noreferrer'
             >
-              Report a bug
+              Bence A. Tóth
             </a>
           </div>
         </footer>

triangle-mosaic-demo/src/components/app/app.css

@@ -32,6 +32,7 @@ const initialState = {
     lightness: 0.1,
     alpha: 0
   },
+  diagonals: 'nw-se',
   coloringMode: 'single',
   coloringSingle: {
     color: '#ffc107'
@@ -107,6 +108,7 @@ const actions = {
   updateSaturationFuzz: 'updateSaturationFuzz',
   updateLightnessFuzz: 'updateLightnessFuzz',
   updateAlphaFuzz: 'updateAlphaFuzz',
+  updateDiagonals: 'updateDiagonals',
   updateColoringMode: 'updateColoringMode',
   updateSingleColor: 'updateSingleColor',
   addSpot: 'addSpot',
@@ -185,6 +187,11 @@ const reducer = (state, action) => {
           alpha: action.alphaFuzz
         }
       }
+    case actions.updateDiagonals:
+      return {
+        ...state,
+        diagonals: action.diagonals
+      }
     case actions.updateColoringMode:
       return {
         ...state,

triangle-mosaic-demo/src/components/app/app.jsx

@@ -31,6 +31,7 @@ const getConfigFromState = ({
   yResolution,
   shapeFuzz,
   colorFuzz,
+  diagonals,
   coloringMode,
   coloringSingle,
   coloringGradient,
@@ -45,6 +46,7 @@ const getConfigFromState = ({
   }),
   shapeFuzz,
   colorFuzz,
+  diagonals,
   coloring: {
     mode: coloringMode,
     ...((coloringMode === 'single') && coloringSingle),

triangle-mosaic-demo/src/components/app/app.state.js

@@ -1,12 +1,13 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import React from 'react'
-import {func, number, object} from 'prop-types'
+import {func, number, object, oneOf} from 'prop-types'
 
 import {actions} from '../app/app.state'
 
 const Variance = ({
   shapeFuzz,
   colorFuzz,
+  diagonals,
   dispatch
 }) => (
   <fieldset>
@@ -106,11 +107,29 @@ const Variance = ({
         step={0.01}
       />
     </div>
+    <div className='formField'>
+      <label htmlFor='form-diagonals'>Diagonals</label>
+      {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+      <select
+        onChange={({target: {value}}) => dispatch({
+          type: actions.updateDiagonals,
+          diagonals: value
+        })}
+        value={diagonals}
+        id='form-diagonals'
+      >
+        <option value='nw-se'>North-West - South-East</option>
+        <option value='ne-sw'>North-East - South-West</option>
+        <option value='alternating'>Alternating</option>
+        <option value='random'>Random</option>
+      </select>
+    </div>
   </fieldset>
 )
 
 Variance.propTypes = {
   shapeFuzz: number,
+  diagonals: oneOf(['nw-se', 'ne-sw', 'alternating', 'random']),
   // eslint-disable-next-line react/forbid-prop-types
   colorFuzz: object,
   dispatch: func