Skip to content

An optical illusion consisting of several cubes that move along an impossible triangular path.

License

Notifications You must be signed in to change notification settings

llop/penrose-triangle-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

penrose-triangle-js

Drawing inspiration from the Penrose triangle, this project provides an optical illusion consisting of several cubes that move along an impossible triangular path.

Image

Quick start

Options to add penrose-triangle-js to your project:

  • Install with npm: npm install penrose-triangle-js
  • Download the latest release
  • Clone the repo: git clone https://github.com/llop/penrose-triangle-js.git

Basic use

In the HTML file, a canvas is required to display the animation.

<canvas id='penrose-canvas' width='400' height='350'></canvas>

To use penrose-triangle-js, just import the script and start the animation.

<script src='penrose-triangle.js'></script>
<script>
  // start the animation when the page loads
  window.onload = () => {
    const canvas = document.getElementById('penrose-canvas');
    const penroseTriangle = new PenroseTrinagle(canvas);
    penroseTriangle.start();
  };
</script>

Advanced use

It is possible to customize the animation by providing an options object to the PenroseTriangle constructor. The default options are:

{
  triangleEdge: 300,        // length of triangle's edge in pixels
  cubeEdge: 30,             // length of cube's edge in pixels
  cubesPerTriangleEdge: 6,  // # of cubes per triangle edge
  padding: [ 50.5, 0.5 ],   // top and left padding in pixels
  loopFrames: 100,          // # of frames per loop
  lineWidth: 3,             // cube line's width in pixels
  lineColor: '#0041a3',     // cube line's color
  cubeColors: [             // colors for the cube's visible faces
    '#4f9bf7', 
    '#c0d8fc', 
    '#87b7ff' 
  ]
}

License

penrose-triangle-js is released under the MIT License. See LICENSE for details.

About

An optical illusion consisting of several cubes that move along an impossible triangular path.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published