I am having a problem finding information on using actionscript 2 to move an object along a more complicated path. I have no issue if i need to tween in the x or y direction, or at the same time, but If i wanted an object to follow a curvy path could someone provide me sample code for a way to follow a motion guide or a curved path like a bezier?
here is my usual code:
Tween1();
function Tween1(){
setTimeout(theTween, 0);
function theTween(){
var myTween:Tween = new Tween(Object, "_x", Regular.easeOut, 0, 100, 1, true);
var myTween:Tween = new Tween(Object, "_y", Regular.easeOut, 0, 100, 1, true);
}
try this Animate along bezier curve
var circle:Shape = Shape(addChild(new Shape));
with(circle.graphics) beginFill(0x000000), drawCircle(0,0,5);
var bezierPoint:Point = new Point();
function bezier(a:Number, x1:Number, y1:Number, x2:Number, y2:Number, x3:Number, y3:Number):void {
var b:Number =1-a;
var pre1:Number=a*a;
var pre2:Number=2*a*b;
var pre3:Number=b*b;
bezierPoint.x = pre1*x1 + pre2*x2 + pre3*x3;
bezierPoint.y = pre1*y1 + pre2*y2 + pre3*y3;
}
var inc:Number = 0;
var theta:Number = 0;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
graphics.clear();
graphics.lineStyle(0,0xFF0000);
graphics.moveTo(200,200);
graphics.curveTo(mouseX, mouseY, 400, 200);
inc += .03;
inc %= 1;
bezier(inc, 200, 200, mouseX, mouseY, 400, 200);
circle.x = bezierPoint.x;
circle.y = bezierPoint.y;
}
Related
I am using the jspdf library to create a pdf and its working out great. I am now trying to append to that pdf another existing pdf. At the moment when my user clicks the download button it fires off two separate downloads. I was thinking that a work around might be creating two images and adding them to my pdf created with Jspdf. Has anyone appended an existing pdf to a pdf generated using jspdf?
$(document).ready(function () {
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpg'
var specialElementHandlers = {
'#content': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
doc.fromHTML($('#content').get(0), 0, 0, {
'elementHandlers': specialElementHandlers
});
doc.save('TemporaryIdCard.pdf');
});
});
I ended up hacking an answer from here.
Not thrilled about it but it works. I created images from the content in the PDF I was trying to append and then added each as a page to my doc
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpeg';
var imgData2 = 'dogs.jpeg';
var imgData3 = 'kittens.jpeg';
var specialElementHandlers = {
'#content': function (element, renderer) {
return true;
}
};
var pageHeight = doc.internal.pageSize.height;
var y = 800;
var x = 800;
$('#cmd').click(function () {
doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
doc.fromHTML($('#content').get(0), 0, 0, {
'elementHandlers': specialElementHandlers
});
if (y >= pageHeight) {
doc.addPage();
doc.addImage(imgData3, 'JPEG', 45, 45, 500, 550);
y = 0;
}
if (x >= pageHeight) {
doc.addPage();
doc.addImage(imgData2, 'JPEG', 50, 70, 500, 500);
x = 0;
}
doc.save('TemporaryIdCard.pdf');
});
guys I know this question has been asked several times, several different ways, but I just can get it to work. Basically I have 2d clouds, but I want the camera to rotate around an object floating above the clouds. The problem is, when im not looking a the face of the clouds u can tell that they are 2d. Soooo i want the the clouds to "look" at the camera where ever it is. I believe my problem stems from how the cloud geometry is called on to the planes, but here take a look. I put the a lookAt function with in my animate function. I hope you can point me in the right direction at least.
Three.js rev. 70...
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
scene.add(camera);
controls = new THREE.OrbitControls( camera );
controls.target.copy( new THREE.Vector3( 0, 0,475) );
controls.minDistance = 50;
controls.maxDistance = 200;
controls.autoRotate = true;
controls.autoRotateSpeed = .2; // 30 seconds per round when fps is 60
controls.minPolarAngle = Math.PI/4; // radians
controls.maxPolarAngle = Math.PI/2; // radians
controls.enableDamping = true;
controls.dampingFactor = 0.25;
clock = new THREE.Clock();
cloudGeometry = new THREE.Geometry();
var texture = THREE.ImageUtils.loadTexture('img/cloud10.png', null, animate);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
var fog = new THREE.Fog(0x4584b4, -100, 3000);
cloudMaterial = new THREE.ShaderMaterial({
uniforms: {
"map": {
type: "t",
value: texture
},
"fogColor": {
type: "c",
value: fog.color
},
"fogNear": {
type: "f",
value: fog.near
},
"fogFar": {
type: "f",
value: fog.far
},
},
vertexShader: document.getElementById('vs').textContent,
fragmentShader: document.getElementById('fs').textContent,
depthWrite: false,
depthTest: false,
transparent: true
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
for (var i = 0; i < 8000; i++) {
plane.position.x = Math.random() * 1000 - 500;
plane.position.y = -Math.random() * Math.random() * 200 - 15;
plane.position.z = i;
plane.rotation.z = Math.random() * Math.PI;
plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
plane.updateMatrix();
cloudGeometry.merge(plane.geometry, plane.matrix);
}
cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
scene.add(cloud);
cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
cloud.position.z = -8000;
scene.add(cloud);
var radius = 100;
var xSegments = 50;
var ySegments = 50;
var geo = new THREE.SphereGeometry(radius, xSegments, ySegments);
var mat = new THREE.ShaderMaterial({
uniforms: {
lightPosition: {
type: 'v3',
value: light.position
},
textureMap: {
type: 't',
value: THREE.ImageUtils.loadTexture("img/maps/moon.jpg")
},
normalMap: {
type: 't',
value: THREE.ImageUtils.loadTexture("img/maps/normal.jpg")
},
uvScale: {
type: 'v2',
value: new THREE.Vector2(1.0, 1.0)
}
},
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
mesh = new THREE.Mesh(geo, mat);
mesh.geometry.computeTangents();
mesh.position.set(0, 50, 0);
mesh.rotation.set(0, 180, 0);
scene.add(mesh);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
light.orbit(mesh.position, clock.getElapsedTime());
cloud.lookAt( camera );
controls.update(camera);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', onWindowResize, false);
just a first guess:
the lookAt function needs Vector3 as parameter. try to use camera.position in the animate function.
cloud.lookAt( camera.position );
first of all, to build 2D objects in a scene that always faces towards the camera, you should use Sprite object, so you don't have to do anything to get this effect. (and have better performance :))
Definition from THREE.org: Sprite - a sprite is a plane in an 3d scene which faces always towards the camera.
var map = THREE.ImageUtils.loadTexture( "sprite.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( material );
scene.add( sprite );
Please check this example: http://threejs.org/examples/#webgl_points_sprites
I would absolutely agree, I would use Sprite, or even Points, but then, if assign a texture to it, it will render it square-sized. My sprites are animated, and frames cannot be packed in square tiles, cause it would take a lot of space. I might make a mesh and use this lookAt function.
I'm using three.js r67, and vertices does not seem to be updated.
I set geometry.dynamic = true, geometry.verticesNeedUpdate = true.
Circle is moving, but line is static....
Someone could help me?
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var g = new THREE.CircleGeometry( 4, 16 );
var m = new THREE.MeshBasicMaterial({color: 0x114949});
var circle = new THREE.Mesh( g, m );
circle.position.x = 2;
circle.position.y = 2;
circle.position.z = -1;
scene.add( circle );
var material = new THREE.LineBasicMaterial({color: 0xDF4949, linewidth: 5});
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 1, 0));
geometry.verticesNeedUpdate = true;
geometry.dynamic = true;
var line = new THREE.Line(geometry, material);
scene.add(line);
var update = function() {
circle.position.x += 0.01;
line.geometry.vertices[0].x = circle.position.x;
};
var render = function() {
renderer.render(scene, camera);
};
var loop = function() {
update();
render();
requestAnimationFrame(loop, renderer.canvas);
};
loop();
Note: The legacy Geometry class has been replaced with the BufferGeometry class.
If you want to update the vertex positions of your BufferGeometry, you need to use a pattern like so:
mesh.geometry.attributes.position.array[ 0 ] += 0.01;
mesh.geometry.attributes.position.needsUpdate = true;
After rendering, you need to reset the needsUpdate flag to true every time the attribute values are changed.
three.js r.147
I'm looking for a thumbnail tiles scroller/slideshow/slider
Here is the example http://safari.to/clients
Really appreciate if anyone could help :) Thanks
When you see something on any website, its easy to inspect and see how they are doing it.
The website mentioned by you is doing it using their own script instead of a plug in
See the following code from http://safari.to/assets/js/script.js. You will also need to see how they are styling the sliders by inspecting their CSS code
// Agencies slide
var clients = Math.floor(Math.random() * 2) + 1; // nth-child indices start at 1
if ( clients == 1){
$('.agencies.clients').hide();
}
else
{
$('.brands.clients').hide();
}
$('.agencies menu a').bind({
click: function()
{
if(sliding) return false;
var pointer = $(this);
var width = $('.agencies .scroller li').length * 137;
var current = parseInt($('.agencies .scroller').css('left'));
var distance = 0;
if(pointer.is('.right-pointer'))
{
if(current == -1920) distance = current - 137;
else distance = current - 960;
if((width + current) < 960)
distance = current;
}
else
{
distance = current + 1097;
if(distance > 0)
distance = 0;
}
sliding = true;
$('.scroller').animate({
left: distance + 'px'
}, 300,
function()
{
sliding = false;
});
}
});
Is it possible to add mouse events to a shape mask? I have the mask working, and have animated it in other tests. But now I want to know if masks can be clicked and dragged.
You can see the example here: http://www.webnamehere.com/mask/mask.html
And although Easeljs never never seems to work in jsFiddle, you can also see the code here: http://jsfiddle.net/8kbu3/1/
var circle = new createjs.Shape();
var Galaxy;
$(document).ready(function() {
canvasWidth = "1024px";
canvasHeight = "768px";
stage = new createjs.Stage('demoCanvas');
createjs.Touch.enable(stage);
$("#demoCanvas").attr({width:canvasWidth, height:canvasHeight});
Galaxy = new Image();
Galaxy.src = "images/galaxy.jpg";
Galaxy.onload = handleImageLoad;
function handleImageLoad() {
GalaxyBitmap = new createjs.Bitmap(Galaxy);
GalaxyBitmap.x = 0;
GalaxyBitmap.y = 0;
containerGalaxy = new createjs.Container();
containerGalaxy.addChild(GalaxyBitmap);
containerGalaxy.x = 0;
containerGalaxy.y = 0;
circle = new createjs.Shape();
circle.graphics.beginFill('blue').drawCircle(80,80,50).endFill();
containerGalaxy.mask = circle;
stage.addChild(containerGalaxy);
stage.update();
}
circle.onClick = function(evt){
alert('what the F?');
}
circle.onPress = function(evt){
var offset = {x:circle.x-evt.stageX, y:circle.y-evt.stageY};
evt.onMouseMove = function(ev) {
circle.x = ev.stageX+offset.x;
circle.y = ev.stageY+offset.y;
console.log("circle X: " + circle.x + " | Y: " + circle.y);
stage.update();
}
}
Thanks guys
To receive an click-event you have to add the circle to the stage (stage.addChild(circle)) or to a child of the stage, even if it acts as a mask - in your case it might be better to take a transparent dummy-object as the click-listener.