Text2Color is a creative tool for converting text to colors in a intentional semi-random way. It was designed to assist artists and designers in generating ideas for color schemes when undertaking new projects. It was inspired by Community Clouds and Adobe Color. It's designed to be easy to contribute to this project. Just check out the how to contribute section before working on awesome your improvements.
The Text2Color project is a purely front-end single page web application. It uses a number of JavaScript libraries including p5.js, p5.js DOM, tensorflow.js, jQuery, and popper.js. Popper and jQuery are primarly included to support Bootstrap.
There are 3 ways to contribute. You don't need much coding experiece to contribute, but I've you've never coded I suggest you check out Dan Shiffman's excellent introduction to coding series that uses p5.js and if you've never used github he has a series on that too.
Please use the Beautify extention for VS Code to match formating or check their default specification to match the formatting yourself. The tab size used in this project is 2 spaces.
Adding a functional analyzer is fairly simple. You'll create a method in a new js file under the functionalanalyzers folder. The method must take in a string and returns a p5 color. Then import it into the index.html page and add it to the loadAnalyzers() method in application > core > loadanalyzers.js. For full instructions on the process see the section below.
As an example we'll create an new functional analyzer called Blue Velvet.
- Fork the Repository.
- Clone to your machine.
- Open in a text editor. VS Code is suggested but it doesn't matter as long as you match formating.
- Duplicate
template.jswhich is under thefunctionalanalyzersdirectory. - Rename your file. We'll call the example
bluevelvet.js. - Create a method in the new file. Here's an example:
"use strict";
/**
* Blue Velvet
*
* Creates subtlety changing blueish colors.
*
* @param {String} text
*/
function blueVelvet(text) {
colorMode(HSB, 360);
let hue = 25;
for (let i = 0; i < text.length; i++) {
hue += text.charCodeAt(i);
}
hue = hue % 50 + 200 // convert hue to be between 200 and 250
let brightness = randomFromNoise(100, 200);
return color(hue, 300, brightness);
}
- Import your analyzer under the
<!-- Functional Analyzers -->comment in the<head>theindex.htmlpage within the project directory. Example:
<script src="./functionalanalyzers/bluevelvet.js"></script>
- Add your analyzer to the
loadAnalyzers()function inapplication > core > loadanalyzers.jsusing the template found at the bottom of the file. Example:
analyzerCollection.loadFunctionalAnalyzer(
'Blue Velvet',
'Dusk Virkus',
'Creates subtlety changing blueish colors.',
blueVelvet
);
- Test your using a server. I recommend the npm http-server as a simple server. To install it make sure you have node.js installed then use comand
npm i -g http-server. After installing it you can use the comandhttp-serverand open a browser and navigate to localhost:8080. Select your analyzer under the settings panel and try it out. - If necessary made changes to your method and continue testing.
- Once you think it's done commit the changes, and push them to your forked repository. Then submit a pull request.
Note: example pull request is #21
Trained analyzers are trained neural networks created in TensorFlow.js. They have 16 inputs created by hashing the text input and 96 outputs that represent a color. Feel free to create your own networks that match this specification, see a following section for tips on doing this. But if you'd like to jump straight into creating a network without knowing much if anything about TensorFlow.js, please use the Text 2 Color Contributer Tools to do this. Once you've trained a network save it and add it to the trainedanalyzers folder and the loadAnalyers() method in application > core > loadanalyzers.js. For full instructions on this please see the following section.
Coming Soon
Use the functions in application > passthrough for conveting input and output. As said above to work with the application as it currently is designed the network must have 16 inputs and 96 outputs. If you'd like to expand the possiblities go for it just make sure application remains backwards compatable with current networks.
If you'd like to work on an issue or have an idea for a new feature feel free to go for it. Just comment on the issue before hand so multiple people don't end up working on the same thing. If you'd like to work on a new feature open a new issue with the label possible feature.