Giter VIP home page Giter VIP logo

generative-layout's Introduction

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

generative-layout's People

Contributors

gward35 avatar joshstrupp avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.