Gradient Orientation Javascript

A solution to draw strokes in Javascript based on gradient orientation. Uses p5.js.

HTML

<script src="http://cdn.jsdelivr.net/p5.js/0.3.9/p5.min.js"></script>
    <img src="http://lorempixel.com/300/400/people/5" />

CSS

img, canvas {
    float: left;
}

JavaScript

/* NOTE: IF CHROME IS BLOCKING THE IMAGE, TRY WITH ANOTHER BROWSER OR IN LOCAL. SAFARI WORKS FINE. */

    var img, vectors;
    
    var cellSize = 2; // for faster rendering we can stroke less lines
    var linesLength = 20;
    var strokeThickness = 1; 
        
    function preload() { 
      img =...