https://github.com/adamspannbauer/quinep5js
A program that writes itself... artistically ✨🎨✨
https://github.com/adamspannbauer/quinep5js
generative-art p5js quine
Last synced: 7 months ago
JSON representation
A program that writes itself... artistically ✨🎨✨
- Host: GitHub
- URL: https://github.com/adamspannbauer/quinep5js
- Owner: AdamSpannbauer
- License: mit
- Created: 2021-09-25T09:04:39.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-28T08:47:28.000Z (about 4 years ago)
- Last Synced: 2025-01-13T05:28:32.279Z (9 months ago)
- Topics: generative-art, p5js, quine
- Language: JavaScript
- Homepage: https://adamspannbauer.github.io/quineP5js/
- Size: 590 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A Quine Design in p5js
From [Wikipedia]():
> A quine is a computer program which takes no input and produces a copy of its own source code as its only output. The standard terms for these programs in the computability theory and computer science literature are "self-replicating programs", "self-reproducing programs", and "self-copying programs".
This project's goal was to have a `sketch.js` file output itself to an html canvas. And as someone who uses the #generativeart tag on Instagram, I couldn't resist adding in some `noise()` to the output characters.
## How it works
To be upfront, I'm a javascript hobbyist ([my resume](https://docs.google.com/document/d/1Io4LEHVON8k9PaJNFVVoO_5M0CFdDCosaM-xzAp5MEQ/edit?usp=sharing) if you're hiring 👀), so I'm lacking some formal training. I'm not sure if I built the best way to do this, or if I jumped through some extra hoops. Regardless, I had fun and was able to learn about a very useful VSCode extension.
### Run on Save VSCode extension
The main workhorse of the whole process is found in [.vscode/settings.json](.vscode/settings.json). The [Run on Save](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave) extension does the rest.
With the below configuration, everytime the file `sketch.js` is saved, a python script is run. This python script copys the contents of `sketch.js` to a string variable. This string is then read by `sketch.js` (i.e. it's reading itself).
```json
{
"emeraldwalk.runonsave": {
"commands": [
{
"match": "sketch.js",
"cmd": "./copyFileToVar.py"
}
]
}
}
```
### The p5js sketch
I won't comment too much on the sketch itself. The workhorse functions are all fairly documented (esp by side project standards).
Note some of the coding decisions in `sketch.js` were made for design reasons rather than best practices.