Search the Community

Hi, I have a 200 * 200 painting. I want to enlarge this picture (eg 1200 * 700). of course by preserving the image quality. I learned that the way to do this is interpolation. I use the OpenCV.js library to interpolate. However, both my mathematical operations and openCV processes take a long time. Average 70 ms. I have to reduce this to 30-40 ms. I will try to do my mathematical operations on the GPU using GPU.js. But I don't have much experience dealing with pictures. Does anyone have any idea how to speed up interpolation for this, of course, how to get a better view? PS: I don't mean give me the code. I'm looking for a library or a sample project that can be used for these tasks, or a hint to guide. I had asked a similar question before, but now my program has changed and I want to ask again because I have different problems.

Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?

Hi everyone, I have a picture that I draw pixel by pixel on the canvas. Size of the image: 512 * 256. When I make this picture 1536 * 768, the image looks very bad. I think I can use interpolation to fix this. But I couldn't find a good javascript library. It didn't work in the libraries I found. Is there anyone who can help me with this?

Im trying to make a lerp function on an online game. Im doing this by having a buffer list, I append each server update to a list, and lerp over the contents, here is an example: movementBuffer.unshift(gameUpdate); //when a new update is received //in the main loop timeElapsed += delta; lerpPerc = timeElapsed / updateRate; //percent which is lerped to if(lerpPerc > 1){ //when the lerp is finished, the states that were just lerped are removed from the buffer movementBuffer.splice(prevData.length - 2, 2); //remove the previous states from the buffer state1 = prevData[prevData.length - 1]; state2 = prevData[prevData.length - 2]; timeElapsed = 0; lerpPerc = 0; } for (i = 0; i < state2["players"].length; i++) { // update the players prevY = state1["playery" + state["players"][i]]; prevX = state1["playerx" + state["players"][i]]; x = state2["playerx" + state["players"][i]]; y = state2["playery" + state["players"][i]]; //lerp to the new x and y playerCoords[recivedData["players"][i]][0] = lerpF(prevX, x, lerpPerc); playerCoords[recivedData["players"][i]][1] = lerpF(prevY, y, lerpPerc); } The problem here is the `lerpPerc` goes by too quickly, so it basically deletes all items in the buffer, leaving nothing to be lerped to. What am I doing wrong here?

Hey everyone! Just joined this forum hoping someone could help me out here... I'm working on a test project to try out some of these concepts. I'm currently working on entity interpolation and I think I'm pretty close to it working, but the moving objects still seem jittery. On the back end I'm sending snapshots of player positions every 50ms... // send snapshots setInterval(() => { const snapshot = { timestamp: Date.now(), players }; ws.clients.forEach(client => { client.send(pack('snapshot', snapshot)); }); }, 50); These snapshots are being received on the client like so... const sync = snapshot => { // keep the last 2 snapshots if (snapshots.length === 2) snapshots.shift(); snapshots.push(snapshot); snapshot.players.forEach(player => { let manager = playerManagers.find(mngr => mngr.id === player.id); ... manager.updateRemote(player); }); t = 0; }; The manager here is a class instance associated with each player that controls the sprite's position, rotation, etc. Here is that updateRemote method... updateRemote = player => { this.local = this.remote ? this.remote : player; this.remote = player; } What this does is set the manager's local and remote properties. These are the states that the sprite should interpolate between. Then here is the Pixi.js ticker... let t = 0; ticker.add(() => { t += ticker.deltaTime; let lag = 50; if (snapshots.length >= 2) lag = snapshots[1].timestamp - snapshots[0].timestamp; playerManagers.forEach(manager => manager.interpolate(t / lag)); }); Here I am increasing t by the ticker's deltaTime and dividing that by the time between the two snapshots (or the intended time if there aren't two snapshots available). Remember above that t is reset each time a snapshot is received. This means when a snapshot was just received, t will be 0 and start counting up. When another snapshot is received, t will be at 50 (or whatever the real lag is) then be set back to 0 and repeat. In other words, t / lag will be between 0 and 1 for the lerp function... Here is that interpolate method... interpolate = delta => { this.sprite.position.set( lerp(this.local.pos.x, this.remote.pos.x, delta), lerp(this.local.pos.y, this.remote.pos.y, delta), ); this.sprite.rotation = lerp(this.local.direction, this.remote.direction, delta); } And the lerp function is the second formula here. AFAIK this should give me smooth movement between the past snapshot (local) and the new one (remote), but movement still seems choppy and jittery. I'm fairly new to interpolation, prediction, and other game networking concepts so hopefully someone can help me out here. Please let me know if any more information is needed.

Hello! I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing: stage.scale.x = stage.scale.y = 0.2; https://jsfiddle.net/n67xwb5w/ As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi http://jsfiddle.net/qwDDP/ from here http://stackoverflow.com/questions/18761404/how-to-scale-images-on-a-html5-canvas-with-better-interpolation Can I achive the same smooth effect after rescaling in PIXI?

Hello, I am applying texture using my own uv2. This is the texture applied on a sphere (normal map): And this is the texture: So my problem is that on border of each parts there are seams due to the interpolation between one texel colored and another one at Color4(0,0,0,0). This is causing void then black till the right one value. I could expand the border of one texel (dilatation) to fix that but this is increasing padding in my texture... So first I would like to know if there is another way to cancel this interpolation. Thanks !

Wondering how to get my networked sprites to "smoothly" move when their position is updated from the server. This function is called up to 10 times per second and provides the updated position of the remote player. Right now they kind of "jump" from position to position and I'd like to have a tween going to smooth it out. here's what it looks like: public Update(name: string, x: number, y: number) { var remotePlayer = this.remotePlayers[name]; var tween = this._game.add.tween(remotePlayer).to({ x: x, y: y }, 1000, Phaser.Easing.Linear, false); tween.interpolation(Phaser.Math.catmullRomInterpolation); tween.start(); //this.remotePlayers[name].position.x = x; //this.remotePlayers[name].position.y = y; } You can see in the commented code where I previously just set the remote players position directly. P.S. I'm only doing the catmullRomInterpolation based on what I saw in the phaser examples for tweens. thought it looked cool, but not sure if I am doing it right.

I do not see where AnimationRanges can be placed in a .babylon file. Just thinking out loud, but this might a method of implementing the export of Actions in Blender, which are also named. I got 90% down the Mocap path using a .bvh, and am just making sure I am really going the right way. (Questioning myself usually happens when I stopping on something for a while, holidays) The really big reason I went the mocap route is to try to reduce say a 2 second walk @ 120 fps to maybe 5 poses, where the frame number indicates the relative amount of time to interpolate to each pose. I have code which is starting to do that analysis. Frame based animation is not scalable, because it "performs" the animation externally (pose>>Animation>>Bake Action) & the file size just explodes. I have no intention of using it. I know Blender had a way of actually posing skeletons on just the key frames, but until I actually started playing with inverse kinematics, posing was impossible. I have performed tests in python & can determine which frames the poses occur in an action. I think I can @ the skeleton level: iterate through the actionsget the key frames of an actioniterate through those framesget the bone matrix of each boneIf going to a .babylon / BJS, just make sure every action was baked. If going to .js / QueuedInterpolation, skip the bake. Either way, both should able to get multiple animations via AnimationRanges if they can be put in a .babylon. Also, right now the animation is captured by iterating through every frame in the scene for EVERY bone. Blends with skeletal animation export very slowing. One with a 32 bone skeleton should get a 32x speed up when exporting If you have a skeleton you are going to use in a .blend all by itself, then you could add your actions to it. You can then add those actions to any other .blend using File>>append. This separates the animation from the character. What am I thinking that is wrong?

Hi! I m working on a phaser project. I am not able to find a particular thing I m looking for. I m using tileScript to load a bg image repeatedly and autoscrolling. The game is endless runner I want the image to form the trail as per sine wave or random curves - up and down. So i might hav to use random Interpolations (beizer and others) to generate random curves. Unable to find anything relevant regards to forming the Image with curves (displaying tileScript with curves). i have looked at the sine wave filter. not getting the right output..output has to be like this - https://developer.cdn.mozilla.net/.../runfield.../index.html Any suggestions ?

(This following might be more or less a colleage of related, yet independent thoughts) I suppose I just want smoother transitions in my sprite movement. I'm trying to address the issue with my sprite.position changes.. which are currently just incremental. http://www.iakarra.net/demo/polymer/WiAClient/index.html where as, http://www.iakarra.net/demo/polymer/WiAClient/wiia.account.js actually contains the update function/method (and in turn calls on the 'character.step' function) that is executing on every animate call/tick on the main page. So this is really the scope I'm concentrating on. Alright, so I'm familiar with the concept of css transitions being smoother than javascript animations because they are 'hardware accelerated'. but from this article: http://css-tricks.com/myth-busting-css-animations-vs-javascript/ it becomes apparent that javascript can be hardware accelerated as well. And the speed/execution myth was really invalid and perpetuated because people were basing their comparison on jquery animations. Referencing the following: http://chimera.labs.oreilly.com/books/1234000000802/ch05.html#animating_by_programmatically_updating_p as well as the following sections in/to that reference 'tweening' and 'interpolation' I hope to add a time-based animation (movement) using this javascript hardware accelerated concept.. Is there anything within the PIXI framework that I should account for when I do this? Or has someone implemented something similar to what I'm trying to accomplish? With my mild experience with the XNA framework, I noted that it passed around a gametime tick/timer.. In another post on here, I made reference to the requestAnimation method using the window.renderAnimationFrame .. based on date.now()... though that time did not seem to be global..

Hello everyone! I'm creating a Tetris style game where I want my blocks to fall at ~16 pixels every 10 frames. You can see something similar here: http://youtu.be/vBpdS5d1i1k?t=1m26s (gameplay video of Tetris) I was curious how I could emulate this within Phaser. I'm familiar with other game engines where there's a delta time variable (Cocos2D-iphone, Cocos2D-x) and the concept of removing that is completely new to me. Thank you for your time.