cleanup on aisle 5

NeoBrush-P5js/js/neobrush.js

@@ -0,0 +1,135 @@
+'use strict';
+
+$(function() {
+    $('a.color-source').click(function(event) {
+        event.preventDefault();
+        $('a.color-source').removeClass('active');
+        $(this).addClass('active');
+        updateSource($(this).index() + 1);
+    });
+    $('.preset').click(function(event) {
+        event.preventDefault();
+        choosePreset($(this).index());
+    });
+});
+
+var lines = [];
+var colors = [];
+var src, canvas, art;
+var ui = {};
+
+function choosePreset(id) {
+    switch (id) {
+        case 0:
+            ui.numberOfLines.value(100);
+            ui.easing.value(0.25);
+            ui.easingJitter.value(0.1);
+            ui.speed.value(0.3);
+            ui.speedJitter.value(0.1);
+            ui.vertices.value(8);
+            ui.verticesJitter.value(1);
+            break;
+        case 1:
+            ui.numberOfLines.value(11);
+            ui.easing.value(0.1);
+            ui.easingJitter.value(0);
+            ui.speed.value(0.1);
+            ui.speedJitter.value(0);
+            ui.vertices.value(30);
+            ui.verticesJitter.value(1);
+            break;
+        case 2:
+            ui.numberOfLines.value(10);
+            ui.easing.value(0.67);
+            ui.easingJitter.value(0);
+            ui.speed.value(0.18);
+            ui.speedJitter.value(0.1);
+            ui.vertices.value(25);
+            ui.verticesJitter.value(4);
+            break;
+        case 3:
+            ui.numberOfLines.value(25);
+            ui.easing.value(0.42);
+            ui.easingJitter.value(0.1);
+            ui.speed.value(0.45);
+            ui.speedJitter.value(0.02);
+            ui.vertices.value(8);
+            ui.verticesJitter.value(1);
+            break;
+        case 4:
+            ui.numberOfLines.value(200);
+            ui.easing.value(0.28);
+            ui.easingJitter.value(0.19);
+            ui.speed.value(0.12);
+            ui.speedJitter.value(0.47);
+            ui.vertices.value(11);
+            ui.verticesJitter.value(2);
+            break;
+    }
+}
+
+function setup() {
+    background(0);
+    updateSource(1);
+    canvas = createCanvas(975, 700);
+    canvas.parent('neobrush');
+
+    art = createGraphics(canvas.width, canvas.height);
+    art.background(0);
+
+    ui.numberOfLines = getElement('number-of-lines');
+    ui.easing = getElement('easing');
+    ui.easingJitter = getElement('easing-jitter');
+    ui.speed = getElement('speed');
+    ui.speedJitter = getElement('speed-jitter');
+    ui.vertices = getElement('vertices');
+    ui.verticesJitter = getElement('vertices-jitter');
+    ui.clear = getElement('clear');
+    ui.clear.mousePressed(clearme);
+    ui.save = getElement('save');
+    ui.save.mousePressed(saveme);
+
+    ui.preset = getElement('save-preset');
+}
+
+function draw() {
+    background(0);
+    for (var i = 0; i < lines.length; i++) {
+        lines[i].update();
+        lines[i].render();
+    }
+    image(art, 0, 0, canvas.width, canvas.height);
+}
+
+function updateSource(index) {
+    colors = [];
+    src = loadImage('img/source-' + index + '.jpg', function(img) {
+        for (var x = 0; x < src.width; x++) {
+            for (var y = 0; y < src.height; y++) {
+                colors.push(img.get(x, y));
+            }
+        }
+    });
+}
+
+function mousePressed() {
+    for (var i = 0; i < ui.numberOfLines.value(); i++) {
+        var easing = ui.easing.value() + random(-ui.easingJitter.value(), ui.easingJitter.value());
+        var speed = ui.speed.value() + random(-ui.speedJitter.value(), ui.speedJitter.value());
+        var vertices = ui.vertices.value() + random(-ui.verticesJitter.value(), ui.verticesJitter.value());
+        var line = new SketchLine(vertices, easing, speed, colors);
+        lines.push(line);
+    }
+}
+
+function mouseReleased() {
+    lines = [];
+}
+
+function clearme() {
+    art.background(0);
+}
+
+function saveme() {
+    art.get().save('png');
+}

NeoBrush-P5js/js/sketchline.js

@@ -0,0 +1,45 @@
+'use strict';
+
+function SketchLine(_numberOfVertices, _easeFactor, _speedFactor, _colors) {
+
+    this.numberOfVertices = _numberOfVertices;
+    this.easeFactor = _easeFactor;
+    this.speedFactor = _speedFactor;
+    this.colors = _colors;
+
+    this.curveVertices = [];
+    this.distances = [];
+    this.endPoints = [];
+
+    this.colorIndex = 0;
+
+    for (var i = 0; i < this.numberOfVertices; i++) {
+        this.curveVertices[i] = createVector(mouseX, mouseY);
+        this.distances[i] = createVector(0, 0);
+        this.endPoints[i] = createVector(0, 0);
+    }
+}
+
+SketchLine.prototype.update = function() {
+    this.colorIndex = (this.colorIndex < this.colors.length) ? this.colorIndex + 1 : 0;
+    for (var i = 0; i < this.numberOfVertices; i++) {
+        this.distances[i].x = (i === 0) ? mouseX - this.curveVertices[0].x : this.curveVertices[i - 1].x - this.curveVertices[i].x;
+        this.distances[i].y = (i === 0) ? mouseY - this.curveVertices[0].y : this.curveVertices[i - 1].y - this.curveVertices[i].y;
+        this.distances[i].mult(this.easeFactor);
+        this.endPoints[i].add(this.distances[i]);
+        this.curveVertices[i].add(this.endPoints[i]);
+        this.endPoints[i].mult(this.speedFactor);
+    }
+};
+
+SketchLine.prototype.render = function() {
+    art.beginShape();
+    for (var i = 0; i < this.numberOfVertices; i++) {
+        art.noFill();
+        art.strokeWeight(1);
+        var c = this.colors[this.colorIndex]
+        art.stroke(c[0], c[1], c[2], 30);
+        art.curveVertex(this.curveVertices[i].x, this.curveVertices[i].y);
+    }
+    art.endShape();
+};

README.md

@@ -5,8 +5,8 @@ A crazy new paintbrush to tickle your brainballs.
 
 ## examples
 
-![example](http://31.media.tumblr.com/81e5b5a73121b858ea1d3a4b7845ac67/tumblr_mrk1umf9lq1qa3relo4_1280.png)
+![example](https://s3-us-west-2.amazonaws.com/the816/neobrush-1.jpg)
 
-![example](http://24.media.tumblr.com/3ccbdeefd3df7f989bb3ce2d5bbd497d/tumblr_mrk1umf9lq1qa3relo3_1280.png)
+![example](https://s3-us-west-2.amazonaws.com/the816/neobrush-2.jpg)
 
-![example](http://24.media.tumblr.com/cbfd318df1033d92012811e562fdd826/tumblr_mrk1umf9lq1qa3relo2_1280.png)
+![example](https://s3-us-west-2.amazonaws.com/the816/neobrush-3.jpg)