Related
I am using Konva canvas framework and I want to implement zoom in and zoom out with mouse wheel.
The zoom in should be relative to my cursor pointer, but zoom out should always zoom out to the initial state.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#7.2.2/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Zoom Relative to Stage Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
fill: 'green',
});
layer.add(circle);
layer.draw();
var scaleBy = 0.95;
stage.on('wheel', (e) => {
e.evt.preventDefault();
var oldScale = stage.scaleX();
var pointer = stage.getPointerPosition();
var mousePointTo = {
x: (pointer.x - stage.x()) / oldScale,
y: (pointer.y - stage.y()) / oldScale,
};
var newScale =
e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;
stage.scale({ x: newScale, y: newScale });
var newPos = {
x: pointer.x - mousePointTo.x * newScale,
y: pointer.y - mousePointTo.y * newScale,
};
stage.position(newPos);
stage.batchDraw();
});
</script>
</body>
</html>
So, in the example you can see there is circle green in the center. When client zoom in, I want the zoom to be relative to pointer. But, when zooming out, the zoom won't be relative to pointer, but simply goes back to the initial state (green circle in the center).
So I changed some things, only for demo purpose - but the concept is the same:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#7.2.2/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Zoom Relative to Stage Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var circle = new Konva.Rect({
x: stage.width()/2,
y:stage.height()/2,
width: 50,
height: 50,
fill: 'green',
});
layer.add(circle);
layer.draw();
var scaleBy = 0.99;
stage.on('wheel', (e) => {
e.evt.preventDefault();
var oldScale = stage.scaleX();
var mousePointTo = {
x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale
};
var newScale =
e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy;
newScale = Math.max( newScale, 1 );
stage.scale({ x: newScale, y: newScale });
var newPos = {
x:
-(mousePointTo.x - stage.getPointerPosition().x / newScale) *
newScale,
y:
-(mousePointTo.y - stage.getPointerPosition().y / newScale) *
newScale
};
newPos.x = Math.min( newPos.x, 0 );
newPos.x = Math.max( newPos.x, width * ( 1 - newScale ) );
newPos.y = Math.min( newPos.y, 0 );
newPos.y = Math.max( newPos.y, height * ( 1 - newScale ) );
stage.position(newPos);
stage.batchDraw();
});
</script>
</body>
</html>
I'm trying a panoramic viewer code which its three.js version is r68,and I update the three.js version into r121 in order to use raycaster function.
The problem happen when I revise the code:
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
into
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error happened.' );
}
);
No error pop up but the render function(included in init function) and animate function doesn't progress.
I'm not sure it's texture's problem or init function's problem.
If somebody can give me some suggestion, I'll be really grateful.
I take this as my reference:
https://threejs.org/docs/#api/en/loaders/TextureLoader
Three.TextureLoader is not loading images files
And here is my full code:
<!DOCTYPE html>
<html>
<head>
<title>Panorama1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano1</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var mouse = new THREE.Vector2();
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error happened.' );
}
);
//const loader = new THREE.TextureLoader();
//var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
//init();
//animate();
//});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), material);
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouse, camera );
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.updateProjectionMatrix();
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.updateProjectionMatrix();
}
</script>
</body>
</html>
The origin code is :
<!DOCTYPE html>
<html>
<head>
<title>Panorama2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano2</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), new THREE.MeshBasicMaterial({map: texture}));
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.projectionMatrix.makePerspective(fov, ratio, 1, 1100);
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.projectionMatrix.makePerspective(fov, ratio, 1, 1100);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Here is the link to the source code:
https://github.com/NorikDavtian/ThreeJS-360-Panorama
Thanks for your reading !
update:
after trying #prisoner849 's suggestion,the init function and animate function run properly,but the scene still in black both in Chorme or firefox
Try it this way:
var material; // as a global variable
...
loader.load(
'img/demo.jpg',
function(texture){
material = new THREE.MeshBasicMaterial({map: texture});
init();
animate();
},
undefined,
function ( err ) {
console.error( 'An error happened.' );
}
);
In your current option, you call init() and animate() in onProgress callback. Whereas you need to call them in onLoad, thus right after material = new THREE.MeshBasicMaterial({map: texture});.
Been trying to run different js scripts on Wordpress in front of the page itself but everytime I try, it ends up creating a specific div with given width and height which stays on top of the page.
I was hoping the script itself would run "over" any div on page as an animated effect (on mouse move)
This is particularly one of the scripts I would like to run through all the pages:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
font-family: 'Play', sans-serif;
background: #2b2b2b;
margin: 0;
}
#info {
position: absolute;
left: 10px;
top: 10px;
}
#info {
background: rgba(0,0,0,0.8);
padding: 12px 10px;
margin-bottom: 1px;
color: #fff;
}
#info h1 {
line-height: 22px;
font-weight: 300;
font-size: 18px;
margin: 0;
}
#info h2 {
line-height: 14px;
font-weight: 300;
font-size: 12px;
color: rgba(255,255,255,0.8);
margin: 0 0 6px 0;
}
#info a {
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,0.2);
margin-right: 4px;
line-height: 20px;
font-size: 10px;
color: rgba(255,255,255,0.5);
}
#info a:hover {
border-bottom: 1px dotted rgba(255,255,255,0.6);
color: rgba(255,255,255,1.0);
}
</style>
</head>
<body>
<div id="container"></div>
<script src='https://rawgithub.com/soulwire/sketch.js/v1.0/js/sketch.min.js'></script>
<script>
function Particle( x, y, radius ) {
this.init( x, y, radius );
}
Particle.prototype = {
init: function( x, y, radius ) {
this.alive = true;
this.radius = radius || 10;
this.wander = 0.15;
this.theta = random( TWO_PI );
this.drag = 0.92;
this.color = '#fff';
this.x = x || 0.0;
this.y = y || 0.0;
this.vx = 0.0;
this.vy = 0.0;
},
move: function() {
this.x += this.vx;
this.y += this.vy;
this.vx *= this.drag;
this.vy *= this.drag;
this.theta += random( -0.5, 0.5 ) * this.wander;
this.vx += sin( this.theta ) * 0.1;
this.vy += cos( this.theta ) * 0.1;
this.radius *= 0.96;
this.alive = this.radius > 0.5;
},
draw: function( ctx ) {
ctx.beginPath();
ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
ctx.fillStyle = this.color;
ctx.fill();
}
};
// ----------------------------------------
// Example
// ----------------------------------------
var MAX_PARTICLES = 280;
var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];
var particles = [];
var pool = [];
var demo = Sketch.create({
container: document.getElementById( 'container' )
});
demo.setup = function() {
// Set off some initial particles.
var i, x, y;
for ( i = 0; i < 20; i++ ) {
x = ( demo.width * 0.5 ) + random( -100, 100 );
y = ( demo.height * 0.5 ) + random( -100, 100 );
demo.spawn( x, y );
}
};
demo.spawn = function( x, y ) {
if ( particles.length >= MAX_PARTICLES )
pool.push( particles.shift() );
particle = pool.length ? pool.pop() : new Particle();
particle.init( x, y, random( 5, 40 ) );
particle.wander = random( 0.5, 2.0 );
particle.color = random( COLOURS );
particle.drag = random( 0.9, 0.99 );
theta = random( TWO_PI );
force = random( 2, 8 );
particle.vx = sin( theta ) * force;
particle.vy = cos( theta ) * force;
particles.push( particle );
}
demo.update = function() {
var i, particle;
for ( i = particles.length - 1; i >= 0; i-- ) {
particle = particles[i];
if ( particle.alive ) particle.move();
else pool.push( particles.splice( i, 1 )[0] );
}
};
demo.draw = function() {
demo.globalCompositeOperation = 'lighter';
for ( var i = particles.length - 1; i >= 0; i-- ) {
particles[i].draw( demo );
}
};
demo.mousemove = function() {
var particle, theta, force, touch, max, i, j, n;
for ( i = 0, n = demo.touches.length; i < n; i++ ) {
touch = demo.touches[i], max = random( 1, 4 );
for ( j = 0; j < max; j++ ) demo.spawn( touch.x, touch.y );
}
};
</script>
</body>
</html>
I would like the particles to run through the site.
Any help with it?
First I would start by making sure you properly enqueue the your javascript and css:
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
wp_enqueue_scripts is the proper hook to use when enqueuing items that
are meant to appear on the front end.
I have a famous engine setup and working with physics / drag etc.
But it appears there are other physics options, BruteForce, SweepAndPrune etc.
I suspect these may be what i need to improve the collision detection between the elements.
I've tried to add the BruteForce collision detection like so:
this.collision = new collision([rightWall, leftWall, topWall, bottomWall]);
But I get an error about an incorrect constraint.
this.simulation.addConstraint(this.collision);
Does anyone have experience with solving this issue?
You can see a demo here:
var famous = famous;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var DOMElement = famous.domRenderables.DOMElement;
var Gravity3D = famous.physics.Gravity3D;
var MountPoint = famous.components.MountPoint;
var PhysicsEngine = famous.physics.PhysicsEngine;
var Position = famous.components.Position;
var Size = famous.components.Size;
var Wall = famous.physics.Wall;
var Sphere = famous.physics.Sphere;
var Vec3 = famous.math.Vec3;
var math = famous.math;
var physics = famous.physics;
var collision = famous.physics.Collision;
var gestures = famous.components.GestureHandler;
var Spring = famous.physics.Spring;
console.log(famous)
var anchor = new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0);
//Create Walls
var rightWall = new Wall({
direction: Wall.LEFT
}).setPosition(window.innerWidth - 20, 0, 0);
var leftWall = new Wall({
direction: Wall.RIGHT
}).setPosition(window.innerWidth + 20, 0, 0);
var topWall = new Wall({
direction: Wall.DOWN
}).setPosition(0, 20, 0);
var bottomWall = new Wall({
direction: Wall.UP
}).setPosition(0, window.innerHeight - 20, 0);
var centerPoint;
function Demo() {
this.scene = FamousEngine.createScene('body');
this.collision = new collision([rightWall, leftWall, topWall, bottomWall]);
console.log(this.collision)
this.simulation = new PhysicsEngine();
this.simulation.setOrigin(0.5, 0.5);
this.simulation.addConstraint(this.collision);
this.items = [];
this.walls = [];
//Create Items
for (var i = 0; i < 10; i++) {
var node = this.scene.addChild();
node.setMountPoint(0.5, 0.5);
var size = new Size(node).setMode(1, 1);
var position = new Position(node);
if (i === 0) {
createLogo.call(this, node, size, position);
}
if (i !== 0 && i !== 9) {
node.id = i;
createSatellites.call(this, node, size, position);
}
if (i === 9) {
node.id = i;
createAlternateShape.call(this, node, size, position);
}
}
//Create Walls
var node = this.scene.addChild();
createWalls(node);
var once = true;
Demo.prototype.onUpdate = function(time) {
this.simulation.update(time);
this.collision.resolve(time, 360)
//Postition walls
var wallPosition = topWall.getPosition();
node.setPosition(wallPosition.x, wallPosition.y);
//Position elements
if (this.items.length > 0) {
for (var i = 0; i < this.items.length; i++) {
if (once) {
console.log(this.items[i][1]._node.moving)
once = false;
}
if (this.items[i][1]._node.moving) {
console.log('moving!')
} else {
var itemPosition = this.simulation.getTransform(this.items[i][0]).position;
this.items[i][1].set(itemPosition[0], itemPosition[1], 0);
}
}
}
FamousEngine.requestUpdateOnNextTick(this);
};
FamousEngine.requestUpdateOnNextTick(this);
}
function createWalls(wallNode) {
wallNode.setSizeMode('absolute', 'absolute', 'absolute').setAbsoluteSize(window.innerWidth, 10, 0);
var wallDOMElement = new DOMElement(wallNode, {
tagName: 'div'
}).setProperty('background-color', 'lightblue');
}
function createLogo(node, size, position) {
node.moving = false;
size.setAbsolute(100, 100);
var mp = new MountPoint(node).set(0.5, 0.5);
var el = new DOMElement(node, {
tagName: 'img',
attributes: {
src: 'http://www.denisboudreau.org/presentations/2014/CSUN/Browser%20Zoom%20and%20Low%20Vision/Comps/ToM_EnsoCircle.png'
}
});
centerPoint = new Sphere({
radius: 50,
mass: 10000,
restrictions: ['xy'],
position: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0)
});
var spring = new Spring(null, centerPoint, {
stiffness: 95,
period: 0.6,
dampingRatio: 1.0,
anchor: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0)
});
centerPoint.setVelocity(0, 0, 0);
this.simulation.add(centerPoint, spring);
this.items.push([centerPoint, position]);
this.collision.addTarget(centerPoint);
}
function createAlternateShape(node, size, position) {
node.moving = false;
size.setAbsolute(100, 100);
var el = new DOMElement(node, {
properties: {
'background-color': 'red',
}
});
var box = new physics.Box({
size: [100, 100, 100],
mass: 10,
position: new Vec3(100, 100, 0)
});
// Attach the box to the anchor with a `Spring` force
var spring = new Spring(null, box, {
stiffness: 95,
period: 0.6,
dampingRatio: 1.0,
anchor: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0)
});
box.setVelocity(0.5, 0.5, 0);
this.simulation.add(box, spring);
this.items.push([box, position]);
this.collision.addTarget(box);
}
function createSatellites(node, size, position, i) {
node.moving = false;
var rand = Math.round(Math.random() * 100 + 30);
size.setAbsolute(rand, rand);
var radius = 100;
var x = Math.floor(Math.random() * radius * 2) - radius;
var y = (Math.round(Math.random()) * 2 - 1) * Math.sqrt(radius * radius - x * x);
var color = 'rgb(' + Math.abs(x) + ',' + Math.abs(Math.round(y)) + ',' + (255 - node.id) + ')';
var el = new DOMElement(node, {
properties: {
'background-color': color,
'border-radius': '50%'
}
});
var satellite = new Sphere({
radius: rand / 2,
mass: 10,
position: new Vec3(x + window.innerWidth / 2, y + window.innerHeight / 2, 0)
});
// Attach the box to the anchor with a `Spring` force
var spring = new Spring(null, satellite, {
stiffness: 95,
period: 0.6,
dampingRatio: 1.0,
anchor: anchor
});
//console.log(color);
// satellite.setVelocity(-y / Math.PI, -x / Math.PI / 2, y / 2);
satellite.setVelocity(0.5, 0.5, 0);
// this.gravity.addTarget(satellite);
this.simulation.add(satellite, spring);
this.items.push([satellite, position]);
this.collision.addTarget(satellite);
//Drag
var nodeGesture = new gestures(node);
nodeGesture.on('drag', function(e, p) {
if (e.status == "move") {
node.moving = true;
}
var currentPos = node.getPosition()
var newPosX = currentPos[0] + e.centerDelta.x
var newPosY = currentPos[1] + e.centerDelta.y
satellite.setPosition(newPosX, newPosY)
node.setPosition(newPosX, newPosY)
if (e.status == "end") {
node.moving = false;
}
});
//event
node.addUIEvent('click');
// node.addComponent({
// onReceive:function(event, payload){
// if(event==='click'){
// // el.setContent('I\'ve been clicked')
//
// }
// }
// })
}
setTimeout(function() {
// Boilerplate
FamousEngine.init();
}, 500);
// App Code
var demo = new Demo();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Famous :: Seed Project</title>
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</body>
</html>
This is the solution using BruteForceAABB.
var famous = famous;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var DOMElement = famous.domRenderables.DOMElement;
var Gravity3D = famous.physics.Gravity3D;
var MountPoint = famous.components.MountPoint;
var PhysicsEngine = famous.physics.PhysicsEngine;
var Position = famous.components.Position;
var Size = famous.components.Size;
var Wall = famous.physics.Wall;
var Sphere = famous.physics.Sphere;
var Vec3 = famous.math.Vec3;
var math = famous.math;
var physics = famous.physics;
var collision = famous.physics.Collision;
var gestures = famous.components.GestureHandler;
var Spring = famous.physics.Spring;
console.log(famous)
var anchor = new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0);
//Create Walls
var rightWall = new Wall({
direction: Wall.LEFT
}).setPosition(window.innerWidth - 20, 0, 0);
var leftWall = new Wall({
direction: Wall.RIGHT
}).setPosition(window.innerWidth + 20, 0, 0);
var topWall = new Wall({
direction: Wall.DOWN
}).setPosition(0, 20, 0);
var bottomWall = new Wall({
direction: Wall.UP
}).setPosition(0, window.innerHeight - 20, 0);
var centerPoint;
function Demo() {
this.scene = FamousEngine.createScene('body');
// this.collision = new collision.({broadphase: 'BruteForce'});
var broadPhase = new physics.Collision.BruteForceAABB([rightWall, leftWall, topWall, bottomWall]);
this.collision = new collision([topWall], {
'broadPhase': broadPhase
});
this.simulation = new PhysicsEngine();
this.simulation.setOrigin(0.5, 0.5);
this.simulation.addConstraint(this.collision);
this.items = [];
this.walls = [];
//Create Items
for (var i = 0; i < 10; i++) {
var node = this.scene.addChild();
node.setMountPoint(0.5, 0.5);
var size = new Size(node).setMode(1, 1);
var position = new Position(node);
if (i === 0) {
createLogo.call(this, node, size, position);
}
if (i !== 0 && i !== 9) {
node.id = i;
createSatellites.call(this, node, size, position);
}
if (i === 9) {
node.id = i;
createAlternateShape.call(this, node, size, position);
}
}
//Create Walls
var node = this.scene.addChild();
createWalls(node);
var once = true;
Demo.prototype.onUpdate = function(time) {
this.simulation.update(time);
// this.collision.resolve(time, 360)
//Postition walls
var wallPosition = topWall.getPosition();
node.setPosition(wallPosition.x, wallPosition.y);
//Position elements
if (this.items.length > 0) {
for (var i = 0; i < this.items.length; i++) {
if (once) {
console.log(this.items[i][1]._node.moving)
once = false;
}
if (this.items[i][1]._node.moving) {
console.log('moving!')
} else {
var itemPosition = this.simulation.getTransform(this.items[i][0]).position;
this.items[i][1].set(itemPosition[0], itemPosition[1], 0);
}
}
}
FamousEngine.requestUpdateOnNextTick(this);
};
FamousEngine.requestUpdateOnNextTick(this);
}
function createWalls(wallNode) {
wallNode.setSizeMode('absolute', 'absolute', 'absolute').setAbsoluteSize(window.innerWidth, 10, 0);
var wallDOMElement = new DOMElement(wallNode, {
tagName: 'div'
}).setProperty('background-color', 'lightblue');
}
function createLogo(node, size, position) {
node.moving = false;
size.setAbsolute(100, 100);
var mp = new MountPoint(node).set(0.5, 0.5);
var el = new DOMElement(node, {
tagName: 'img',
attributes: {
src: './images/famous_logo.png'
}
});
centerPoint = new Sphere({
radius: 50,
mass: 100000,
restrictions: ['xy'],
position: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0)
});
var spring = new Spring(null, centerPoint, {
stiffness: 95,
period: 0.6,
dampingRatio: 1.0,
anchor: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0)
});
centerPoint.setVelocity(0, 0, 0);
this.simulation.add(centerPoint, spring);
this.items.push([centerPoint, position]);
this.collision.addTarget(centerPoint);
}
function createAlternateShape(node, size, position) {
node.moving = false;
size.setAbsolute(100, 100);
var el = new DOMElement(node, {
properties: {
'background-color': 'red',
}
});
var box = new physics.Box({
size: [101, 101, 101],
mass: 100,
position: new Vec3(100, 100, 0)
});
// Attach the box to the anchor with a `Spring` force
var spring = new Spring(null, box, {
period: 1.5,
dampingRatio: 0.8,
anchor: new Vec3(window.innerWidth / 2, window.innerHeight / 2, 0)
});
box.setVelocity(0.1, 0.1, 0);
this.simulation.add(box, spring);
this.items.push([box, position]);
this.collision.addTarget(box);
}
function createSatellites(node, size, position, i) {
node.moving = false;
var rand = Math.round(Math.random() * 100 + 30);
size.setAbsolute(rand, rand);
var radius = rand;
var x = Math.floor(Math.random() * radius * 2) - radius;
var y = (Math.round(Math.random()) * 2 - 1) * Math.sqrt(radius * radius - x * x);
var color = 'rgb(' + Math.abs(x) + ',' + Math.abs(Math.round(y)) + ',' + (255 - node.id) + ')';
var el = new DOMElement(node, {
properties: {
'background-color': color,
'border-radius': '50%'
}
});
var satellite = new Sphere({
radius: rand / 2,
mass: 100,
position: new Vec3(x + window.innerWidth / 2, y + window.innerHeight / 2, 0)
});
// Attach the box to the anchor with a `Spring` force
var spring = new Spring(null, satellite, {
// stiffness: 10,
period: 1.5,
dampingRatio: 0.8,
anchor: anchor
});
//console.log(color);
// satellite.setVelocity(-y / Math.PI, -x / Math.PI / 2, y / 2);
satellite.setVelocity(0.1, 0.1, 0);
// this.gravity.add(satellite);
this.simulation.add(satellite, spring);
this.items.push([satellite, position]);
this.collision.addTarget(satellite);
//Drag
var nodeGesture = new gestures(node);
nodeGesture.on('drag', function(e, p) {
if (e.status == "move") {
node.moving = true;
}
var currentPos = node.getPosition()
var newPosX = currentPos[0] + e.centerDelta.x
var newPosY = currentPos[1] + e.centerDelta.y
satellite.setPosition(newPosX, newPosY)
node.setPosition(newPosX, newPosY)
if (e.status == "end") {
node.moving = false;
}
});
//event
node.addUIEvent('click');
// node.addComponent({
// onReceive:function(event, payload){
// if(event==='click'){
// // el.setContent('I\'ve been clicked')
//
// }
// }
// })
}
setTimeout(function() {
// Boilerplate
FamousEngine.init();
}, 500);
// App Code
var demo = new Demo();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Famous :: Seed Project</title>
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</body>
</html>
As I move my slider I am drawing an arc. I have made it dynamic. If I change the points of arc then the line drawn will also change. Same thing I want to do with a line. If I move my slider the line should get drawn. Also I want to make it dynamic means If i change the line points the line should also change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In A Simple Geometric Spiral </title>
<style>
.wrapper {
margin: 0 auto;
width: 1000px;
}
.uppleft {
float: left;
width: 1000px;
position: relative;
margin: 0 0 500px 10px;
}
.dnleft {
float: left;
width: 1000px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="uppleft">
<canvas id="canvasOne" width="300" height="300"width="500" height="500" style="position:absolute; left:5px; top:10px; border:1px solid red;">
Your browser does not support HTML5 Canvas.
</canvas>
<canvas id="canvasTwo" width="300" height="300" style="position:absolute; left:250px; top:30px; border:1px solid red;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div class="clear"></div>
<div class="dnleft">
<input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSliderNew('slide1', '100');"/>
</div>
</div>
</body>
<script type="text/javascript">
drawSlopeCurve2('canvasTwo', 16, 170, 200, 80)
function counterSliderNew(sID, maxValue) {
var slideVal = document.getElementById(sID).value;
//alert(slideVal);
if (maxValue == 100) {
slideVal = slideVal / 100;
}
if (slideVal == 0) {
} else if (slideVal > 0 && slideVal <= 34) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
} else if (slideVal > 34 && slideVal <= 67) {
//alert(slideVal);
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
staticGraph5('canvasTwo');
} else if (slideVal > 67 && slideVal <= 100) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
}
}
function drawBezier2(canId, points, slideVal) {
var canvas = document.getElementById(canId);
var context = canvas.getContext("2d");
// Draw guides
context.lineWidth = 2;
context.strokeStyle = "rgb(113, 113, 213)";
context.beginPath();
// Label end points
context.fillStyle = "rgb(0, 0, 0)";
// Draw spline segemnts
context.moveTo(points[0].x, points[0].y);
for (var t = 0; t <= slideVal; t += 0.1) {
context.lineTo(Math.pow(1 - t, 2) * points[0].x + 2 * (1 - t) * t * points[1].x + Math.pow(t, 2) * points[2].x, Math.pow(1 - t, 2) * points[0].y + 2 * (1 - t) * t * points[1].y + Math.pow(t, 2) * points[2].y);
}
// Stroke path
context.stroke();
}
function erase(canvasId) {
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.beginPath();
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = canvas.width;
}
function drawSlopeCurve2(canId, mvx, mvy, lnx, lny) {
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(mvx, mvy);
context.lineTo(lnx, lny);
context.lineWidth = 0.6;
context.stroke();
}
</script>
</html>
This will work only in chrome. I want to use drawSlopeCurve2('canvasTwo', 16, 170, 200, 80); this function to draw a line on movement of slider. I am looking for some formula as I have used for moving an arc on slider movement.
You can use this function to get an array of points that interpolate a line between any 2 points:
function linePoints(x1, y1, x2, y2, frames) {
var dx = x2 - x1;
var dy = y2 - y1;
var length = Math.sqrt(dx * dx + dy * dy);
var incrementX = dx / frames;
var incrementY = dy / frames;
var a = new Array();
a.push({ x: x1, y: y1 });
for (var frame = 0; frame < frames - 1; frame++) {
a.push({
x: x1 + (incrementX * frame),
y: y1 + (incrementY * frame)
});
}
a.push({ x: x2, y: y2 });
return (a);
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/qhzJv/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In A Simple Geometric Spiral </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.wrapper {
width: 700px;
height:350px;
border:2px solid green;
padding:15px;
}
.uppleft{
display: inline;
margin-left: 30px;
}
canvas{
border:1px solid red;
}
#sliderwrapper{
display: inline-block;
position:relative;
width:37px; height:300px;
border:1px solid blue;
}
#amount{
position:absolute;
left:5px; top:5px;
margin-bottom:15px;
width:23px;
border:0; color:#f6931f;
font-weight:bold;
}
#slider-vertical{
position:absolute;
left:10px; top:40px;
width:15px; height:225px;
border:0px; color:#f6931f;
font-weight:bold;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="sliderwrapper">
<input type="text" id="amount" />
<div id="slider-vertical"></div>
</div>
<div class="uppleft">
<canvas id="canvasOne" width="300" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
<canvas id="canvasTwo" width="300" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</div>
</body>
<script type="text/javascript">
var startingValue=20;
// handles user moving the slider
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: startingValue,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
counterSliderNew('slide1', '100', ui.value);
}
});
// get an array of 100 points between start and end of line
var points=linePoints(16, 170, 200, 80,100);
// draw the initial point based on the beginning slider value
counterSliderNew('slide1', '100', startingValue);
function counterSliderNew(sID, maxValue,theSliderValue) {
var slideVal = theSliderValue; // document.getElementById(sID).value;
// get the slider value and get the point at points[slideVal]
var point=points[slideVal];
erase('canvasTwo');
drawSlopeCurve2('canvasTwo',16,170,point.x,point.y);
if (maxValue == 100) {
slideVal = slideVal / 100;
}
if (slideVal == 0) {
} else if (slideVal > 0 && slideVal <= 34) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
} else if (slideVal > 34 && slideVal <= 67) {
//alert(slideVal);
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
staticGraph5('canvasTwo');
} else if (slideVal > 67 && slideVal <= 100) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
}
}
function drawBezier2(canId, points, slideVal) {
var canvas = document.getElementById(canId);
var context = canvas.getContext("2d");
// Draw guides
context.lineWidth = 2;
context.strokeStyle = "rgb(113, 113, 213)";
context.beginPath();
// Label end points
context.fillStyle = "rgb(0, 0, 0)";
// Draw spline segemnts
context.moveTo(points[0].x, points[0].y);
for (var t = 0; t <= slideVal; t += 0.1) {
context.lineTo(Math.pow(1 - t, 2) * points[0].x + 2 * (1 - t) * t * points[1].x + Math.pow(t, 2) * points[2].x, Math.pow(1 - t, 2) * points[0].y + 2 * (1 - t) * t * points[1].y + Math.pow(t, 2) * points[2].y);
}
// Stroke path
context.stroke();
}
function erase(canvasId) {
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.beginPath();
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = canvas.width;
}
function drawSlopeCurve2(canId, mvx, mvy, lnx, lny) {
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(mvx, mvy);
context.lineTo(lnx, lny);
context.lineWidth = 0.6;
context.stroke();
}
function linePoints(x1, y1, x2, y2, frames) {
var dx = x2 - x1;
var dy = y2 - y1;
var length = Math.sqrt(dx * dx + dy * dy);
var incrementX = dx / frames;
var incrementY = dy / frames;
var a = new Array();
a.push({ x: x1, y: y1 });
for (var frame = 0; frame < frames - 1; frame++) {
a.push({
x: x1 + (incrementX * frame),
y: y1 + (incrementY * frame)
});
}
a.push({ x: x2, y: y2 });
return (a);
}
</script>
</html>