Skip to content

Merging generative code/art with grid layout experiment

Notifications You must be signed in to change notification settings

hirajanwin/generative-layout

 
 

Repository files navigation

Generative Pattern Service

You can pick a specific color scheme, pattern, width, height, tilesize, and generate random patterns. You can also have a reference to a pattern you like that was generated by passing it a random seed.

Sample URL To Generate Pattern

/canvas?pattern=triangle&color=seafoam

Patterns

Default (Square)

usage: pattern=false

Triangle

usage: pattern=triangle

Circle

usage: pattern=circle

Arc

usage: pattern=arc

Line

usage: pattern=line

MMM

usage: pattern=mmm

Color Schemes

Default (Grayscale)

hex values: ['#7A7D7D','#D0CFCF','#565254']
usage: omit color param from url

Red

hex values: ['#C75146','#AD2E24','#81171B']
usage: color=red

BrightRed

hex values: ['#FF220C','#333745','#FF4B3E']
usage: color=brightred

Orange

hex values: ['#F08700', '#EFCA08', '#F49F0A']
usage: color=orange

Salmon

hex values: ['#FFAF87','#FF8E72','#ED6A5E']
usage: color=salmon

Blue

hex values: ['#006BA6', '#0496FF', '#1D3461']
usage: color=blue

Slate

hex values: ['#495867','#577399','#BDD5EA']
usage: color=slate

Purple

hex values: ['#2B193D', '#5D4E6D', '#8A7090']
usage: color=purple

Myrtle

hex values: ['#413C58','#967AA1','#ACACDE']
usage: color=myrtle

Green

hex values: ['#1E441E','#2A7221','#119822']
usage: color=green

Lime

hex values: ['#629460', '#96BE8C', '#ACECA1']
usage: color=lime

Coral

hex values: ['#F6C28B','#5296A5','82DDF0']
usage: color=coral

Jade

hex values: ['#476A6F','#519E8A','#7EB09B']
usage: color=jade

Grayscale

hex values: ['#7A7D7D', '#D0CFCF', '#565254']
usage: color=grayscale

Canvas Size

Width

sets the width of the generated canvas (if not passed into url the default is 500)
usage: width=700

Height

sets the height of the generated canvas (if not passed into url the default is 500)
usage: height: 500

Tile Size

sets height and width dimensions of "tiles" in canvas (if not passed into url the default is 53.33)
usage: tileSize=60

The Seed Param

provides an identifier or reference to a generated pattern. By default a seed=0 is passed to the url. Accessing a pattern url with a defined seed will always return the associated pattern unless the random param is set.

The Random Param

allows generation of random patterns everytime the user makes a request to the url (if not passed into url the default is false). If a parameter is not set such as pattern or color that will be randomized too
usage: random=true

About

Merging generative code/art with grid layout experiment

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 41.7%
  • CSS 39.6%
  • HTML 18.7%