mirror of
https://github.com/overte-org/overte.git
synced 2025-08-09 21:12:53 +02:00
added paint scripts for polylines
This commit is contained in:
parent
c4b780d922
commit
f52d9c1293
2 changed files with 481 additions and 0 deletions
233
examples/hydraPolyLinePaint.js
Normal file
233
examples/hydraPolyLinePaint.js
Normal file
|
@ -0,0 +1,233 @@
|
||||||
|
//
|
||||||
|
// hydraPaint.js
|
||||||
|
// examples
|
||||||
|
//
|
||||||
|
// Created by Eric Levin on 5/14/15.
|
||||||
|
// Copyright 2014 High Fidelity, Inc.
|
||||||
|
//
|
||||||
|
// This script allows you to paint with the hydra!
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Distributed under the Apache License, Version 2.0.
|
||||||
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
//
|
||||||
|
var LEFT = 0;
|
||||||
|
var RIGHT = 1;
|
||||||
|
var LASER_WIDTH = 3;
|
||||||
|
var LASER_COLOR = {
|
||||||
|
red: 50,
|
||||||
|
green: 150,
|
||||||
|
blue: 200
|
||||||
|
};
|
||||||
|
var TRIGGER_THRESHOLD = .02;
|
||||||
|
|
||||||
|
var MAX_POINTS_PER_LINE = 50;
|
||||||
|
|
||||||
|
var LIFETIME = 6000;
|
||||||
|
var DRAWING_DEPTH = 2;
|
||||||
|
var LINE_DIMENSIONS = 100;
|
||||||
|
|
||||||
|
|
||||||
|
var DISTANCE_FROM_HAND = 5;
|
||||||
|
var MIN_POINT_DISTANCE = 0.01;
|
||||||
|
|
||||||
|
var MIN_BRUSH_RADIUS = 0.04;
|
||||||
|
var MAX_BRUSH_RADIUS = 0.08;
|
||||||
|
|
||||||
|
var RIGHT_BUTTON_1 = 7
|
||||||
|
var RIGHT_BUTTON_2 = 8
|
||||||
|
var RIGHT_BUTTON_3 = 9;
|
||||||
|
var RIGHT_BUTTON_4 = 10
|
||||||
|
var LEFT_BUTTON_1 = 1;
|
||||||
|
var LEFT_BUTTON_2 = 2;
|
||||||
|
var LEFT_BUTTON_3 = 3;
|
||||||
|
var LEFT_BUTTON_4 = 4;
|
||||||
|
|
||||||
|
var colorPalette = [{
|
||||||
|
red: 10,
|
||||||
|
green: 208,
|
||||||
|
blue: 60
|
||||||
|
}, {
|
||||||
|
red: 214,
|
||||||
|
green: 91,
|
||||||
|
blue: 67
|
||||||
|
}, {
|
||||||
|
red: 192,
|
||||||
|
green: 41,
|
||||||
|
blue: 66
|
||||||
|
}, {
|
||||||
|
red: 84,
|
||||||
|
green: 36,
|
||||||
|
blue: 55
|
||||||
|
}, {
|
||||||
|
red: 83,
|
||||||
|
green: 119,
|
||||||
|
blue: 122
|
||||||
|
}];
|
||||||
|
|
||||||
|
var MIN_STROKE_WIDTH = 0.002;
|
||||||
|
var MAX_STROKE_WIDTH = 0.05;
|
||||||
|
|
||||||
|
function controller(side, cycleColorButton) {
|
||||||
|
this.triggerHeld = false;
|
||||||
|
this.triggerThreshold = 0.9;
|
||||||
|
this.side = side;
|
||||||
|
this.palm = 2 * side;
|
||||||
|
this.tip = 2 * side + 1;
|
||||||
|
this.trigger = side;
|
||||||
|
this.cycleColorButton = cycleColorButton;
|
||||||
|
|
||||||
|
this.points = [];
|
||||||
|
this.normals = [];
|
||||||
|
this.strokeWidths = [];
|
||||||
|
|
||||||
|
this.currentColorIndex = 0;
|
||||||
|
this.currentColor = colorPalette[this.currentColorIndex];
|
||||||
|
|
||||||
|
|
||||||
|
this.brush = Entities.addEntity({
|
||||||
|
type: 'Sphere',
|
||||||
|
position: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
color: this.currentColor,
|
||||||
|
dimensions: {
|
||||||
|
x: MIN_BRUSH_RADIUS,
|
||||||
|
y: MIN_BRUSH_RADIUS,
|
||||||
|
z: MIN_BRUSH_RADIUS
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.cycleColor = function() {
|
||||||
|
this.currentColor = colorPalette[++this.currentColorIndex];
|
||||||
|
if (this.currentColorIndex === colorPalette.length - 1) {
|
||||||
|
this.currentColorIndex = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.newLine = function(position) {
|
||||||
|
print("NEW LINE")
|
||||||
|
this.linePosition = position;
|
||||||
|
this.line = Entities.addEntity({
|
||||||
|
position: position,
|
||||||
|
type: "PolyLine",
|
||||||
|
color: this.currentColor,
|
||||||
|
dimensions: {
|
||||||
|
x: LINE_DIMENSIONS,
|
||||||
|
y: LINE_DIMENSIONS,
|
||||||
|
z: LINE_DIMENSIONS
|
||||||
|
},
|
||||||
|
lineWidth: 0.1,
|
||||||
|
lifetime: LIFETIME
|
||||||
|
});
|
||||||
|
this.points = [];
|
||||||
|
this.normals = []
|
||||||
|
this.strokeWidths = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
Entities.editEntity(this.brush, {
|
||||||
|
position: newBrushPos,
|
||||||
|
color: this.currentColor,
|
||||||
|
dimensions: {
|
||||||
|
x: brushRadius,
|
||||||
|
y: brushRadius,
|
||||||
|
z: brushRadius
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
if (this.triggerValue > TRIGGER_THRESHOLD && !this.drawing) {
|
||||||
|
this.newLine(this.palmPosition);
|
||||||
|
this.drawing = true;
|
||||||
|
} else if (this.drawing && this.triggerValue < TRIGGER_THRESHOLD) {
|
||||||
|
this.drawing = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.drawing) {
|
||||||
|
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!!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.points.push(localPoint);
|
||||||
|
var normal = computeNormal(newBrushPos, Camera.getPosition());
|
||||||
|
|
||||||
|
this.normals.push(normal);
|
||||||
|
var strokeWidth = map(this.triggerValue, TRIGGER_THRESHOLD, 1, MIN_STROKE_WIDTH, MAX_STROKE_WIDTH);
|
||||||
|
this.strokeWidths.push(strokeWidth);
|
||||||
|
Entities.editEntity(this.line, {
|
||||||
|
linePoints: this.points,
|
||||||
|
normals: this.normals,
|
||||||
|
strokeWidths: this.strokeWidths,
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.updateControllerState = function() {
|
||||||
|
this.cycleColorButtonPressed = Controller.isButtonPressed(this.cycleColorButton);
|
||||||
|
this.palmPosition = Controller.getSpatialControlPosition(this.palm);
|
||||||
|
this.tipPosition = Controller.getSpatialControlPosition(this.tip);
|
||||||
|
this.palmNormal = Controller.getSpatialControlNormal(this.palm);
|
||||||
|
this.triggerValue = Controller.getTriggerValue(this.trigger);
|
||||||
|
|
||||||
|
|
||||||
|
if (this.prevCycleColorButtonPressed === true && this.cycleColorButtonPressed === false) {
|
||||||
|
this.cycleColor();
|
||||||
|
Entities.editEntity(this.brush, {
|
||||||
|
// color: this.currentColor
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prevCycleColorButtonPressed = this.cycleColorButtonPressed;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cleanup = function() {
|
||||||
|
Entities.deleteEntity(this.brush);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeNormal(p1, p2) {
|
||||||
|
return Vec3.normalize(Vec3.subtract(p2, p1));
|
||||||
|
}
|
||||||
|
|
||||||
|
function update(deltaTime) {
|
||||||
|
leftController.update(deltaTime);
|
||||||
|
rightController.update(deltaTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scriptEnding() {
|
||||||
|
leftController.cleanup();
|
||||||
|
rightController.cleanup();
|
||||||
|
}
|
||||||
|
|
||||||
|
function vectorIsZero(v) {
|
||||||
|
return v.x === 0 && v.y === 0 && v.z === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var rightController = new controller(RIGHT, RIGHT_BUTTON_4);
|
||||||
|
var leftController = new controller(LEFT, LEFT_BUTTON_4);
|
||||||
|
Script.update.connect(update);
|
||||||
|
Script.scriptEnding.connect(scriptEnding);
|
||||||
|
|
||||||
|
function map(value, min1, max1, min2, max2) {
|
||||||
|
return min2 + (max2 - min2) * ((value - min1) / (max1 - min1));
|
||||||
|
}
|
248
examples/mousePolyLinePaint.js
Normal file
248
examples/mousePolyLinePaint.js
Normal file
|
@ -0,0 +1,248 @@
|
||||||
|
//
|
||||||
|
// paint.js
|
||||||
|
// examples
|
||||||
|
//
|
||||||
|
// Created by Eric Levin on 6/4/15.
|
||||||
|
// Copyright 2014 High Fidelity, Inc.
|
||||||
|
//
|
||||||
|
// This script allows you to paint with the hydra or mouse!
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// 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 LIFETIME = 6000;
|
||||||
|
var EVENT_CHANGE_THRESHOLD = 200;
|
||||||
|
var LINE_WIDTH = .05;
|
||||||
|
var MAX_POINTS = 10;
|
||||||
|
var points = [];
|
||||||
|
var normals = [];
|
||||||
|
var strokeWidths = [];
|
||||||
|
var count = 0;
|
||||||
|
var prevEvent = null;
|
||||||
|
|
||||||
|
var MIN_POINT_DISTANCE = .01;
|
||||||
|
|
||||||
|
var colorPalette = [{
|
||||||
|
red: 236,
|
||||||
|
green: 208,
|
||||||
|
blue: 120
|
||||||
|
}, {
|
||||||
|
red: 214,
|
||||||
|
green: 91,
|
||||||
|
blue: 67
|
||||||
|
}, {
|
||||||
|
red: 192,
|
||||||
|
green: 41,
|
||||||
|
blue: 66
|
||||||
|
}, {
|
||||||
|
red: 84,
|
||||||
|
green: 36,
|
||||||
|
blue: 55
|
||||||
|
}, {
|
||||||
|
red: 83,
|
||||||
|
green: 119,
|
||||||
|
blue: 122
|
||||||
|
}];
|
||||||
|
|
||||||
|
var currentColorIndex = 0;
|
||||||
|
var currentColor = colorPalette[currentColorIndex];
|
||||||
|
|
||||||
|
function cycleColor() {
|
||||||
|
currentColor = colorPalette[++currentColorIndex];
|
||||||
|
if (currentColorIndex === colorPalette.length - 1) {
|
||||||
|
currentColorIndex = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
MousePaint();
|
||||||
|
|
||||||
|
function MousePaint() {
|
||||||
|
var DRAWING_DISTANCE = 5;
|
||||||
|
var lines = [];
|
||||||
|
var isDrawing = false;
|
||||||
|
|
||||||
|
var line, linePosition;
|
||||||
|
|
||||||
|
var BRUSH_SIZE = .05;
|
||||||
|
|
||||||
|
var brush = Entities.addEntity({
|
||||||
|
type: 'Sphere',
|
||||||
|
position: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
z: 0
|
||||||
|
},
|
||||||
|
color: currentColor,
|
||||||
|
dimensions: {
|
||||||
|
x: BRUSH_SIZE,
|
||||||
|
y: BRUSH_SIZE,
|
||||||
|
z: BRUSH_SIZE
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function newLine(position) {
|
||||||
|
linePosition = position;
|
||||||
|
line = Entities.addEntity({
|
||||||
|
position: position,
|
||||||
|
type: "PolyLine",
|
||||||
|
color: currentColor,
|
||||||
|
dimensions: {
|
||||||
|
x: LINE_DIMENSIONS,
|
||||||
|
y: LINE_DIMENSIONS,
|
||||||
|
z: LINE_DIMENSIONS
|
||||||
|
},
|
||||||
|
linePoints: [],
|
||||||
|
lineWidth: LINE_WIDTH,
|
||||||
|
lifetime: LIFETIME
|
||||||
|
});
|
||||||
|
points = [];
|
||||||
|
normals = []
|
||||||
|
strokeWidths = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function mouseMoveEvent(event) {
|
||||||
|
|
||||||
|
var pickRay = Camera.computePickRay(event.x, event.y);
|
||||||
|
count++;
|
||||||
|
var worldPoint = computeWorldPoint(pickRay);
|
||||||
|
Entities.editEntity(brush, {
|
||||||
|
position: worldPoint
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeWorldPoint(pickRay) {
|
||||||
|
var addVector = Vec3.multiply(Vec3.normalize(pickRay.direction), DRAWING_DISTANCE);
|
||||||
|
return Vec3.sum(pickRay.origin, addVector);
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeLocalPoint(worldPoint) {
|
||||||
|
|
||||||
|
var localPoint = Vec3.subtract(worldPoint, linePosition);
|
||||||
|
return localPoint;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousePressEvent(event) {
|
||||||
|
if (!event.isLeftButton) {
|
||||||
|
isDrawing = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var pickRay = Camera.computePickRay(event.x, event.y);
|
||||||
|
prevEvent = {x: event.x, y:event.y};
|
||||||
|
var worldPoint = computeWorldPoint(pickRay);
|
||||||
|
newLine(worldPoint);
|
||||||
|
var localPoint = computeLocalPoint(worldPoint);
|
||||||
|
points.push(localPoint);
|
||||||
|
normals.push(computeNormal(worldPoint, pickRay.origin));
|
||||||
|
strokeWidths.push(0.07);
|
||||||
|
isDrawing = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseReleaseEvent() {
|
||||||
|
isDrawing = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyPressEvent(event) {
|
||||||
|
if (event.text === "SPACE") {
|
||||||
|
cycleColor();
|
||||||
|
Entities.editEntity(brush, {
|
||||||
|
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);
|
||||||
|
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);
|
||||||
|
Controller.mouseMoveEvent.connect(mouseMoveEvent);
|
||||||
|
Script.scriptEnding.connect(cleanup);
|
||||||
|
|
||||||
|
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