ArtistAssistApp

0

ArtistAssistApp - the web app to paint better with ease. Tools for realistic color mixing based on real paints, tonal value drawing, simplified sketching, and more. Perfect for artists of all level…

Miscellaneous

art
artists
artwork
color-mix

ArtistAssistApp

TypeScript React Ant Design Vite npm

ArtistAssistApp logo

Overview

ArtistAssistApp is a Progressive Web App (PWA) for artists to accurately mix any color from a photo, analyze tonal values, turn a photo into an outline, draw with the grid method, paint with a limited palette, simplify a photo, compare photos pairwise, remove the background from an image, and more.

Try it now at ArtistAssistApp.com

Getting Started

Screenshots

Match any color from your photo or learn how to accurately mix it

color-picker-1

color-picker-2

color-picker-3

color-picker-4

Mix any colors of any brands in any proportions

color-mixing-1

color-mixing-2

color-mixing-3

color-mixing-4

Quickly access your favorite color mixtures

palette

color-swatch

Do a tonal value study

tonal-values-1

tonal-values-2

tonal-values-3

Smooth out the photo so you don't get lost in the details

simplified-1

simplified-2

simplified-3

Turn any photo into an outline

outline-1

outline-2

outline-3

Draw a grid over your reference photo

grid-square

grid-4x4

grid-3x3

Experiment with limited color palettes

limited-palette-1

limited-palette-2

Apply different artistic styles to your photo for inspiration

inspire-1

inspire-2

inspire-3

Adjust the white balance and saturation of photos of your paintings

white-balance-1

white-balance-2

white-balance-3

white-balance-4

white-balance-5

Remove backgrounds from photos of your illustrations

background-remove-1

background-remove-2

Rank your photos using pairwise comparison

pairwise-comparison-1

pairwise-comparison-2

pairwise-comparison-3

Share color sets between your devices

color-set

share-color-set

Install the app on your device for offline access

install

Implementation details

The web app doesn't depend on any math or color library and includes the implementation of the following:

  • sRGB to Oklab (WebGL),
  • sRGB to spectral reflectance,
  • subtractive color mixing using Kubelka-Munk theory,
  • matrix operations,
  • matrix inversion using LU decomposition,
  • solving a system of linear algebraic equations using forward and backward substitution,
  • the average color of the circular area of the image
  • calculation of color similarity by comparing spectral reflections (weighted geometrec mean of Pearson correlation coefficient and Euclidean distance)
  • vector operations,
  • threshold filter based on perceived lightness (WebGL),
  • Kuwahara blur filter (WebGL),
  • Sobel operator for edge detection (WebGL),
  • median cut for color quantization,
  • adjusting white balance with white patch algorithm (WebGL),
  • adjusting saturation (WebGL),
  • adjusting color levels (WebGL),
  • adjusting color temperature (WebGL),
  • invert colors filter with gamma correction (WebGL),
  • ranking images using pairwise comparison and Elo rating system,
  • and more.

The web app uses Web Workers for parallel processing and Service Workers for offline access.

Subtractive color mixing and color similarity calculation are based on the spectral reflectances of colors.

spectral-reflectance-1

spectral-reflectance-2

spectral-reflectance-3

spectral-reflectance-4