A web based library for customizable hacker text widgets.
npm install hackertextjshackertextjs is an animated html/javascript widget library to show matrix esque text for user defined strings.
It's purpose is to look really cool.
https://spacekitcat.github.io/hackertextjs/demosite/
Hackertextjs lets you define multiple independent widgets. Each Widget can have it's own:
* Text
* Frame rate
* Render strategy
* Text filters
You can add HackerTextJS to your project with NPM, just run the commnds below from your project's directory:
$ npm i hackertextjs --save-dev
You should find hackertext.js, style.css along with a stripped-down example project for reference purposes.
The snippet under this paragraph demonstrates the elements required to make hackertextjs work in the browser.
'hacker_text_config' must be defined before including hackertext.js. Each widget entry should define an htmlId,
text, framerate and rows field. Each htmlId must have a corresponding div block with the same ID. style.css
must be imported and each widget must use 'hackertext' as its class. The snippet below shows how a html document
in your projects root directory might make use of hackertextjs:
``html`
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
You can specify filters that act on each individual source character before displaying them on a Widget.
I use the indefinite article, but the definite article would be more accurate! LeetSourceFilter is the
only filter created so far, but the functionality is brand new, so I expect to add more in the future.
The third widget above demonstrates the use of LeetSourceFilter.
You can specify the render strategy you'd like each Widget to use. Each reander strategy changes the render behaviour for each frame.
The following are provided:
* RandomizedFrameRenderStrategy:
Generates randomized frames. Each frame uses a randomly generates noise ratio, which it then uses to generate a random frame.
`javascript`
{
htmlId: "hackertextelement",
text: "it is easy when you know how",
framerate: 5,
renderer: {
strategy: 'RandomizedFrameRenderStrategy'
},
rows: 18
}
* SinePhaseFrameRenderStrategy:
Generates randomized frames, but it uses a Sine function to control the noise ratio.The frames will iterate from 0% to 100% noise and then from 100% back down to 0%. Repeat infinity.
javascript`
{
htmlId: "hackertextelement",
text: "it is easy when you know how",
framerate: 5,
renderer: {
strategy: 'SinePhaseFrameRenderStrategy'
},
rows: 18
}
* CoSinePhaseFrameRenderStrategy:
Generates randomized frames, but it uses a Cos function to control the noise ratio.The frames will iterate from 100% to 0% noise and then from 0% back down to 100%. Repeat infinity. It's the same as SinePhaseFrameRenderStrategy, but the phase is always inverted. Using two widgets, one with CoSinePhaseFrameRenderStrategy and the other with SinePhaseFrameRenderStrategy is very nice.
javascript`
{
htmlId: "hackertextelement",
text: "it is easy when you know how",
framerate: 5,
renderer: {
strategy: 'CoSinePhaseFrameRenderStrategy'
},
rows: 18
}
`
$ cd hackertextjs
$ npm i grunt-cli -g
$ npm i
$ npx grunt
The demosite above shows hacktextjs in action with a production build (minified, transpiled to ES5 etc) artefact.
The source code for the demo is in the repository under the demosite/ folder.
The unit tests are ran as part of the Grunt build and run against the raw ES6 source code, but Karma can be ran separately (after doing a build) during development. Karma will watch the source for changes and will automatically rerun the tests every time you save a file. Pretty neat.
`
$ karma start
The integration tests are ran as part of the Grunt build and run against the final hackertextjs file. Nightwatch will boot the application and check that the frame arithmetic makes sense and that the widget actually animates. It'll do basic smoke test essentially.
N.B. Requires a local install of Firefox (and make sure it's the latest version).
Copyright (c) 2018 spacekitcat
Licensed under the MIT license.