search

mooyoul / geo-pattern

Create beautiful generative geometric background images from a string ✨ TypeScript port of jasonlong/geo_pattern. Supports both Node.js and Browser.
https://mooyoul.github.io/geo-pattern/
MIT License
37 stars 2 forks source link

[Question] What is the difference between "baseColor" and "color" #458

Closed Niceplace closed 1 year ago

Niceplace commented 1 year ago

Hello ! I am using your library in a personal project to generate nice backgrounds for my app and I am testing out some things. I can successfully generate patterns and limit the color space using the "color" parameter when generating the pattern but I don't understand what baseColordoes.

Based on this: https://github.com/mooyoul/geo-pattern/blob/master/src/color-preset.ts#L14 is it correct to assume that the baseColor is returned by default if coloris not specified ? :thinking:

Cheers and thanks for porting this lib, I had my eyes on the original ruby implementation for years and I am happy I finally have a project to use it in

mooyoul commented 1 year ago

Hello @Niceplace! baseColor is used for generating random color. Currently, there's only one background composer - which generates solid color background. Solid background generator selects color by its color preset mode see this. (If given ColorPreset has baseColor only, geo-pattern assumes that mode as ColorPresetMode.BaseColor see this)

Then, Generating Color is delegated to ColorGenerator. Currently, Choosing ColorGenerator is decided by checking mode of ColorPreset instance. and There are two ColorGenerator implementation.

  1. SimpleColorGenerator: It just pass-through received color.
  2. BaseColorGenerator (which is you're looking for): It converts received color as HSL color space and tweak hue and saturation values with seeded random values. It results to "random" color output.

You can test that behavior by using online demo of geo-pattern - https://mooyoul.github.io/geo-pattern/ Please note testing that behavior needs some manual work - BaseColor Checkbox toggle won't work unless you manually set color.