I wonder if anyone has an idea how you have to transform an image such that it looks "inset" to the context?
I need the effect for an application I am writing, but I am not sure what the exact workflow is to achieve the effect mentioned above.
Best regards,
heinrich
Okay I've made it.
It is much playing around with paths and those stuff ...
Related
I have been looking at Epic Games' Fortnites Website and I am trying to figure out how they achieved the 3D effect on the page:
Epic Games' Fortnite website - scrolled down to 3rd slide
Does any one have any idea how to do it? I would really like something similar to a project I'm working on. I have found Three.js, but I am quite sure that is not the solution they went with.
For these types of questions, i can only recommend to install spector.js and have a look yourself. In short: everything you see is 100% faked.
I mean, that's always the case. In fact, if you want to build something like that, your first question should always be: how much of this can I fake and still get away with that?
In this example, it turns out: everything. Just open the devtools and click through all the assets in the network-tab. You will find these two textures:
looks familiar, right?
So what they appear to be doing is they are using three.js with some custom shaders to handle the translations, the flickering of the lights and the highlighting. These effects are computed using the normal-map and an additional mask-texture which I couldn't quite figure out what it does. But again, if you look at the scene in spector.js you can see the shaders used for every drawcall.
The only thing that is a bit more complex is the little robot-friend in the bottom left corner. But again, it's not 3d as in meshes and so on but rather a set of flat textured quads running a bones-animation thing.
I think that makes it a really great website after all.
Given that epic is building the unreal-engine I would suspect the original renders were done there. And I agree, the lighting looks really amazing :)
It is a simple parallax effect using animated sprite sheets.
Parallax effect is achieved by using several layers of images/video on top of one another in different Z-depth.
You can achieve the moving part by using the mousemove event to track the cursor.
I'm trying to create a interactive geographic map with Phaser framework that is similar to this http://preview.codecanyon.net/item/interactive-usa-map-html5/full_screen_preview/4527698 so what I was looking into is loading tile maps from JSON or CSV, but I'm not sure this is the right approach.
I know it's abstract question but I just wanted to be sure I'm moving into right direction and see if there are other ways to do this
I'm not sure a Tilemap is going to help you here. There's nothing 'tiled' or uniform about that map. While you could achieve it using Object placement in Tiled, I still think it's probably not the best route.
Personally I'd question the use of Phaser for something like this, and I wrote it! If I had to re-create the map you linked to, I would be looking at SVG and a library like paper.js instead, which just seems far more suited to this particular task.
I am trying to change the pitch of a buffer sample using a scriptprocessor, but what kind of formulas do I need to do this? I am not looking for the exact js code, but just for some general mathematical how to. I would love to have some code for this, as the first answer has a lot of formulas where I have no idea on how to implement that in JS.
I know that this is working with time, but according to this it can be done with the FFT, but I have no idea how one should do that.
For one method of doing time-pitch modification using an FFT, look up phase vocoder. Here's one explanation of how a phase vocoder works (but a search will turn up many others): http://www.guitarpitchshifter.com/algorithm.html
I believe https://github.com/mikolalysenko/pitch-shift would be appropriate (the quality is not on par with other code, but this library is rather easy to understand/use). You can hear a demo at http://mikolalysenko.github.io/pitch-shift/.
I was doing an app that reads qrcodes, and I was wondering how can I avoid that anyone with a qrcode generator could clone one of my qrcode.
I know I can't avoid the duplication (especially if you use a small number) but I was wondering if there is any approach I could use to reduce this or add an app validation to avoid this.
Thanks in advance
Either use a one-time-use id where the first person to access your URL wins, or just accept it as free advertising. If you really wanted to go to the trouble I guess you could probably print a watermark that obscures the code so it is unreadable, somewhat like the security features most checks have, but this really sounds like an XY problem.
Think about the problem you're really trying to solve and how so solve it. QR codes themselves are just as reproducible as emailing someone a link or giving someone a piece of paper with a word on it.
This is really unknown issue to many people. I would raise a question for it and make it easily accessible for other, and maybe someone of you know the solution for this problem.
All of us probably know that there is problem with alpha transparency in PNG24 in IE6 (still used by many people on web..). There are at least few known solutions how to solve that, but all of them got their problem that I would like to describe there:
1.Using progid:DXImageTransform.Microsoft.AlphaImageLoader:
This is most common trick to make images shown in IE6. Problem is that it uses DirectX to show it. So basically DX firstly need to download file from Net, then render it. This downloading block browser context for a while. But if you have alot of images - that means that you page can be freezed for even... few minutes (it happens to mine one project at least once).
http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html
http://www.stum.de/2008/12/01/do-not-use-alphaimageloader-to-fix-transparent-pngs-in-ie6/
2.Using VML.
You can also use this workaround. However this has a nasty effect of rendering gray box in background, then a proper image, also causing to download image files twice - this however might be because of bad implementation so need to be checked.
3.Using PNG8.
Just forget about solutions and try use PNG8, if prepared correctly can still be looking good.
If anyone knows any other solution please give answer here!
You should definitely have a look at http://www.dillerdesign.com/experiment/DD_belatedPNG/