Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rolyatmax/watercolor-canvas
Creating watercolor-style canvas art
https://github.com/rolyatmax/watercolor-canvas
canvas creative-coding generative-art watercolor
Last synced: 5 days ago
JSON representation
Creating watercolor-style canvas art
- Host: GitHub
- URL: https://github.com/rolyatmax/watercolor-canvas
- Owner: rolyatmax
- License: mit
- Created: 2017-05-01T00:04:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-05-03T04:01:56.000Z (over 7 years ago)
- Last Synced: 2024-11-01T03:22:56.530Z (12 days ago)
- Topics: canvas, creative-coding, generative-art, watercolor
- Language: JavaScript
- Homepage: https://rolyatmax.github.io/watercolor-canvas
- Size: 8.76 MB
- Stars: 117
- Watchers: 6
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# watercolor-canvas
[![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)
Drawing watercolor effects to HTML canvas. Inspired by [this great blog post](http://www.tylerlhobbs.com/writings/watercolor) by [tyler hobbs](http://www.tylerlhobbs.com/).
![watercolor-canvas](/images/6.png?raw=true "watercolor-canvas")
## Install
Use [npm](https://npmjs.com/) to install.
```shell
npm install watercolor-canvas --save
```## To do:
- [x] Publish package
- [x] Let user pass in colors, positions
- [ ] Document API## Try me
[Demo](https://rolyatmax.github.io/watercolor-canvas)
Or clone this repo and run the demo:
```shell
npm install
npm start
```To develop, also run:
```shell
npm run transpile -- --watch
```## License
MIT, see [LICENSE.md](http://github.com/rolyatmax/react-geojson-map/blob/master/LICENSE.md) for details.
![watercolor-canvas](/images/2.png?raw=true "watercolor-canvas")
![watercolor-canvas](/images/1.png?raw=true "watercolor-canvas")
![watercolor-canvas](/images/3.png?raw=true "watercolor-canvas")
![watercolor-canvas](/images/4.png?raw=true "watercolor-canvas")
![watercolor-canvas](/images/5.png?raw=true "watercolor-canvas")
![watercolor-canvas](/images/7.png?raw=true "watercolor-canvas")