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);
Related
I want to capture zoom out event as soon as user reduces the map size to an extent i have to change the Map image layer.
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var clock = viewer.clock;
var referenceFramePrimitive;
var camera = viewer.camera;
....
camera.changed.addEventListener(function()
{
var height = Cesium.Cartographic.fromCartesian(camera.position).height;
if(height<4251907)
{
var layers = viewer.imageryLayers;
var baseLayer = layers.get(0);
layers.remove(baseLayer);
layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812, maximumLevel : 5 }));
}
console.log(height);
}.bind(camera));
Is there any way to achieve this.
Thanks
This is one of the very simple solutions.
const viewer = new Cesium.Viewer("cesiumContainer");
const camera = viewer.camera;
const scratchCartesian1 = new Cesium.Cartesian3();
const scratchCartesian2 = new Cesium.Cartesian3();
let startPos, endPos;
camera.moveStart.addEventListener(function () {
startPos = camera.positionWC.clone(scratchCartesian1);
});
camera.moveEnd.addEventListener(function () {
endPos = camera.positionWC.clone(scratchCartesian2);
const startHeight = Cesium.Cartographic.fromCartesian(startPos).height;
const endHeight = Cesium.Cartographic.fromCartesian(endPos).height;
if (startHeight > endHeight) {
console.log("zoom in");
} else {
console.log("zoom out");
}
});
How can I pause/stop the vehicle moving entity (to stop the vehicle from the moving) by calling another function? Cannot seem to use viewModel.pauseViewModel.command();. Appreciate if anyone can demonstrate how to provide a pause & continue for moving entity.
function togglesimulation() {
Cesium.Math.setRandomNumberSeed(3);
var start = Cesium.JulianDate.fromDate(new Date(2021, 6, 29, 16));
var stop = Cesium.JulianDate.addSeconds(start, 300, new Cesium.JulianDate);
//Make sure viewer is at the desired time.
var clock = new Cesium.Clock();
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // stop at the end
viewer.clock.multiplier = clockmultiplier;
viewer.clock.shouldAnimate = true;
var position = new Cesium.SampledPositionProperty();
var time = Cesium.JulianDate.addSeconds(start, 120, new Cesium.JulianDate());
var timeStepInSeconds = 5;
var newPositions = mergedgeom1;
for (var i = 0; i < newPositions.length; i++) {
var poss = Cesium.Cartesian3.fromDegrees(parseFloat(newPositions[i][0]), parseFloat(newPositions[i][1])); //height
var time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());
position.addSample(time, poss);
}
var entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
model: {
uri: "../asset/vehicle/CesiumMilkTruck/CesiumMilkTruck.glb",
minimumPixelSize: 64,
},
viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),
position: position,
orientation: new Cesium.VelocityOrientationProperty(position),
});
viewer.trackedEntity = entity;
var scene = viewer.scene;
}
Pause the clock with:
viewer.clock.shouldAnimate = false;
You can un-pause later with:
viewer.clock.shouldAnimate = true;
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.
I have make this http://jsfiddle.net/62Wjc/5/, create and change text on layer but it's static. Now I make script for dynamic add fields + add layer + change layer.
On my script have three functions, which are :
Function CreateTxt for create element and create layer with KineticJS.
Function fRField for remove element
Function ChangeTxt for change text on layer.
And this my script :
$(document).ready(function() {
var nwValue = [];
var nwLayer = {};
var nwTxt = {};
var tulisan = 'Your text here';
var con = $('#idEditor');
var cW = con.width();
var cH = con.height();
var stage = new Kinetic.Stage({
container: 'idEditor',
width: cW,
height: cH
});
$('a[data-selector="get_new_txt"], a[data-selector="get_new_img"]').on('click', function(event){
var time = new Date().getTime();
var regexp = new RegExp($(this).data('id'), 'g');
$('#nF').append($(this).data('fields').replace(regexp, time));
CreateTxt(time);
event.preventDefault();
});
$('#nF').on('click', 'a[data-selector="removeField"]', function(e) {
var a = $(this);
fRField(a);
e.preventDefault();
});
$('#nF').on('keyup', 'input[data-selector="inputName"]', function() {
var a = $(this);
ChangeTxt(a);
});
function CreateTxt(idV) {
var iclone = 0;
nwValue.push(idV);
$.each(nwValue, function( index, value ){
nwLayer["layer"+ value] = new Kinetic.Layer();
});
stage.add(nwLayer["layer"+ idV]);
$.each(nwValue, function( index, value ){
nwTxt["text"+ value] = new Kinetic.Text({
x: 100,
y: 100,
text: "Your text here",
fontSize:18,
fill: 'red',
draggable: true,
id: 'txt'+ value
});
});
nwLayer["layer"+ idV].add(nwTxt["text"+ idV]);
nwLayer["layer"+ idV].draw();
}
function fRField(a){
if(confirm('Are you sure to delete this field ?')) {
a.prev("input[type=hidden]").value = "1";
a.closest(".form-inline").remove();
}
return false;
}
function ChangeTxt(a){
var dataid = a.attr('data-id');
var newValue = a.val();
nwTxt["text"+ dataid].setText(newValue);
nwLayer["layer"+ dataid].draw();
}
});
jsfiddle : http://jsfiddle.net/8oLsoo25/5/
After add a new text, I can't change text on layer first.
Your $.each call for nwValue is ruining things for you. If you place nwValue = []; above nwValue.push(idV); in CreateTxt, everything works as expected. In other words, you're replacing references to the original objects. Also, do you know that a new Layer in Kinetic means a new canvas element in the DOM?
Short question. How can I add a size modifier using Transitionable to a ScrollView, without breaking the scrolling itself ? Seems like it's blocking events in some way.
Code:
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Scrollview = require('famous/views/Scrollview');
var Modifier = require("famous/core/Modifier");
var Transitionable = require("famous/transitions/Transitionable");
var context = Engine.createContext();
var sizeTrans = new Transitionable(0);
var sizeModifier = new Modifier({
transform : function(){
var s = sizeTrans.get() + 1;
return Transform.scale(s, s, 0);
}
});
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0; i < 40; i++) {
var surface = new Surface({
content: "Surface: " + (i + 1),
size: [undefined, 200],
properties: {
backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface.pipe(scrollview);
surfaces.push(surface);
}
context
.add(sizeModifier)
.add(scrollview);
});
I was trying to create a live example, but it's not working unfortunately :/
http://jsfiddle.net/7fzfx19h/1/
Fixed my code, now the demo works http://jsfiddle.net/7fzfx19h/2/ :
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Scrollview = require('famous/views/Scrollview');
var Modifier = require("famous/core/Modifier");
var Transitionable = require("famous/transitions/Transitionable");
var context = Engine.createContext();
var sizeTrans = new Transitionable(0);
var sizeModifier = new Modifier({
transform : function(){
var s = sizeTrans.get() + 1;
return Transform.scale(s, s);
}
});
var scrollview = new Scrollview();
var surfaces = [];
scrollview.sequenceFrom(surfaces);
for (var i = 0; i < 40; i++) {
var surface = new Surface({
content: "Surface: " + (i + 1),
size: [undefined, 200],
properties: {
backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
lineHeight: "200px",
textAlign: "center"
}
});
surface.pipe(scrollview);
surfaces.push(surface);
}
context.add(sizeModifier).add(scrollview);
});