@aladas-org/p5-patterns

P5-patterns 0.0.21

Description
This is an extension for P5.js (2D client side drawing library). The purpose of this extension is to ease the generation of tiled/wallpaper/grid patterns. The pattern design is described by a JSON file (e.g. Truchet_PieQuarter.json).

NB: A custom Json Preprocessor (https://github.com/ALADAS-org/json-preprocessor) is used. This is optional of course but thise allows the usage of Named colors (instead of the RGB values in hexadecimal).

1. Release Notes

   • 1.1. 0.0.21
   • Usage of a custom Json Preprocessor for the color palette of Truchet_PieQuarter and PolygramDemo patterns
   • Support of 3 and 4 branches stars (Shuriken like shapes)
   • 1.2. 0.0.20: added Polygram shape (Polygon an N-star)

2. Usage

   • 2.1. Install
   • Open a Command Line (cmd.exe)
   • Input these command:
     • git clone https://github.com/ALADAS-org/p5-Patterns.git
     • cd p5-Patterns
     • npm install

   • 2.2. Launch a local Http server with run.bat script

   • 2.3. Double click on demo: it's a URL shortcut (128.0.0.1:8080/)

3. Pattern language (JSON)

   • Name
     pattern's name, optional but useful if you want to display it in the title bar or status bar

   • Description
     Explains the pattern design, typically it may provide URL(s) to document the principle used (e.g. Truchet

   • Categories
     Used to classify patterns (e.g. Truchet)

   • GridSize
     Grid size in Cell unit, the number of Cells in a row (width) and column (height) of the Grid (e.g. { "width": 27, "height": 15 })

   • CellSize
     Cell size in pixel unit (e.g. { "width": 20, "height": 20 })

   • MaxCellValue
     Each Cell should have a Value (which is typically random), thus MaxCellValue defines the last included version of the values interval (e.g. [0..7], the first value of the interval is always 0)

   • BackgroundColor
     Defines the Background color of the Grid (e.g. #000000 for Black)

   • Shapes
     Defines the Shapes for each possible Cell value (e.g. [0..MaxCellValue]). Available shapes: Line, Rectangle, Ellipse (Ellipse and Arc of Ellipse), Polygram (Polygon and N-star).
     Please find below an extract from Truchet_PieQuarter.json pattern definition file.

	"@include": { "src": "includes/color_palette_Sepia.json", "#type": "COLOR_PALETTE" },
	
    "Shapes": {	
	    "0": [ { "Shape": "Ellipse", "FillColor": "$DoubleSpanishWhite", "Arc": { "start": 0, "end": 90 } } ],
        "1": [ { "Shape": "Ellipse", "FillColor": "$IndianKhaki", "Arc": { "start": 90, "end": 180 } } ],		
		"2": [ { "Shape": "Ellipse", "FillColor": "$Shadow", "Arc": { "start": 180, "end": 270 } } ],	
        ...			  
     }

Note: To force refresh it may be needed to use CTRL F5 to force refresh of the Browser cache. In some cases it's better to close and restart the local Http server