Normalize is a demo web app, that translates artworks into a WebGL scene.
The scene's geomerty is always the same, but its features depend on the artwork displayed at its side.
- The cube's rotation speed depends on overall artwork saturation;
- The 3D scene's colors depend on the average color of the artwork.
https://en.wikipedia.org/wiki/Cultural_homogenization
Refactor:
- arrow functions vs others
- clean ALL
- special functions for side effects!!! and dom commands!!!
- turn pixel functions into wasm via rust or assemblyscript
- async script in html?
- use ts
- move what can be to config file
- use redux for img etc
- separate data
// img
vs artwork
// rename go
// img wrapper vs subwrapper in css
// add deep linking
Concept:
- do some more pixel operations (small coding challenge)
- use more data from the images/ do something more spectacular
- make a cooler scene: add balls and other effects
- make it overall cooler: use microphone, camera, make it interactive... ???
- use some more nice webGL effects such as shaky shake
- input data to use: brightness, saturation, year, technique, joyfulness, keywords/labels:
- abstract or figurative // use google AI keywords: how many objects are recognized?
- consistent or surrealist // use google AI keywords + word2vec: how much distance between objects?
- alive // use google AI keywords + word2vec: label-person distance, label-animal distance...
- output: emotion, level of detail, style... // try https://cloud.google.com/vision/ and https://ml5js.org/reference/api-Sentiment/
Doc/chore:
- document functions and files
- lint
- answer questions doc
- update README
Bugs:
- why is image animation happening only certain times?
UI:
- use background position so that image is always nicely displayed
- support mobile devices: viewport, but also buttons instead of arrows
- add window resize event
- add "noise" animation in between img changes
- use arrows to navigate and display this tip on screen
- display text on screen to explain what's happening
- display variables on screen
Artworks:
- use open images
- display artist credits / artwork information
- automate artwork information retrieval -- write a scraper in node JS!
Social:
- publish on twitter
- Parcel
- WebGL
- Custom imge operations in JS, should be replaced by Wasm for a better perf :)
npm install
parcel serve index.html --public-url /
Color Histogram (contrast) Signal to noise ratio Symetry https://stackoverflow.com/questions/23213390/calculate-brighness-contrast-hue-and-saturation-level-in-an-image-using-java