From dc8fa0beb42e02f47e62bc820c59f64dc64c045d Mon Sep 17 00:00:00 2001 From: ericrius1 Date: Mon, 3 Aug 2015 11:15:14 -0700 Subject: [PATCH] added painting scripts to demonstrate one way to use the PolyLineEntity --- .../painting/hydraPaint.js} | 38 +++--- .../painting/mousePaint.js} | 116 +++++------------- 2 files changed, 46 insertions(+), 108 deletions(-) rename examples/{hydraPolyLinePaint.js => example/painting/hydraPaint.js} (87%) rename examples/{mousePolyLinePaint.js => example/painting/mousePaint.js} (65%) diff --git a/examples/hydraPolyLinePaint.js b/examples/example/painting/hydraPaint.js similarity index 87% rename from examples/hydraPolyLinePaint.js rename to examples/example/painting/hydraPaint.js index 1c20655a03..29a3323e72 100644 --- a/examples/hydraPolyLinePaint.js +++ b/examples/example/painting/hydraPaint.js @@ -19,20 +19,19 @@ var LASER_COLOR = { green: 150, blue: 200 }; -var TRIGGER_THRESHOLD = .02; +var TRIGGER_THRESHOLD = .1; -var MAX_POINTS_PER_LINE = 50; +var MAX_POINTS_PER_LINE = 40; var LIFETIME = 6000; -var DRAWING_DEPTH = 2; -var LINE_DIMENSIONS = 100; +var DRAWING_DEPTH = 1; +var LINE_DIMENSIONS = 20; -var DISTANCE_FROM_HAND = 2; var MIN_POINT_DISTANCE = 0.01; -var MIN_BRUSH_RADIUS = 0.04; -var MAX_BRUSH_RADIUS = 0.08; +var MIN_BRUSH_RADIUS = 0.08; +var MAX_BRUSH_RADIUS = 0.1; var RIGHT_BUTTON_1 = 7 var RIGHT_BUTTON_2 = 8 @@ -44,9 +43,9 @@ var LEFT_BUTTON_3 = 3; var LEFT_BUTTON_4 = 4; var colorPalette = [{ - red: 10, - green: 208, - blue: 60 + red: 250, + green: 0, + blue: 0 }, { red: 214, green: 91, @@ -84,6 +83,8 @@ function controller(side, cycleColorButton) { this.currentColorIndex = 0; this.currentColor = colorPalette[this.currentColorIndex]; + var self = this; + this.brush = Entities.addEntity({ type: 'Sphere', @@ -107,7 +108,6 @@ function controller(side, cycleColorButton) { } } this.newLine = function(position) { - print("NEW LINE") this.linePosition = position; this.line = Entities.addEntity({ position: position, @@ -118,7 +118,6 @@ function controller(side, cycleColorButton) { y: LINE_DIMENSIONS, z: LINE_DIMENSIONS }, - lineWidth: 0.1, lifetime: LIFETIME }); this.points = []; @@ -128,7 +127,6 @@ function controller(side, cycleColorButton) { this.update = function(deltaTime) { this.updateControllerState(); - var newBrushPosOffset = Vec3.multiply(Vec3.normalize(Vec3.subtract(this.tipPosition, this.palmPosition)), DRAWING_DEPTH); var newBrushPos = Vec3.sum(this.palmPosition, newBrushPosOffset); var brushRadius = map(this.triggerValue, TRIGGER_THRESHOLD, 1, MIN_BRUSH_RADIUS, MAX_BRUSH_RADIUS) @@ -144,16 +142,16 @@ function controller(side, cycleColorButton) { if (this.triggerValue > TRIGGER_THRESHOLD && !this.drawing) { - this.newLine(this.palmPosition); + this.newLine(newBrushPos); this.drawing = true; } else if (this.drawing && this.triggerValue < TRIGGER_THRESHOLD) { this.drawing = false; } - if (this.drawing) { + if (this.drawing && this.points.length < MAX_POINTS_PER_LINE) { var localPoint = Vec3.subtract(newBrushPos, this.linePosition); if (Vec3.distance(localPoint, this.points[this.points.length - 1]) < MIN_POINT_DISTANCE) { - // print("NOT ENOUGH DISTANCE BETWEEN POINTS!!"); + //Need a minimum distance to avoid binormal NANs return; } @@ -170,12 +168,6 @@ function controller(side, cycleColorButton) { color: this.currentColor }); - if (this.points.length > MAX_POINTS_PER_LINE) { - this.newLine(newBrushPos); - this.points.push(Vec3.subtract(newBrushPos, this.linePosition)); - this.normals.push(computeNormal(newBrushPos, Camera.getPosition())); - this.strokeWidths.push(MIN_STROKE_WIDTH); - } } } @@ -200,7 +192,7 @@ function controller(side, cycleColorButton) { } this.cleanup = function() { - Entities.deleteEntity(this.brush); + Entities.deleteEntity(self.brush); } } diff --git a/examples/mousePolyLinePaint.js b/examples/example/painting/mousePaint.js similarity index 65% rename from examples/mousePolyLinePaint.js rename to examples/example/painting/mousePaint.js index 14949c6c5c..30a2e1fbf9 100644 --- a/examples/mousePolyLinePaint.js +++ b/examples/example/painting/mousePaint.js @@ -1,5 +1,5 @@ // -// paint.js +// mousePaint.js // examples // // Created by Eric Levin on 6/4/15. @@ -10,39 +10,42 @@ // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html -var LINE_DIMENSIONS = 5; + +var LINE_DIMENSIONS = 10; var LIFETIME = 6000; var EVENT_CHANGE_THRESHOLD = 200; -var LINE_WIDTH = .05; -var MAX_POINTS = 10; +var LINE_WIDTH = .07; +var MAX_POINTS_PER_LINE = 40; var points = []; var normals = []; +var deletedLines = []; var strokeWidths = []; var count = 0; -var prevEvent = null; +var prevEvent = {x: 0, y: 0}; +var eventChange; var MIN_POINT_DISTANCE = .01; var colorPalette = [{ - red: 236, - green: 208, - blue: 120 + red: 250, + green: 0, + blue: 0 }, { - red: 214, - green: 91, - blue: 67 + red: 214, + green: 91, + blue: 67 }, { - red: 192, - green: 41, - blue: 66 + red: 192, + green: 41, + blue: 66 }, { - red: 84, - green: 36, - blue: 55 + red: 84, + green: 36, + blue: 55 }, { - red: 83, - green: 119, - blue: 122 + red: 83, + green: 119, + blue: 122 }]; var currentColorIndex = 0; @@ -95,12 +98,12 @@ function MousePaint() { z: LINE_DIMENSIONS }, linePoints: [], - lineWidth: LINE_WIDTH, lifetime: LIFETIME }); points = []; normals = [] strokeWidths = []; + lines.push(line); } @@ -114,56 +117,24 @@ function MousePaint() { position: worldPoint }); + eventChange = Math.sqrt(Math.pow(event.x - prevEvent.x, 2) + Math.pow(event.y - prevEvent.y, 2)); + localPoint = computeLocalPoint(worldPoint); + if (!isDrawing || points.length > MAX_POINTS_PER_LINE || eventChange > EVENT_CHANGE_THRESHOLD || + Vec3.distance(points[points.length - 1], localPoint) < MIN_POINT_DISTANCE) { + return; + } - if (!isDrawing) { - return; - } - var eventChange = Math.sqrt(Math.pow(event.x - prevEvent.x, 2) + Math.pow(event.y - prevEvent.y, 2)); - //print("EVENT CHANGE " + eventChange) - if (eventChange > EVENT_CHANGE_THRESHOLD) { - print("PAST THRESHOLD!") - return; - } - - - var localPoint = computeLocalPoint(worldPoint); - if (Vec3.distance(points[points.length - 1], localPoint) < MIN_POINT_DISTANCE) { - print("NOT ENOUGH DISTANCE BETWEEN MOUSE MOVES") - return; - } - var width = (Math.sin(count / 100) + 1.1) / 10; points.push(localPoint) normals.push(computeNormal(worldPoint, pickRay.origin)); - strokeWidths.push(.07); + strokeWidths.push(LINE_WIDTH); Entities.editEntity(line, { strokeWidths: strokeWidths, linePoints: points, normals: normals, }); - if (points.length > MAX_POINTS) { - newLine(worldPoint); - var localPoint = computeLocalPoint(worldPoint); - points.push(localPoint); - normals.push(computeNormal(worldPoint, pickRay.origin)); - strokeWidths.push(.07); - - } prevEvent = event; } - function undoStroke() { - var deletedLine = lines.pop(); - var deletedLineProps = Entities.getEntityProperties(deletedLine); - deletedLines.push(deletedLineProps); - Entities.deleteEntity(deletedLine); - } - - function redoStroke() { - var restoredLine = Entities.addEntity(deletedLines.pop()); - Entities.addEntity(restoredLine); - lines.push(restoredLine); - } - function computeNormal(p1, p2) { return Vec3.normalize(Vec3.subtract(p2, p1)); } @@ -174,7 +145,6 @@ function MousePaint() { } function computeLocalPoint(worldPoint) { - var localPoint = Vec3.subtract(worldPoint, linePosition); return localPoint; } @@ -193,7 +163,6 @@ function MousePaint() { normals.push(computeNormal(worldPoint, pickRay.origin)); strokeWidths.push(0.07); isDrawing = true; - } function mouseReleaseEvent() { @@ -207,22 +176,13 @@ function MousePaint() { color: currentColor }); } - if (event.text === "z") { - undoStroke(); - } - if (event.text === "x") { - redoStroke(); - } } - - function cleanup() { lines.forEach(function(line) { // Entities.deleteEntity(line); }); Entities.deleteEntity(brush); - } Controller.mousePressEvent.connect(mousePressEvent); @@ -232,17 +192,3 @@ function MousePaint() { Controller.keyPressEvent.connect(keyPressEvent); } - - -function randFloat(low, high) { - return low + Math.random() * (high - low); -} - - -function randInt(low, high) { - return Math.floor(randFloat(low, high)); -} - -function map(value, min1, max1, min2, max2) { - return min2 + (max2 - min2) * ((value - min1) / (max1 - min1)); -} \ No newline at end of file