mirror of
https://github.com/overte-org/overte.git
synced 2025-04-19 15:43:50 +02:00
added painting scripts to demonstrate one way to use the PolyLineEntity
This commit is contained in:
ericrius1
parent
b2753507dc
commit
dc8fa0beb4
2 changed files with 46 additions and 108 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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));
|
||||
}
|
||||
Loading…
Reference in a new issue