šŸ–Œ Randomly generated geometric images
Branch: master
Clone or download
Fetching latest commitā€¦
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.gitignore
LICENSE
README.md
harmonograph.js
harmonograph.min.js
index.html
package-lock.json
package.json

README.md

šŸ–¼ Harmonograph

Randomly generated geometric images

Contents

Install

npm install harmonograph

ā¬† back to top


How to use

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
  <canvas id="harmonograph" width="800" height="800">
    This only works with modern browsers that <a href="https://caniuse.com/#feat=canvas"></a>support the `canvas`</a> element.
  </canvas>
  <script src="node_modules/harmonograph/harmonograph.min.js" ></script>
  <script>Harmonograph({ element: document.getElementById( "harmonograph" ) });</script>
</body>
</html>

ā¬† back to top


Settings

You can change the settings by adding values to the Harmonograph function. For example:

Harmonograph({
  element: document.getElementById( "harmonograph" ),
  color: '#fff',
  speed: 20,
  drawingTime: 300,
  pendulum: [{
    amplitude: 200, frequency: 2.985, phase: 2.054, damping: 0.001
  },
  {
    amplitude: 200, frequency: 3.006, phase: 1.820, damping: 0.008
  },
  {
    amplitude: 200, frequency: 3.003, phase: 2.283, damping: 0.001
  },
  {
    amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001
  }]
});

element

(object)

The html5 canvas element for the harmograph to be drawn inside.

speed

(number) default: 10

The speed at which the harmonograph is drawn adds new x and y coordinates.

color

(string) default: #000

The color of the harmonograph lines

drawingTime

(number) default: 200

How long until drawing should stop. A drawingTime of 1 would draw for 1 second.

pendulum

(array) default: Two random pendulums will be created

Two pendulums require four items ( x, y and x, y ) in the array. Each item contains an object in the array. Each object must use the following keys:

Amplitude: How far a pendulum swings back and forth, must be from 0 - 360 degrees

Frequency: How fast a pendulum swings back and forth, for best results use decimal values around 2 and 3

Phase:
The rate that a pendulum loses its energy, or slows down, must be from 0 to Ļ€

Damping:
The offset from the normal starting position of a pendulum, must be from 0 to 0.01

ā¬† back to top


Contributing

To contribute to the harmonograph project:

  1. Fork the project and clone it locally
  2. Create a new branch for the work that is going to be completed.
  3. Install dependencies npm i
  4. Make your changes to the harmonograph.js file.
  5. Run npm run build
  6. Push your work to github and create a new pull request.
  7. Respond to any code review feedback.

ā¬† back to top


Release History

  • v1.0.0 - šŸ’„ Initial version

ā¬† back to top