šŸ–Œ 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