https://github.com/pelmers/makejs.art
JavaScript formatter that turns code into ascii art
https://github.com/pelmers/makejs.art
ascii-art formatter javascript perception typescript webpack-plugin
Last synced: 5 months ago
JSON representation
JavaScript formatter that turns code into ascii art
- Host: GitHub
- URL: https://github.com/pelmers/makejs.art
- Owner: pelmers
- Created: 2021-08-04T00:26:25.000Z (almost 5 years ago)
- Default Branch: gh-pages
- Last Pushed: 2024-08-23T05:17:16.000Z (almost 2 years ago)
- Last Synced: 2025-10-23T14:02:57.921Z (8 months ago)
- Topics: ascii-art, formatter, javascript, perception, typescript, webpack-plugin
- Language: JavaScript
- Homepage: https://makejsart.pelmers.com/
- Size: 16.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Make JS Art](https://makejsart.pelmers.com/)
JavaScript formatter (I guess?) that turns your code into (executable!) ascii
art in the form of a picture.
**Example:**
**[Try it out!](https://makejsart.pelmers.com/)**
Works best with images that have a well-defined subject.
### Develop
```
git submodule init
git submodule update
yarn
yarn build
yarn jest
```
### More Details
I have published a [blog post](https://pelmers.com/making-javascript-art/) on this project.
### [Node API](https://www.npmjs.com/package/makejs.art)
Now you can also use this as a node module to programmatically turn your code into ascii art!
This will use the node-canvas library to render the provided image to an invisible buffer.
**Install**:
```
npm install makejs.art
OR
yarn add makejs.art
```
**Usage**:
```js
import { makeJsArt } from 'makejs.art';
const source = `
const a = 1;
const b = 2;
const c = a + b;
console.log(c);
`;
const art = await makeJsArt(source, {
imagePath: 'path/to/image.png',
mode: 'intensity',
cutoff: 0.5,
invert: false,
});
```
### Webpack Plugin API
This project uses its own webpack plugin to ascii artify itself!
See an example output at [index.js](/dist/index.js).
**Install**:
```
npm install makejs.art
OR
yarn add makejs.art
```
**Usage**:
In `webpack.config.js`:
```js
const { MakeJsArtWebpackPlugin } = require('makejs.art');
module.exports = {
...
plugins: [
new MakeJsArtWebpackPlugin({
/* path to an image on disk to use as base of artwork */
imagePath: 'path/to/image.png',
/* mode = intensity | saliency */
mode: 'intensity',
/* cutoff = 0.0 - 1.0 */
cutoff: 0.5,
/* invert = true | false */
invert: false,
/* ignorePatterns = [string | RegExp], if empty all .js assets are modified */
ignorePatterns: [/vendors-.*/],
}),
],
}
```