I'm trying to learn the three.js library by reading the "WebGL Up And Running" book and the problem for me is that the author made his own javascript framework called 'sim.js' which is a "higher-level set of reusable objects build upon three.js that wraps the more repetitive Three.js tasks" as he said but for a beginner like me i'd prefer more experiencing the raw three.js first.. So now i have to understand what his framwork does to understand what happens under the hood.
this is the sim.js
// Sim.js - A Simple Simulator for WebGL (based on Three.js)
Sim = {};
// Sim.Publisher - base class for event publishers
Sim.Publisher = function() {
this.messageTypes = {};
}
Sim.Publisher.prototype.subscribe = function(message, subscriber, callback) {
var subscribers = this.messageTypes[message];
if (subscribers)
{
if (this.findSubscriber(subscribers, subscriber) != -1)
{
return;
}
}
else
{
subscribers = [];
this.messageTypes[message] = subscribers;
}
subscribers.push({ subscriber : subscriber, callback : callback });
}
Sim.Publisher.prototype.unsubscribe = function(message, subscriber, callback) {
if (subscriber)
{
var subscribers = this.messageTypes[message];
if (subscribers)
{
var i = this.findSubscriber(subscribers, subscriber, callback);
if (i != -1)
{
this.messageTypes[message].splice(i, 1);
}
}
}
else
{
delete this.messageTypes[message];
}
}
Sim.Publisher.prototype.publish = function(message) {
var subscribers = this.messageTypes[message];
if (subscribers)
{
for (var i = 0; i < subscribers.length; i++)
{
var args = [];
for (var j = 0; j < arguments.length - 1; j++)
{
args.push(arguments[j + 1]);
}
subscribers[i].callback.apply(subscribers[i].subscriber, args);
}
}
}
Sim.Publisher.prototype.findSubscriber = function (subscribers, subscriber) {
for (var i = 0; i < subscribers.length; i++)
{
if (subscribers[i] == subscriber)
{
return i;
}
}
return -1;
}
// Sim.App - application class (singleton)
Sim.App = function()
{
Sim.Publisher.call(this);
this.renderer = null;
this.scene = null;
this.camera = null;
this.objects = [];
}
Sim.App.prototype = new Sim.Publisher;
Sim.App.prototype.init = function(param)
{
param = param || {};
var container = param.container;
var canvas = param.canvas;
// Create the Three.js renderer, add it to our div
var renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild( renderer.domElement );
// Create a new Three.js scene
var scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x505050 ) );
scene.data = this;
// Put in a camera at a good default location
camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 10000 );
camera.position.set( 0, 0, 3.3333 );
scene.add(camera);
// Create a root object to contain all other scene objects
var root = new THREE.Object3D();
scene.add(root);
// Create a projector to handle picking
var projector = new THREE.Projector();
// Save away a few things
this.container = container;
this.renderer = renderer;
this.scene = scene;
this.camera = camera;
this.projector = projector;
this.root = root;
// Set up event handlers
this.initMouse();
this.initKeyboard();
this.addDomHandlers();
}
//Core run loop
Sim.App.prototype.run = function()
{
this.update();
this.renderer.render( this.scene, this.camera );
var that = this;
requestAnimationFrame(function() { that.run(); });
}
// Update method - called once per tick
Sim.App.prototype.update = function()
{
var i, len;
len = this.objects.length;
for (i = 0; i < len; i++)
{
this.objects[i].update();
}
}
// Add/remove objects
Sim.App.prototype.addObject = function(obj)
{
this.objects.push(obj);
// If this is a renderable object, add it to the root scene
if (obj.object3D)
{
this.root.add(obj.object3D);
}
}
Sim.App.prototype.removeObject = function(obj)
{
var index = this.objects.indexOf(obj);
if (index != -1)
{
this.objects.splice(index, 1);
// If this is a renderable object, remove it from the root scene
if (obj.object3D)
{
this.root.remove(obj.object3D);
}
}
}
// Event handling
Sim.App.prototype.initMouse = function()
{
var dom = this.renderer.domElement;
var that = this;
dom.addEventListener( 'mousemove',
function(e) { that.onDocumentMouseMove(e); }, false );
dom.addEventListener( 'mousedown',
function(e) { that.onDocumentMouseDown(e); }, false );
dom.addEventListener( 'mouseup',
function(e) { that.onDocumentMouseUp(e); }, false );
$(dom).mousewheel(
function(e, delta) {
that.onDocumentMouseScroll(e, delta);
}
);
this.overObject = null;
this.clickedObject = null;
}
Sim.App.prototype.initKeyboard = function()
{
var dom = this.renderer.domElement;
var that = this;
dom.addEventListener( 'keydown',
function(e) { that.onKeyDown(e); }, false );
dom.addEventListener( 'keyup',
function(e) { that.onKeyUp(e); }, false );
dom.addEventListener( 'keypress',
function(e) { that.onKeyPress(e); }, false );
// so it can take focus
dom.setAttribute("tabindex", 1);
dom.style.outline='none';
}
Sim.App.prototype.addDomHandlers = function()
{
var that = this;
window.addEventListener( 'resize', function(event) { that.onWindowResize(event); }, false );
}
Sim.App.prototype.onDocumentMouseMove = function(event)
{
event.preventDefault();
if (this.clickedObject && this.clickedObject.handleMouseMove)
{
var hitpoint = null, hitnormal = null;
var intersected = this.objectFromMouse(event.pageX, event.pageY);
if (intersected.object == this.clickedObject)
{
hitpoint = intersected.point;
hitnormal = intersected.normal;
}
this.clickedObject.handleMouseMove(event.pageX, event.pageY, hitpoint, hitnormal);
}
else
{
var handled = false;
var oldObj = this.overObject;
var intersected = this.objectFromMouse(event.pageX, event.pageY);
this.overObject = intersected.object;
if (this.overObject != oldObj)
{
if (oldObj)
{
this.container.style.cursor = 'auto';
if (oldObj.handleMouseOut)
{
oldObj.handleMouseOut(event.pageX, event.pageY);
}
}
if (this.overObject)
{
if (this.overObject.overCursor)
{
this.container.style.cursor = this.overObject.overCursor;
}
if (this.overObject.handleMouseOver)
{
this.overObject.handleMouseOver(event.pageX, event.pageY);
}
}
handled = true;
}
if (!handled && this.handleMouseMove)
{
this.handleMouseMove(event.pageX, event.pageY);
}
}
}
Sim.App.prototype.onDocumentMouseDown = function(event)
{
event.preventDefault();
var handled = false;
var intersected = this.objectFromMouse(event.pageX, event.pageY);
if (intersected.object)
{
if (intersected.object.handleMouseDown)
{
intersected.object.handleMouseDown(event.pageX, event.pageY, intersected.point, intersected.normal);
this.clickedObject = intersected.object;
handled = true;
}
}
if (!handled && this.handleMouseDown)
{
this.handleMouseDown(event.pageX, event.pageY);
}
}
Sim.App.prototype.onDocumentMouseUp = function(event)
{
event.preventDefault();
var handled = false;
var intersected = this.objectFromMouse(event.pageX, event.pageY);
if (intersected.object)
{
if (intersected.object.handleMouseUp)
{
intersected.object.handleMouseUp(event.pageX, event.pageY, intersected.point, intersected.normal);
handled = true;
}
}
if (!handled && this.handleMouseUp)
{
this.handleMouseUp(event.pageX, event.pageY);
}
this.clickedObject = null;
}
Sim.App.prototype.onDocumentMouseScroll = function(event, delta)
{
event.preventDefault();
if (this.handleMouseScroll)
{
this.handleMouseScroll(delta);
}
}
Sim.App.prototype.objectFromMouse = function(pagex, pagey)
{
// Translate page coords to element coords
var offset = $(this.renderer.domElement).offset();
var eltx = pagex - offset.left;
var elty = pagey - offset.top;
// Translate client coords into viewport x,y
var vpx = ( eltx / this.container.offsetWidth ) * 2 - 1;
var vpy = - ( elty / this.container.offsetHeight ) * 2 + 1;
var vector = new THREE.Vector3( vpx, vpy, 0.5 );
this.projector.unprojectVector( vector, this.camera );
var ray = new THREE.Ray( this.camera.position, vector.subSelf( this.camera.position ).normalize() );
var intersects = ray.intersectScene( this.scene );
if ( intersects.length > 0 ) {
var i = 0;
while(!intersects[i].object.visible)
{
i++;
}
var intersected = intersects[i];
var mat = new THREE.Matrix4().getInverse(intersected.object.matrixWorld);
var point = mat.multiplyVector3(intersected.point);
return (this.findObjectFromIntersected(intersected.object, intersected.point, intersected.face.normal));
}
else
{
return { object : null, point : null, normal : null };
}
}
Sim.App.prototype.findObjectFromIntersected = function(object, point, normal)
{
if (object.data)
{
return { object: object.data, point: point, normal: normal };
}
else if (object.parent)
{
return this.findObjectFromIntersected(object.parent, point, normal);
}
else
{
return { object : null, point : null, normal : null };
}
}
Sim.App.prototype.onKeyDown = function(event)
{
// N.B.: Chrome doesn't deliver keyPress if we don't bubble... keep an eye on this
event.preventDefault();
if (this.handleKeyDown)
{
this.handleKeyDown(event.keyCode, event.charCode);
}
}
Sim.App.prototype.onKeyUp = function(event)
{
// N.B.: Chrome doesn't deliver keyPress if we don't bubble... keep an eye on this
event.preventDefault();
if (this.handleKeyUp)
{
this.handleKeyUp(event.keyCode, event.charCode);
}
}
Sim.App.prototype.onKeyPress = function(event)
{
// N.B.: Chrome doesn't deliver keyPress if we don't bubble... keep an eye on this
event.preventDefault();
if (this.handleKeyPress)
{
this.handleKeyPress(event.keyCode, event.charCode);
}
}
Sim.App.prototype.onWindowResize = function(event) {
this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
this.camera.aspect = this.container.offsetWidth / this.container.offsetHeight;
this.camera.updateProjectionMatrix();
}
Sim.App.prototype.focus = function()
{
if (this.renderer && this.renderer.domElement)
{
this.renderer.domElement.focus();
}
}
// Sim.Object - base class for all objects in our simulation
Sim.Object = function()
{
Sim.Publisher.call(this);
this.object3D = null;
this.children = [];
}
Sim.Object.prototype = new Sim.Publisher;
Sim.Object.prototype.init = function()
{
}
Sim.Object.prototype.update = function()
{
this.updateChildren();
}
// setPosition - move the object to a new position
Sim.Object.prototype.setPosition = function(x, y, z)
{
if (this.object3D)
{
this.object3D.position.set(x, y, z);
}
}
//setScale - scale the object
Sim.Object.prototype.setScale = function(x, y, z)
{
if (this.object3D)
{
this.object3D.scale.set(x, y, z);
}
}
//setScale - scale the object
Sim.Object.prototype.setVisible = function(visible)
{
function setVisible(obj, visible)
{
obj.visible = visible;
var i, len = obj.children.length;
for (i = 0; i < len; i++)
{
setVisible(obj.children[i], visible);
}
}
if (this.object3D)
{
setVisible(this.object3D, visible);
}
}
// updateChildren - update all child objects
Sim.Object.prototype.update = function()
{
var i, len;
len = this.children.length;
for (i = 0; i < len; i++)
{
this.children[i].update();
}
}
Sim.Object.prototype.setObject3D = function(object3D)
{
object3D.data = this;
this.object3D = object3D;
}
//Add/remove children
Sim.Object.prototype.addChild = function(child)
{
this.children.push(child);
// If this is a renderable object, add its object3D as a child of mine
if (child.object3D)
{
this.object3D.add(child.object3D);
}
}
Sim.Object.prototype.removeChild = function(child)
{
var index = this.children.indexOf(child);
if (index != -1)
{
this.children.splice(index, 1);
// If this is a renderable object, remove its object3D as a child of mine
if (child.object3D)
{
this.object3D.remove(child.object3D);
}
}
}
// Some utility methods
Sim.Object.prototype.getScene = function()
{
var scene = null;
if (this.object3D)
{
var obj = this.object3D;
while (obj.parent)
{
obj = obj.parent;
}
scene = obj;
}
return scene;
}
Sim.Object.prototype.getApp = function()
{
var scene = this.getScene();
return scene ? scene.data : null;
}
// Some constants
/* key codes
37: left
38: up
39: right
40: down
*/
Sim.KeyCodes = {};
Sim.KeyCodes.KEY_LEFT = 37;
Sim.KeyCodes.KEY_UP = 38;
Sim.KeyCodes.KEY_RIGHT = 39;
Sim.KeyCodes.KEY_DOWN = 40;
in another script he wrote a new class called earth-basic based on the sim class so, the begining of the earth-basic.js script looks as the following :
// Constructor
EarthApp = function()
{
Sim.App.call(this);
}
// Subclass Sim.App
EarthApp.prototype = new Sim.App();
// Our custom initializer
EarthApp.prototype.init = function(param)
{
// Call superclass init code to set up scene, renderer, default camera
Sim.App.prototype.init.call(this, param);
// Create the Earth and add it to our sim
var earth = new Earth();
earth.init();
this.addObject(earth);
}
// Custom Earth class
Earth = function()
{
Sim.Object.call(this);
}
Earth.prototype = new Sim.Object();
1) what does the function call in the line "Sim.App.call(this);" written in the constructor (by passing "this" as parameter which i suppose is referring to the EarthApp variable)? all what i can guess is that EarthApp will inherit the Sim.App properties (the renderer, the camera ...). The same "technique" was used inside the "Sim.App" function itself by calling "Sim.Publisher.call(this);"
2) in 1) i supposed he just used the sim.App class as a super-Class but then all of a sudden, i found he added a new instance of sim.App() to the EarthApp's prototype by writting "EarthApp.prototype = new Sim.App();" PLease guys tell me what the heck is going on in there.
The call function in Sim.App.call(this)
is calling the App function like you would normally (by doing Sim.App()), but the difference is that by using call you may pass in a specific context for the the function. The context being the value of 'this' inside the Sim.App function. As you mentioned this happens again inside the Sim.App function which means that the object you create when you call the EarthApp constructor will end up having the properties and methods defined on all three types EarthApp, SimApp, and Publisher.
Setting the EarthApp prototype to an instance of SimApp is how inheritance works in Javascript. I encourage you to read up on it as it's very different from the classical inheritance you are probably familiar with from other languages. This link may be of some help.
JavaScript Prototype in Plain Language
Related
How may I draw a line, and create a clipping plane from it? Almost working example inside.
https://decadent3d.s3.amazonaws.com/data/test.html
Everything is in the page source.
//you need to uncomment the actual problem line//
function newClipping() allows me to draw a line on a plane that always faces the camera,
I get the start and end points (Vector3s) from it and create a new THREE.Line3
Then I use the Line3.GetCenter() to net my 3rd Vector3.
Then using the math I found online in the link below, I get to work.
https://www.geeksforgeeks.org/program-to-find-equation-of-a-plane-passing-through-3-points/
But it doesn't work.
Anyone much better than this hobbyist right here???
https://www.reddit.com/r/threejs/comments/r6qh38/how_may_i_draw_a_line_and_create_a_clipping_plane/
Below is the code that worked in the end...
//working sample
let myButton = document.getElementById('ClippingButton');
function removeClipping() {
renderer.clippingPlanes = [];
myButton.innerText = 'Slice Models';
myButton.addEventListener('click', function(event) {drawEnabled = true; newClipping();}, { once: true });
};
function newClipping() {
myButton.innerText = 'Draw a Line';
myButton.style.color = '#fccf03';
rackballcontrol.enabled = false;
var hitPlane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200,200),new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.0 }) );
hitPlane.quaternion.copy(camera.quaternion);
scene.add(hitPlane);
var lineGeometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(), new THREE.Vector3() ]);
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
var newLine = new THREE.Line(lineGeometry, lineMaterial);
scene.add( newLine );
var rayCaster = new THREE.Raycaster();
var hitPoint = new THREE.Vector3();
var isMouseDown = false;
renderer.domElement.addEventListener('mousedown', e => {
if (e.button === 0) {
var x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1;
var y = -(e.clientY / renderer.domElement.clientHeight) * 2 + 1;
rayCaster.setFromCamera({ x, y }, camera);
var intersections = rayCaster.intersectObject(hitPlane);
if (intersections && intersections.length) {
isMouseDown = true;
hitPoint.copy(intersections[0].point);
lineGeometry.setFromPoints([ hitPoint, intersections[0].point ]);
};
};
}, { once: true });
renderer.domElement.addEventListener('mousemove', e => {
if (isMouseDown) {
var x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1;
var y = -(e.clientY / renderer.domElement.clientHeight) * 2 + 1;
rayCaster.setFromCamera({ x, y }, camera);
var intersections = rayCaster.intersectObject(hitPlane);
if (intersections && intersections.length) {
lineGeometry.setFromPoints([ hitPoint, intersections[0].point ])
};
};
});
renderer.domElement.addEventListener('mouseup', e => {
for (i = 0; i < meshArray.length; i++) {
if(meshArray[i].visible === true){
matArray[i].opacity = 1;
};
};
isMouseDown = false;
trackballcontrol.enabled = true;
var lineArray = newLine.geometry.attributes.position.array;
var vectA = new THREE.Vector3(lineArray[0],lineArray[1],lineArray[2]);
var vectC = new THREE.Vector3(lineArray[3],lineArray[4],lineArray[5]);
var globalPlane = new THREE.Plane().setFromCoplanarPoints(camera.position,vectA,vectC);
renderer.clippingPlanes = [ globalPlane ];
myButton.addEventListener('click', function(event) { removeClipping(); }, { once: true });
myButton.innerText = 'Remove Slice';
myButton.style.color = '#fc8c03';
scene.remove(hitPlane);
scene.remove(newLine);
}, { once: true });
};
myButton.addEventListener('click', function(event) { newClipping(); }, { once: true });
//working sample
I am using slick carousel slider which has 5 slides, each slide should trigger an animation after it gets displayed on the page.
An animator has created an animation using Adobe Animate CC and exported the animation in createjs format so it is compatible with html5.
If I try to call the animation on afterchange I get an error:
TypeError: lib.FlowerGrowTemplate is not a constructor
See the comment below for where the error is happening:
/*The error is pointing to here*/
Adobe Animate CC generated javascript code:
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [];
// symbols:
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
.....
})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;
var graphic_canvas_1, graphic_stage_1, graphic_exportRoot_1, graphic_container_1, graphic_dom_overlay_container_1, graphic_fnStartAnimation_1;
function graphic_init_1() {
graphic_canvas_1 = document.getElementById("graphic_canvas");
graphic_container_1 = document.getElementById("graphic_container");
graphic_dom_overlay_container_1 = document.getElementById("graphic_dom_overlay_container");
var comp=AdobeAn.getComposition("AD6FD640782B2A4DAD43D647860AC61B");
var lib=comp.getLibrary();
graphic_handleComplete_1({},comp);
}
function graphic_handleComplete_1(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
graphic_exportRoot_1 = new lib.FlowerGrowTemplate(); /*The error is pointing to here*/
graphic_stage_1 = new lib.Stage(graphic_canvas_1);
//Registers the "tick" event listener.
graphic_fnStartAnimation_1 = function() {
graphic_stage_1.addChild(graphic_exportRoot_1);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", graphic_stage_1)
graphic_stage_1.addEventListener("tick", graphic_handleTick_1)
function graphic_getProjectionMatrix_1(container, totalDepth) {
var focalLength = 528.25;
var projectionCenter = { x : lib.properties.width/2, y : lib.properties.height/2 };
var scale = (totalDepth + focalLength)/focalLength;
var scaleMat = new createjs.Matrix2D;
scaleMat.a = 1/scale;
scaleMat.d = 1/scale;
var projMat = new createjs.Matrix2D;
projMat.tx = -projectionCenter.x;
projMat.ty = -projectionCenter.y;
projMat = projMat.prependMatrix(scaleMat);
projMat.tx += projectionCenter.x;
projMat.ty += projectionCenter.y;
return projMat;
}
function graphic_handleTick_1(event) {
var cameraInstance = graphic_exportRoot_1.___camera___instance;
if(cameraInstance !== undefined && cameraInstance.pinToObject !== undefined)
{
cameraInstance.x = cameraInstance.pinToObject.x + cameraInstance.pinToObject.pinOffsetX;
cameraInstance.y = cameraInstance.pinToObject.y + cameraInstance.pinToObject.pinOffsetY;
if(cameraInstance.pinToObject.parent !== undefined && cameraInstance.pinToObject.parent.depth !== undefined)
cameraInstance.depth = cameraInstance.pinToObject.parent.depth + cameraInstance.pinToObject.pinOffsetZ;
}
graphic_applyLayerZDepth_1(graphic_exportRoot_1);
}
function graphic_applyLayerZDepth_1(parent)
{
var cameraInstance = parent.___camera___instance;
var focalLength = 528.25;
var projectionCenter = { 'x' : 0, 'y' : 0};
if(parent === graphic_exportRoot_1)
{
var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };
projectionCenter.x = stageCenter.x;
projectionCenter.y = stageCenter.y;
}
for(child in parent.children)
{
var layerObj = parent.children[child];
if(layerObj == cameraInstance)
continue;
graphic_applyLayerZDepth_1(layerObj, cameraInstance);
if(layerObj.layerDepth === undefined)
continue;
if(layerObj.currentFrame != layerObj.parent.currentFrame)
{
layerObj.gotoAndPlay(layerObj.parent.currentFrame);
}
var matToApply = new createjs.Matrix2D;
var cameraMat = new createjs.Matrix2D;
var totalDepth = layerObj.layerDepth ? layerObj.layerDepth : 0;
var cameraDepth = 0;
if(cameraInstance && !layerObj.isAttachedToCamera)
{
var mat = cameraInstance.getMatrix();
mat.tx -= projectionCenter.x;
mat.ty -= projectionCenter.y;
cameraMat = mat.invert();
cameraMat.prependTransform(projectionCenter.x, projectionCenter.y, 1, 1, 0, 0, 0, 0, 0);
cameraMat.appendTransform(-projectionCenter.x, -projectionCenter.y, 1, 1, 0, 0, 0, 0, 0);
if(cameraInstance.depth)
cameraDepth = cameraInstance.depth;
}
if(layerObj.depth)
{
totalDepth = layerObj.depth;
}
//Offset by camera depth
totalDepth -= cameraDepth;
if(totalDepth < -focalLength)
{
matToApply.a = 0;
matToApply.d = 0;
}
else
{
if(layerObj.layerDepth)
{
var sizeLockedMat = graphic_getProjectionMatrix_1(parent, layerObj.layerDepth);
if(sizeLockedMat)
{
sizeLockedMat.invert();
matToApply.prependMatrix(sizeLockedMat);
}
}
matToApply.prependMatrix(cameraMat);
var projMat = graphic_getProjectionMatrix_1(parent, totalDepth);
if(projMat)
{
matToApply.prependMatrix(projMat);
}
}
layerObj.transformMatrix = matToApply;
}
}
}
//Code to support hidpi screens and responsive scaling.
function graphic_makeResponsive_1(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', graphic_resizeCanvas_1);
graphic_resizeCanvas_1();
function graphic_resizeCanvas_1() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
graphic_canvas_1.width = w*pRatio*sRatio;
graphic_canvas_1.height = h*pRatio*sRatio;
graphic_canvas_1.style.width = graphic_dom_overlay_container_1.style.width = graphic_container_1.style.width = w*sRatio+'px';
graphic_canvas_1.style.height = graphic_container_1.style.height = graphic_dom_overlay_container_1.style.height = h*sRatio+'px';
graphic_stage_1.scaleX = pRatio*sRatio;
graphic_stage_1.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
graphic_stage_1.tickOnUpdate = false;
graphic_stage_1.update();
graphic_stage_1.tickOnUpdate = true;
}
}
graphic_makeResponsive_1(false,'both',false,1);
AdobeAn.compositionLoaded(lib.properties.id);
graphic_fnStartAnimation_1();
}
My javascript code:
(function($){
$('.custom-graphic-slider .slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
fade: true,
});
$('.custom-graphic-slider .slider').on('afterChange', function(event, slick, currentSlide){
graphic_init_1();
});
})(jQuery);
I hope everything makes sense
I have a problem because I can not add php session to post in javascript, or do not know how to do it, here is my code which is a problem.
if (!this.movesAvailable()) {
var xmlhttp = null;
this.over = true; // Game over!
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://obiektywnywaper.pl/2048/post.php?user=&wynik="+self.score, true);
xmlhttp.send();
alert(self.score);
}
I tried something like this, but it does not work
if (!this.movesAvailable()) {
var xmlhttp = null;
var user=<?echo $_SESSION['user'];?>;
this.over = true; // Game over!
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://obiektywnywaper.pl/2048/post.php?user="+user+"&wynik="+self.score, true);
xmlhttp.send();
alert(self.score);
}
I add also the js file
function GameManager(size, InputManager, Actuator, ScoreManager) {
this.size = size; // Size of the grid
this.inputManager = new InputManager;
this.scoreManager = new ScoreManager;
this.actuator = new Actuator;
this.startTiles = 2;
this.inputManager.on("move", this.move.bind(this));
this.inputManager.on("restart", this.restart.bind(this));
this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
this.inputManager.on("showInfo", this.showInfo.bind(this));
this.inputManager.on("hideInfo", this.hideInfo.bind(this));
this.setup();
}
// Restart the game
GameManager.prototype.restart = function () {
this.actuator.continue();
this.setup();
};
// Keep playing after winning
GameManager.prototype.keepPlaying = function () {
this.keepPlaying = true;
this.actuator.continue();
};
GameManager.prototype.showInfo = function () {
this.actuator.showInfo();
};
GameManager.prototype.hideInfo = function () {
this.actuator.hideInfo();
};
GameManager.prototype.isGameTerminated = function () {
if (this.over || (this.won && !this.keepPlaying)) {
return true;
} else {
return false;
}
};
// Set up the game
GameManager.prototype.setup = function () {
this.grid = new Grid(this.size);
this.score = 0;
this.over = false;
this.won = false;
this.keepPlaying = false;
// Add the initial tiles
this.addStartTiles();
// Update the actuator
this.actuate();
};
// Set up the initial tiles to start the game with
GameManager.prototype.addStartTiles = function () {
for (var i = 0; i < this.startTiles; i++) {
this.addRandomTile();
}
};
// Adds a tile in a random position
GameManager.prototype.addRandomTile = function () {
if (this.grid.cellsAvailable()) {
var value = Math.random() < 0.9 ? 2 : 4;
var tile = new Tile(this.grid.randomAvailableCell(), value);
this.grid.insertTile(tile);
}
};
// Sends the updated grid to the actuator
GameManager.prototype.actuate = function () {
if (this.scoreManager.get() < this.score) {
this.scoreManager.set(this.score);
}
this.actuator.actuate(this.grid, {
score: this.score,
over: this.over,
won: this.won,
bestScore: this.scoreManager.get(),
terminated: this.isGameTerminated()
});
};
// Save all tile positions and remove merger info
GameManager.prototype.prepareTiles = function () {
this.grid.eachCell(function (x, y, tile) {
if (tile) {
tile.mergedFrom = null;
tile.savePosition();
}
});
};
// Move a tile and its representation
GameManager.prototype.moveTile = function (tile, cell) {
this.grid.cells[tile.x][tile.y] = null;
this.grid.cells[cell.x][cell.y] = tile;
tile.updatePosition(cell);
};
// Move tiles on the grid in the specified direction
GameManager.prototype.move = function (direction) {
// 0: up, 1: right, 2:down, 3: left
var self = this;
if (this.isGameTerminated()) return; // Don't do anything if the game's over
var cell, tile;
var vector = this.getVector(direction);
var traversals = this.buildTraversals(vector);
var moved = false;
// Save the current tile positions and remove merger information
this.prepareTiles();
// Traverse the grid in the right direction and move tiles
traversals.x.forEach(function (x) {
traversals.y.forEach(function (y) {
cell = { x: x, y: y };
tile = self.grid.cellContent(cell);
if (tile) {
var positions = self.findFarthestPosition(cell, vector);
var next = self.grid.cellContent(positions.next);
// Only one merger per row traversal?
if (next && next.value === tile.value && !next.mergedFrom) {
var merged = new Tile(positions.next, tile.value * 2);
merged.mergedFrom = [tile, next];
self.grid.insertTile(merged);
self.grid.removeTile(tile);
// Converge the two tiles' positions
tile.updatePosition(positions.next);
// Update the score
self.score += merged.value;
// The mighty 2048 tile
if (merged.value === 2048) self.won = true;
} else {
self.moveTile(tile, positions.farthest);
}
if (!self.positionsEqual(cell, tile)) {
moved = true; // The tile moved from its original cell!
}
}
});
});
if (moved) {
this.addRandomTile();
if (!this.movesAvailable()) {
var xmlhttp = null;
this.over = true; // Game over!
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://obiektywnywaper.pl/2048/post.php?user=&wynik="+self.score, true);
xmlhttp.send();
alert(self.score);
}
this.actuate();
}
};
// Get the vector representing the chosen direction
GameManager.prototype.getVector = function (direction) {
// Vectors representing tile movement
var map = {
0: { x: 0, y: -1 }, // up
1: { x: 1, y: 0 }, // right
2: { x: 0, y: 1 }, // down
3: { x: -1, y: 0 } // left
};
return map[direction];
};
// Build a list of positions to traverse in the right order
GameManager.prototype.buildTraversals = function (vector) {
var traversals = { x: [], y: [] };
for (var pos = 0; pos < this.size; pos++) {
traversals.x.push(pos);
traversals.y.push(pos);
}
// Always traverse from the farthest cell in the chosen direction
if (vector.x === 1) traversals.x = traversals.x.reverse();
if (vector.y === 1) traversals.y = traversals.y.reverse();
return traversals;
};
GameManager.prototype.findFarthestPosition = function (cell, vector) {
var previous;
// Progress towards the vector direction until an obstacle is found
do {
previous = cell;
cell = { x: previous.x + vector.x, y: previous.y + vector.y };
} while (this.grid.withinBounds(cell) &&
this.grid.cellAvailable(cell));
return {
farthest: previous,
next: cell // Used to check if a merge is required
};
};
GameManager.prototype.movesAvailable = function () {
return this.grid.cellsAvailable() || this.tileMatchesAvailable();
};
// Check for available matches between tiles (more expensive check)
GameManager.prototype.tileMatchesAvailable = function () {
var self = this;
var tile;
for (var x = 0; x < this.size; x++) {
for (var y = 0; y < this.size; y++) {
tile = this.grid.cellContent({ x: x, y: y });
if (tile) {
for (var direction = 0; direction < 4; direction++) {
var vector = self.getVector(direction);
var cell = { x: x + vector.x, y: y + vector.y };
var other = self.grid.cellContent(cell);
if (other && other.value === tile.value) {
return true; // These two tiles can be merged
}
}
}
}
}
return false;
};
GameManager.prototype.positionsEqual = function (first, second) {
return first.x === second.x && first.y === second.y;
};
I don't know php, but classic asp works in similar fashion as far as I know. If you set the variable outside the scope of the function, and also include apostrophes, it should work.
var user="<?php echo $_SESSION['user'];?>"; //possibly declared outside of scope
Edited as per #developerwjk's comment about the php-syntax
How can I use PIXI js to animate from spritesheets using TiledSprites? I need to animate a tiled sprite background from a sprite sheet.
Currently there is API calls to animate a tiled sprite in the PIXI.js API. I have created the following class to help me load and animate tiled backgrounds.
/////////////////////////////////////////////////////////////////////////////
/// Tiling Sprite Animation
/////////////////////////////////////////////////////////////////////////////
(function() {
PIXI.TilingSpriteAnimation = function(texture, frames, rows, frametime, loop) {
PIXI.TilingSprite.call(
this, texture,
VIEWPORTWIDTH,
this._texture.baseTexture.height);
this._stop = true;
this._texture = new PIXI.Texture(texture);
this.frameTime = frametime;
this.loop = loop || true;
this.curX = 0;
this.curY = 0;
this.fh = this._texture.height / rows;
this.fw = this._texture.width / frames;
this.ticks = 0;
this.maxFrames = frames;
this.maxRows = rows;
this.done = false;
this.calculateFrame();
};
PIXI.TilingSpriteAnimation.prototype = Object.create( PIXI.TilingSprite.prototype );
PIXI.TilingSpriteAnimation.prototype.constructor = PIXI.TilingSpriteAnimation;
Object.defineProperty(PIXI.TilingSpriteAnimation.prototype, 'texture', {
get: function() {
return this._texture;
}
});
PIXI.TilingSpriteAnimation.prototype.update = function() {
console.log(this.ticks);
if(!this._stop) {
this.ticks += 1;
}
if (this.done == false) {
if (this.ticks >= this.frameTime) {
this.curX++;
this.ticks = 0;
if (this.curX == this.maxFrames) {
this.curX = 0;
this.curY++;
if (this.curY == this.maxRows) {
this.curY = 0;
if (!this.loop)
this.done = true;
}
}
this.calculateFrame();
}
}
};
PIXI.TilingSpriteAnimation.prototype.goto = function(frame, row) {
this.curX = frame;
this.curY = row || 0;
};
PIXI.TilingSpriteAnimation.prototype.stop = function() {
this._stop = true;
};
PIXI.TilingSpriteAnimation.prototype.play = function() {
this._stop = false;
};
PIXI.TilingSpriteAnimation.prototype.calculateFrame = function() {
this.texture.frame.x = this.curX * this.fw;
this.texture.frame.y = this.curY * this.fh;
this.texture.frame.width = this.fw;
this.texture.frame.height = this.fh;
this.texture.setFrame(this.texture.frame);
this.generateTilingTexture(this.texture);
};
}).call(this);
This code is however highly inefficient because it calculates a new TiledTexture each time a new frame is entered. How can I optimize this?
I struggeled some time with this but came up with the following. I hope it helps
/////////////////////////////////////////////////////////////////////////////
/// Tiling Sprite Animation
/////////////////////////////////////////////////////////////////////////////
(function() {
PIXI.TilingSpriteAnimation = function(texture, frames, frametime, loop) {
PIXI.TilingSprite.call(
this, texture,
VIEWPORTWIDTH,
VIEWPORTHEIGHT);
this._stop = true;
this._texture = new PIXI.Texture(texture);
this.frameTime = frametime;
this.loop = loop || true;
this.curX = 0;
this.fh = this._texture.height;
this.fw = this._texture.width / frames;
this.ticks = 0;
this.maxFrames = frames;
for (var i=0;i<frames;i++){
this.preLoadFrame(i);
}
this.calculateFrame();
};
PIXI.TilingSpriteAnimation.prototype = Object.create( PIXI.TilingSprite.prototype );
PIXI.TilingSpriteAnimation.prototype.constructor = PIXI.TilingSpriteAnimation;
Object.defineProperty(PIXI.TilingSpriteAnimation.prototype, 'texture', {
get: function() {
return this._texture;
}
});
PIXI.TilingSpriteAnimation.prototype.update = function() {
if (this._stop == false) {
this.ticks += 1;
if (this.ticks >= this.frameTime) {
this.curX++;
this.ticks = 0;
if (this.curX == this.maxFrames) {
this.curX = 0;
if (!this.loop) {
this._stop = true;
}
}
this.calculateFrame();
}
}
};
PIXI.TilingSpriteAnimation.prototype.goto = function(frame) {
this.curX = frame;
};
PIXI.TilingSpriteAnimation.prototype.stop = function() {
this._stop = true;
};
PIXI.TilingSpriteAnimation.prototype.play = function() {
this._stop = false;
};
PIXI.TilingSpriteAnimation.prototype.calculateFrame = function() {
this.tilingTexture = PIXI.Texture.fromFrame("texture" + this.curX);
};
PIXI.TilingSpriteAnimation.prototype.preLoadFrame = function(frame) {
var text = new PIXI.TilingSprite(this.texture);
text.texture.frame.x = frame * this.fw;
text.texture.frame.y = 0;
text.texture.frame.width = this.fw;
text.texture.frame.height = this.fh;
text.texture.setFrame(text.texture.frame);
text.generateTilingTexture(text);
PIXI.Texture.addTextureToCache(text.tilingTexture, "texture" + frame)
};
}).call(this);
Here is the module i am working on:
var FeatureRotator = (function($,global) {
var self = {},
currentFeature = 0,
images = [],
imagePrefix = "/public/images/features/",
timer = null,
totalImages = 0,
initialFeature,
interval,
blendSpeed,
element = null,
img1 = null,
img2 = null;
function setVisibleImage(iid) {
$("#img1").attr('src',images[iid].src).css('opacity',1);
$("#img2").css('opacity',0);
$(".active").removeClass("active");
$("#f"+iid).addClass("active");
}
function setCurrentImage(id) {
currentFeature = id;
setVisibleImage(id);
}
function doHoverIn(position) {
if (currentFeature === position) {
self.pause();
} else {
setCurrentImage(global.parseInt(position, 10));
self.pause();
}
}
function doHoverOut(position) {
self.unpause();
}
self.init = function(options,callback) {
var i = 0,
tempImg = null;
interval = options.interval || 5000;
blendSpeed = options.blendSpeed || 500;
element = options.element;
initialFeature = options.initialFeature || 0;
img1 = $("<img/>").attr('id','img1');
img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height);
$(element).append(img1).append(img2);
totalImages = $(".feature").size();
for (i = 0;i < totalImages; i++) {
tempImg = new global.Image();
tempImg.src = imagePrefix +"feature_" + i + ".png";
images.push(tempImg);
$("#f"+i).css('background-image',
'url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")')
.hover(doHoverIn($(this).attr('position'))
, doHoverOut($(this).attr('position'))
).attr('position',i);
}
setVisibleImage(initialFeature);
if (options.autoStart) {
self.start();
}
if (callback !== null) {
callback();
}
};
function updateImage() {
var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2";
var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1);
if (active === "#img1") {
$("#img2").attr('src',images[nextFeature].src);
$("#img2").fadeTo(blendSpeed, 1);
$("#img1").fadeTo(blendSpeed, 0);
} else {
$("#img1").attr('src',images[nextFeature].src);
$("#img1").fadeTo(blendSpeed, 1);
$("#img2").fadeTo(blendSpeed, 0);
}
$("#f"+currentFeature).removeClass("active");
$("#f"+nextFeature).addClass("active");
currentFeature = nextFeature;
}
self.start = function() {
currentFeature = initialFeature;
setVisibleImage(currentFeature);
timer = global.setInterval(function(){
updateImage();
}, interval);
};
self.pause = function() {
global.clearTimeout(timer);
};
self.unpause = function() {
timer = global.setInterval(function(){
updateImage();
}, interval);
};
return self;
}(this.jQuery, this));
And here is how it is used on the page:
<script type="text/javascript">
// ...
$(function() {
FeatureRotator.init({
interval:5000,
element:'#intro',
autoStart:true,
height:177,
blendSpeed:1000,
initialFeature:0
});
});
</script>
The problem is, when setVisibleImage is called from the init method, the value of iid is NaN. I've stepped through the debugger and verified that 'initialFeature' is 0 when the setVisibleImage function is called, but alas, the value doesn't make it over there.
Can anyone help me determine what the problem is? I've run the code through JSLint, and it came back clean.
UPDATE
Ok here is my updated code, which works now except the fading doesnt work, the image just flips to the next one and doesn't fade smoothly anymore:
var FeatureRotator = (function($,global) {
var self = {},
currentFeature = 0,
images = [],
imagePrefix = "/public/images/features/",
timer = null,
totalImages = 0,
initialFeature = 0,
interval,
blendSpeed;
function setVisibleImage(iid) {
$("#img1").attr('src',images[iid].src).css('opacity',1);
$("#img2").css('opacity',0);
$(".active").removeClass("active");
$("#f"+iid).addClass("active");
}
function setCurrentImage(id) {
currentFeature = id;
setVisibleImage(id);
}
function doHoverIn(obj) {
var position = global.parseInt(obj.target.attributes["position"].value,10);
if (currentFeature === position) {
self.pause();
} else {
setCurrentImage(global.parseInt(position, 10));
self.pause();
}
}
function doHoverOut() {
self.unpause();
}
self.init = function(options,callback) {
var i = 0,
tempImg = null,
element = null,
img1 = null,
img2 = null;
interval = options.interval || 5000;
blendSpeed = options.blendSpeed || 500;
element = options.element;
initialFeature = options.initialFeature || 0;
img1 = $("<img/>").attr('id','img1');
img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height);
$(element).append(img1).append(img2);
totalImages = $(".feature").size();
for (i = 0;i < totalImages; i++) {
tempImg = new global.Image();
tempImg.src = imagePrefix +"feature_" + i + ".png";
images.push(tempImg);
$("#f"+i).css('background-image','url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")')
.hover(doHoverIn, doHoverOut)
.attr('position',i);
}
setVisibleImage(initialFeature);
if (options.autoStart) {
self.start();
}
if (typeof callback === "function") {
callback();
}
};
function updateImage() {
var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2";
var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1);
if (active === "#img1") {
$("#img2").attr('src',images[nextFeature].src);
$("#img2").fadeTo(blendSpeed, 1);
$("#img1").fadeTo(blendSpeed, 0);
} else {
$("#img1").attr('src',images[nextFeature].src);
$("#img1").fadeTo(blendSpeed, 1);
$("#img2").fadeTo(blendSpeed, 0);
}
$("#f"+currentFeature).removeClass("active");
$("#f"+nextFeature).addClass("active");
currentFeature = nextFeature;
}
self.start = function() {
currentFeature = initialFeature;
setVisibleImage(currentFeature);
timer = global.setInterval(function(){
updateImage();
}, interval);
};
self.stop = function() {
global.clearTimeout(timer);
};
self.pause = function() {
global.clearTimeout(timer);
};
self.unpause = function() {
timer = global.setInterval(function(){
updateImage();
}, interval);
};
return self;
}(this.jQuery, this));
Since you're getting NaN, I'm guessing it is actually taking place from this line:
.hover(doHoverIn($(this).attr('position'))
...which calls this:
setCurrentImage(global.parseInt(position, 10)); // note the parseInt()
...which calls this:
setVisibleImage(id);
So the position being passed to parseInt is coming from $(this).attr('position'), which is likely an value that can't be parsed into a Number, so you get NaN.
Check out the value of that attribute in first line of the block for the for statement.
for (i = 0;i < totalImages; i++) {
console.log( $(this).attr('position') ); // verify the value of position
// ...