JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q25159F
  • License MIT

Draw beautiful geometric shapes in the browser

Package Exports

  • harmonograph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (harmonograph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🖼 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

  • v0.2.0 - Use requestAnimationFrame so there is no jank
  • v0.1.2 - Removing unused packages
  • v0.1.1 - Removing example site
  • v0.1.0 - 💥 Initial version

⬆ back to top