kopia lustrzana https://github.com/msurguy/SquiggleCam
Updated Readme
rodzic
72fe673d99
commit
dc5597bf9b
60
README.md
60
README.md
|
@ -1,2 +1,58 @@
|
|||
# SquiggleCam
|
||||
Web Based implementation of SquiggleDraw algorithm
|
||||
# Description
|
||||
|
||||
Web Based implementation of [SquiggleDraw algorithm](https://github.com/gwygonik/SquiggleDraw ), originally implemented by Gregg Wygonik.
|
||||
|
||||
The online version of this project takes a picture from your webcam and turns it into plotter-drawable SVG file.
|
||||
|
||||
Here's an example of output image generated with this tool:
|
||||
|
||||
![Image of SquiggleCam in use](https://raw.githubusercontent.com/msurguy/SquiggleCam/master/examples/description.jpg "Image of SquiggleCam output")
|
||||
|
||||
And here's my project that uses this tool:
|
||||
|
||||
![Video of SquiggleCam in use](https://raw.githubusercontent.com/msurguy/SquiggleCam/master/examples/video.jpg "Video of SquiggleCam in use")
|
||||
|
||||
|
||||
I'll soon update the code to be able to upload images as well as take webcam pictures.
|
||||
|
||||
# Installation and running
|
||||
|
||||
Clone or download this repo, then run this command to get all dependencies installed locally:
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Then, run this command to watch for changes and to launch the HTML page in the browser:
|
||||
```
|
||||
npm run watch
|
||||
```
|
||||
|
||||
The project uses [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) for ES6 conversion, file watching, code compression and development process.
|
||||
|
||||
# Algorithm
|
||||
|
||||
The algorithm processes the image in the following way:
|
||||
|
||||
```
|
||||
Retrieve photo as an array of pixels IMAGE
|
||||
Set desired number of horizontal lines as LINE_COUNT
|
||||
Set desired number of vertical spacing as SPACING
|
||||
Set desired line amplitude as AMPLITUDE
|
||||
Set desired line rotation frequency as FREQUENCY
|
||||
For y :=0 to image height step image height / LINE_COUNT do
|
||||
Set startx := 0
|
||||
Set starty := y
|
||||
Create a set of coordinates as [startx, starty]
|
||||
For x := 1 to image width step SPACING do
|
||||
Get brightness br of the current pixel as average of r,g,b values
|
||||
Set r := (255 - br) / LINE_COUNT * AMPLITUDE
|
||||
Set a := (255 - br) / FREQUENCY
|
||||
Create a set of coordinates as [x, y + Math.sin(a) * r]
|
||||
Pass the resulting array of coordinates to rendering application
|
||||
```
|
||||
|
||||
The rendering layer is based on [D3.js](https://d3js.org/) library which takes an array of points and creates SVG lines that connect those points.
|
||||
|
||||
# Using the output images
|
||||
|
||||
The output SVG file generated with this tool can be uploaded to SVG -> GCODE (or similar) converter in order to be plotted on a pen plotter or engraved on a laser cutter.
|
||||
|
|
Plik binarny nie jest wyświetlany.
Przed Szerokość: | Wysokość: | Rozmiar: 42 KiB Po Szerokość: | Wysokość: | Rozmiar: 34 KiB |
Ładowanie…
Reference in New Issue