A collection of classic optical illusions made with p5.js, a JavaSript library for creative coding.
To get started with p5.js, follow the instructions below.
For help in creating each illusion, navigate to the respective folder.
To see the collection in the p5 editor: https://editor.p5js.org/arthurfincham/collections/u1Rp4mLSq
| Illusion Info | Repo | Preview |
|---|---|---|
| Hermann Grid | hermann_grid | preview |
| Cafe Wall | cafe_wall | preview |
| Munker-White | munker_white | preview |
1. To include the p5.js library in your script, go to the CDN page - here you will find the latest version.
Latest release as of July 2021: https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js
Our HTML should now look as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hermann Grid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
</head>
<body>
</body>
</html>Our file structure should look like:
> p5_folder
* index.html
* sketch.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hermann Grid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>... and we are ready to code!
This may seem strange - there is no <canvas> tag in our HTML as one might expect. Our sketch.js file will create one!