Develop Reference

How to affect the nodes of the mesh with real values import from file.dat on threejs

I am working on a geometric visualization using Trois.js. My goal is to color the nodes of the mesh according to their values. For that, i have already created the nodes and i would first like to import the values from a file.dat, then assign the nodes with these values, in order to change the colors of the nodes according to their assigned values.
Here is the code.js I am using to create the nodes:
jsonURL = "/resources/datasets/Mesh.json";
var colors = ['#898ec1', '#9193bd', '#9999ba', '#a19eb7', '#a8a4b4', '#aea9b1', '#b5afae', '#bbb5ac', '#c1bbaa', '#c7c0a9', '#cdc6a8', '#d2cca8', '#d8d2a8', '#ded8a9', '#e3ddab', '#e8e3ae', '#ede9b2', '#f2efb9', '#f7f4c2', '#fcface', '#fff5d1', '#ffeac2', '#ffe0b3', '#fdd6a6', '#fbcc99', '#f7c38c', '#f3b980', '#efb075', '#eaa76a', '#e49e61', '#de9558', '#d88d4f', '#d18448', '#c97c41', '#c1753b', '#b86d37', '#b06733', '#a66030', '#9c5a2e', '#92542e'];
$.getJSON(jsonURL , function setPoints(dataset) {
var timestamp=1565715018;
for (i=0; i<dataset.humidity.length;i++){
if (dataset.humidity[i].time == timestamp){
for (ii=0; i<dataset.humidity[i].data.length;ii++)
{
var dotPz = dataset.humidity[i].data[ii].x;
var dotPx = dataset.humidity[i].data[ii].y;
var dotPy = dataset.humidity[i].data[ii].z;
var dotGeometry = new THREE.Geometry();
dotGeometry.vertices.push(new THREE.Vector3( dotPx, dotPy, dotPz));
var dotMaterial = new THREE.PointsMaterial( {
size: 0.0002,
color: "#ffffff",
blending: THREE.AdditiveBlending,
transparent: true,
depthTest: false,
sizeAttenuation: true,
} );
scene.add(new THREE.Points(dotGeometry, dotMaterial));
}
};
}
});
Does anyone know how to assign nodes with values imported from a file.dat? Any ideas would be very helpful!
Thank you

Select all text objects on a Fabric.js canvas

var canvas = new fabric.Canvas();
// select all objects
function selectAllCanvasObjects(){
var objs = canvas.getObjects().map(function(o) {
return o.set('active', true);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
canvas._activeObject = null;
canvas.setActiveGroup(group.setCoords()).renderAll();
}
I have a canvas and I need to select all text objects and skip others. This is the code to select all objects, how can I make it only select all text objects and skip others?

The following example only selects items with the type of 'text'.
In summary:
The Fabric JS get method allows us to inspect the type of the current item that we're iterating over
If the type is equal to 'text' then we return the item
N.B. We now use filter instead of map, as we now only want to return items that match the type of 'text', instead of every item
var canvas = new fabric.Canvas('c');
// Add some example shapes
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);
// Add some example text
var text1 = new fabric.Text('hello world', { left: 100, top: 100 });
var text2 = new fabric.Text('test', { left: 0, top: 0 });
canvas.add(text1, text2);
// Select all objects
function selectAllCanvasObjects(){
var objs = canvas.getObjects().filter(function(o) {
if (o.get('type') === 'text') {
return o.set('active', true);
}
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
canvas._activeObject = null;
canvas.setActiveGroup(group.setCoords()).renderAll();
}
selectAllCanvasObjects();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.8/fabric.min.js"></script>
<canvas id="c"></canvas>

You can use below code to select all text object.
var object_length = parseInt(canvas.getObjects().length) - 1;
for(var i = 0; i <= object_length; i++)
{
canvas.setActiveObject(canvas.item(i));
var obj = canvas.getActiveObject();
var object_type = obj.type;
if(object_type == "text")
{
//Write your code here
canvas.renderAll();
}
}
canvas.deactivateAllWithDispatch();
canvas.renderAll();
After completion of execution deselect all objects so it will not show you last selected object as selected.

2 animations in Javascript

I am trying to make multiple animations on the same page. but I don't know how to create another variable. Here is the sample, from Codepen.
I tried creating another "imageFile = new Image()" naming it "imageFile2 = new Image() but it didn't seem to work.
I am very new in this. Please guide me. Thanks in advance.
var appHeight = 400,
appWidth = 1000,
appCenterX = appWidth/2,
appCenterY = appHeight/2,
stage = new Kinetic.Stage({
container: 'container',
width: appWidth,
height:appHeight
}),
layer = new Kinetic.Layer(),
imageFile = new Image(),
creature,
bezTween;
imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
var creatureGroup = new Kinetic.Group();
creature = new Kinetic.Image({
image: imageFile,
width:27,
height:29,
x:-16,
y:-16
});
bezTween = new TweenMax(creatureGroup, 6, {
bezier:{
type:"soft",
values:[{setX:100, setY:250}, {setX:300, setY:0}, {setX:500, setY:400}, {setX:appWidth+20, setY:20}],
//autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
autoRotate:["setX", "setY", "setRotationDeg"]
},
ease:Linear.easeNone, autoCSS:false, repeat:10});
for (i = 0; i<200; i++){
bezTween.progress(i/200);
var circle = new Kinetic.Circle({
radius:2,
fill:'#333',
x:bezTween.target.getX(),
y:bezTween.target.getY()
});
layer.add(circle);
layer.draw();
bezTween.restart();
}
var creatureLayer = new Kinetic.Layer();
creatureGroup.add(creature);
creatureLayer.add(creatureGroup);
stage.add(layer);
stage.add(creatureLayer);
TweenLite.ticker.addEventListener("tick", redraw);
function redraw(){
creatureLayer.draw();
}

You can create second creature2.
var appHeight = 400,
appWidth = 1000,
appCenterX = appWidth/2,
appCenterY = appHeight/2,
stage = new Kinetic.Stage({
container: 'container',
width: appWidth,
height:appHeight
}),
layer = new Kinetic.Layer(),
imageFile = new Image(),
imageFile2 = new Image(),
creature,
creature2,
bezTween;
imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
imageFile2.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
var creatureGroup = new Kinetic.Group();
creature2 = new Kinetic.Image({
image: imageFile2,
width:50,
height:50,
x:20,
y:-16
});
Check Your Updated Codepen Here.
Edit:
Here i updated codepen with different path for another creature as you required.
I created another path there.
bezTween1 = new TweenMax(creatureGroup1, 6, {
bezier:{
type:"soft",
values:[{setX:150, setY:300}, {setX:350, setY:0}, {setX:550, setY:450}, {setX:appWidth+50, setY:50}],
//autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
autoRotate:["setX", "setY", "setRotationDeg"]
},
ease:Linear.easeNone, autoCSS:false, repeat:10});
Check Codepen Here.

Textgeometry facing user when camera turns

I am creating this 3d graph that represents a network of people. The nodes in the network are the names of people and between them lines are drawn whi9ch represents a connection. The purpose of this network is that people can turn it around and look through it to see what their network looks like, however, when I turn the camera around the network, the 3d text that I creat3ed with textgeometry is stuck to the same position and unformtunately therefore unreadable for the user when they want to look at the network from a different side. I know that this question has been asked several times before and I have read most of the answers on here, but I still cannot get it to work.
The problem that I encounter mostly is that when I try to do something like this:
nodeRenderer.lookAt(camera.position);
I get a problem that the camera is not defined. The camera is added to the scene, however this happens in a different .js document. This is where the scene gets created and the camera gets added (/ngraph.three/index.js):
var THREE = require('./lib/three');
module.exports = function (graph, settings) {
var merge = require('ngraph.merge');
settings = merge(settings, {
interactive: true
});
var beforeFrameRender;
var isStable = false;
var disposed = false;
var layout = createLayout(settings);
var renderer = createRenderer(settings);
var camera = createCamera(settings);
var scene = settings.scene || new THREE.Scene();
(...)
function renderNode(nodeId) {
nodeRenderer(nodeUI[nodeId]);
}
(...)
function initNode(node) {
var ui = nodeUIBuilder(node);
if (!ui) return;
// augment it with position data:
ui.pos = layout.getNodePosition(node.id);
// and store for subsequent use:
nodeUI[node.id] = ui;
scene.add(ui);
}
(...)
function createCamera(settings) {
if (settings.camera) {
return settings.camera;
}
var container = renderer.domElement;
var camera = new THREE.PerspectiveCamera(75, container.clientWidth/container.clientHeight, 0.1, 3000);
camera.position.z = 400;
return camera;
}
And this is where the nodes get created (ngraph.three/lib/defaults.js):
var THREE = require('./three');
module.exports.createNodeUI = createNodeUI;
module.exports.createLinkUI = createLinkUI;
module.exports.nodeRenderer = nodeRenderer;
module.exports.linkRenderer = linkRenderer;
function createNodeUI(node) {
var nodeMaterial = new THREE.MeshFaceMaterial( [
new THREE.MeshPhongMaterial( { color: 0x00cccc, shading: THREE.FlatShading } ), // front
new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
] );
var nodeGeometry = new THREE.TextGeometry( node.data, { size: 5, height: 2, curveSegments: 6, font: "helvetiker", weight: "normal", style: "normal" });
var nodeDirection = new THREE.Quaternion (THREE.Camera.Quaternion);
return new THREE.Mesh(nodeGeometry, nodeMaterial);
}
function createLinkUI(link) {
var linkGeometry = new THREE.Geometry();
linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
var linkMaterial = new THREE.LineBasicMaterial({ color: 0x00cccc });
return new THREE.Line(linkGeometry, linkMaterial);
}
(...)
function nodeRenderer(node) {
node.position.x = node.pos.x;
node.position.y = node.pos.y;
node.position.z = node.pos.z;
}
(...)
I tried ui.quaternion = camera.quaternion; in /ngraph.three/index.js, but this didn't do anything, and I've tried nodeUI.lookAt(camera.position); but this gave an error: TypeError: nodeUI.lookAt is not a function.
PS: I'm using Three.js Rev. 68, Ngraph and node.js.

I can only guess since a lot of code is missing but your createNodeUI returns a THREE.Mesh which is a subclass of Object3D which has the function .lookAt(vector) to align its local z-axis to the given vector.
And you said you receive this Error : TypeError: nodeUI.lookAt is not a function that looks like you re trying to call .lookAt of the array and not of the node itself.
so try nodeUI[node.id].lookAt(camera.position)

Spring between two draggable surfaces in famo.us

I'm trying to implement two surfaces, connected with a spring, that would react to drag in famo.us. So far I have setup the surfaces, can drag those, have a spring that interacts during the loading of the page, but not on drag. So the questions are a) how should I connect two surfaces with a spring and b) how do I update the physics when I drag one surface so that the other surface would follow the dragged surface?
The code I so far have is this
define(function(require) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Circle = require('famous/physics/bodies/Circle');
var Draggable = require('famous/modifiers/Draggable');
var Spring = require('famous/physics/forces/Spring');
var Vector = require('famous/math/Vector');
var context = Engine.createContext();
var physicsEngine = new PhysicsEngine();
var ball = new Surface ({
size: [100,100],
properties: {
backgroundColor: 'red',
borderRadius: '50px'
}
});
var ball2 = new Surface ({
size: [100,100],
properties: {
backgroundColor: 'blue',
borderRadius: '50px'
}
});
var draggable = new Draggable();
var draggable2 = new Draggable();
ball.state = new StateModifier({origin:[0.2,0.2]});
ball2.state = new StateModifier({origin:[0.3,0.3]});
ball.particle = new Circle({radius:100});
ball2.particle = new Circle({radius:100});
var spring = new Spring({
anchor: ball.particle,
period: 400, // <= Play with these values :-)
dampingRatio: 0.07, // <=
length: 50
});
// var spring2 = new Spring({anchor: ball2.particle});
// physicsEngine.attach(spring, ball2.particle);
// physicsEngine.attach(spring2, ball.particle);
draggable.subscribe(ball);
draggable2.subscribe(ball2);
draggable.on('update', function() {
console.info('update');
ball2.particle.applyForce(new Vector(0, 0, -0.005 * 100));
// ball.state.setTransform(ball.particle.getTransform())
// ball.state.setTransform(ball.particle.getTransform())
// ball.particle.setVelocity([0.001,0,0]);
// physicsEngine.wake();
// physicsEngine.step();
});
draggable2.on('update', function() {
// ball2.particle.setVelocity([0.001,0,0]);
// console.info('update');
// physicsEngine.wake();
// physicsEngine.step();
});
physicsEngine.attach(spring, ball2.particle);
// spring.applyForce(ball.particle);
physicsEngine.addBody(ball.particle);
physicsEngine.addBody(ball2.particle);
// ball.on("click",function(){
// ball.particle.setVelocity([10,0,0]);
// });
//
// ball2.on("click",function(){
// ball2.particle.setVelocity([0,10,0]);
// });
context.add(draggable).add(ball.state).add(ball);
context.add(draggable2).add(ball2.state).add(ball2);
Engine.on('prerender', function(){
ball.state.setTransform(ball.particle.getTransform());
ball2.state.setTransform(ball2.particle.getTransform());
});
});

It seems like you have a pretty good understanding of the PE thus far. I can still see a few places you can improve. Here is a working example of dragging with a spring attached. Although this implementation is not perfect yet, it should get you started.. If you start with dragging the red circle, everything works as expected.. Draggable has its own position, and so does particle. So when you grab the blue circle, there remains an offset in particle. Here is what will get you 95%..
Hope it helps..
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Modifier = require('famous/core/Modifier');
var Draggable = require('famous/modifiers/Draggable');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Circle = require('famous/physics/bodies/Circle');
var Spring = require('famous/physics/forces/Spring');
var context = Engine.createContext();
var physicsEngine = new PhysicsEngine();
var ball = new Surface ({
size: [100,100],
properties: {
backgroundColor: 'red',
borderRadius: '50px'
}
});
var ball2 = new Surface ({
size: [100,100],
properties: {
backgroundColor: 'blue',
borderRadius: '50px',
}
});
ball.mod = new Modifier({origin:[0.5,0.5]});
ball.draggable = new Draggable();
ball.pipe(ball.draggable);
ball.particle = new Circle({radius:100});
ball.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
ball.spring = new Spring({
anchor: ball.particle,
period: 400,
dampingRatio: 0.07,
length: 50
});
ball2.mod = new Modifier({origin:[0.5,0.5]});
ball2.draggable = new Draggable();
ball2.pipe(ball2.draggable);
ball2.particle = new Circle({radius:100});
ball2.mod.transformFrom(function(){ return ball2.particle.getTransform()});
ball2.spring = new Spring({
anchor: ball2.particle,
period: 400,
dampingRatio: 0.07,
length: 50
});
ball.draggable.on('start',function(){
ball2.setProperties({pointerEvents:'none'});
if (ball2.springID) physicsEngine.detach(ball2.springID);
if (ball.springID) physicsEngine.detach(ball.springID);
ball.springID = physicsEngine.attach(ball.spring, ball2.particle);
ball2.springID = null;
ball.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
ball2.mod.transformFrom(function(){ return ball2.particle.getTransform()});
})
ball.draggable.on('update', function() {
pos = ball.draggable.getPosition();
ball.particle.setPosition(pos);
});
ball.draggable.on('end', function() {
ball2.setProperties({pointerEvents:'all'});
});
ball2.draggable.on('start',function(){
ball.setProperties({pointerEvents:'none'});
if (ball2.springID) physicsEngine.detach(ball2.springID);
if (ball.springID) physicsEngine.detach(ball.springID);
ball2.springID = physicsEngine.attach(ball2.spring, ball.particle);
ball.springID = null;
ball2.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
ball.mod.transformFrom(function(){ return ball.particle.getTransform()});
})
ball2.draggable.on('update', function() {
pos = ball2.draggable.getPosition();
ball2.particle.setPosition(pos);
});
ball2.draggable.on('end', function() {
ball.setProperties({pointerEvents:'all'});
});
ball.springID = physicsEngine.attach(ball.spring, ball2.particle);
physicsEngine.addBody(ball.particle);
physicsEngine.addBody(ball2.particle);
context.add(ball.mod).add(ball.draggable).add(ball);
context.add(ball2.mod).add(ball2.draggable).add(ball2);