• Stars
    star
    706
  • Rank 63,680 (Top 2 %)
  • Language
    TypeScript
  • License
    BSD 3-Clause "New...
  • Created over 3 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create single line illustrations from your pictures. Get a drawing, SVG or coordinates for a CNC.

Pintr

Turn your images into plotter-like line drawings, create single line SVG illustrations from your pictures.

All the processing is made locally, your images never leave your computer and you are free to use them as you please.

pintr

Examples

Plotter Art

Thanks @sableRaph for helping me create those. Using an AxiDraw.

axidraw-pintr.mp4

Animated Example

This is an exported SVG animated using Vivus.

pintr

How does it work?

  1. The image is normalized for brightness and transformed to grayscale. See canvasDataToGrayscale. I try to make the lightest zone white, and the darkest black.
  2. A point in the canvas is selected at random and a line starts looking for different paths to draw next. At each step, the pencil draws imaginary lines to different points of the image and asks itself which one of those points would make the drawing look more like the original image, then it picks that one, draws the line and moves the cursor. The amount of imaginary lines is controlled by the "definition" slider. More lines mean more precise (but less terrifying) images. See scan functions
  3. Lines are batched to be drawn and get flushed almost every frame.
  4. Results are exported as svg as a very simple polyline, see generateSvg. PNG export is taken directly from the canvas.

Pixel data and resizing were made using canvas-image-utils, better face definition using face-api.

More Repositories

1

img2css

Convert any image to pure CSS. Recreates images using only box-shadows.
JavaScript
2,465
star
2

visual-center

Tool to better align logos in the center of a container.
JavaScript
1,410
star
3

control-user-cursor

Small experiment to 'control' the user cursor with JavaScript and CSS.
JavaScript
1,064
star
4

cohesive-colors

Tool that help you to create more cohesive color schemes. Add a tint to your existing colors.
TypeScript
519
star
5

react-blur

React component to blur image backgrounds using canvas.
JavaScript
455
star
6

emoji-to-scale

Your favorite emojis. To real-life scale, more or less.
JavaScript
348
star
7

clashjs

Javascript AI battle game. Play by creating a javascript function to command your battleship.
JavaScript
245
star
8

docs2epub

Doc scraper and ebook generator / library. [unmaintained]
JavaScript
235
star
9

gitpage-timemachine

Visualize the evolution of your website in a 3D time-machine fashion.
Vue
160
star
10

brutalita

Brutalita is an experimental font and font editor, edit in your browser and download OTF.
TypeScript
152
star
11

react-number-easing

React component to interpolate rendering of numbers in the frontend.
JavaScript
150
star
12

react-textgradient

Text gradients with CSS with SVG fallback. [unmaintained]
JavaScript
122
star
13

morphin

Create pixel art interpolations from your own sprites and embed them in your website with only CSS.
JavaScript
81
star
14

canvas-image-utils

Utils for image data.
TypeScript
63
star
15

react-textselect

Select dropdown over text React component. [unmaintained]
JavaScript
49
star
16

colorblendjs

Color blends for javascript.
HTML
36
star
17

timelapses

JavaScript
35
star
18

react-tour

Create nice step-by-step intros with React. [unmaintained]
JavaScript
30
star
19

droste-creator

Create recursive images with the droste effect.
JavaScript
29
star
20

triangulator

Delaunay triangulation image generator.
JavaScript
16
star
21

react-native-ui

Fancy UI components for react-native
JavaScript
12
star
22

sentence-length-art

Tool that helps you visualize the length of your sentences.
JavaScript
12
star
23

color-sort

A simple lib for sorting colors by perception.
JavaScript
8
star
24

the-only-website-builder

[WIP] You are going to design a website like this anyway... let's do it the easy way
CSS
8
star
25

get-video-screenshot

Library to capture screnshots / thumbnails as images from a videos. Only works in the browser.
JavaScript
7
star
26

react-clickaway

Clickaway mixin for react, based on https://github.com/callemall work
JavaScript
7
star
27

react-app-starter

React starter boilerplate for small apps.
JavaScript
5
star
28

basic-stl-generator

Basic utils to generate a STL file in javascript
JavaScript
4
star
29

actualizar

Update every npm dependency to `@latest`.
JavaScript
4
star
30

react-color-range

Super tiny color input ranges for React.
JavaScript
3
star
31

lightroom-interpolator

Interpolate lightroom edits between photos for better timelapses.
JavaScript
3
star
32

swtimer

Startupweekend Timer
JavaScript
3
star
33

tronmmo

A TRON-style MMO game, made with nodejs and canvas.
JavaScript
3
star
34

cutereset

Small and cute flexbox ready css reset.
CSS
2
star
35

dancing-dots

A js lib to get nice moving dot coordinates.
JavaScript
2
star
36

points

Experiment with live image filters
Vue
1
star
37

time-remaning-estimator

Estimate the remaining time for any process with known progress.
1
star
38

webworker-demo

Demo para GDLJS
JavaScript
1
star
39

project-euler

JavaScript
1
star