Drawing/manipulate a quadrilateral vector on an image using JavaScript - javascript

I am trying to develop a system that will render a preview of a what a product might look like with embossing.
In order to do this, I am essentially going to composite two images together. In order to do this correctly, I am building a system using mainly JavaScript that allows a background image to be chosen. Someone will then draw a quadrilateral on this image that represents the correct proportions of the composite image.
This image, which is rectangular, will be distorted to match the four coordinates that comprise this quadrilateral using Imagick.
The piece I'm a little hazy on is the JavaScript. It doesn't need to support multiple browsers, Webkit or FF is fine.
At a minimum, it should put a rectangular shape comprised of four points. These points can then be manipulated at will and a line would be drawn between the points to help the user visualize the effect.
This is a crude description, but the best I have. In a perfect world, I'd love to do something similar to this , but with more flexibility. http://jqueryui.com/demos/resizable/#aspect-ratio is also a good example of something similar to what I'm envisioning, but with less constrained transformations.
I've investigated Raphael.js, which looks promising too but I'm weary of reinventing the wheel.
Any thoughts? Am I missing any obvious JavaScript libraries/implementations that might be useful here?
EDIT: I ended up using Flash and this AS3 class: http://www.rubenswieringa.com/blog/distortimage
It was a pain, but I got it working. I'm leaving this up in case someone wants to opine on a javascript technique.

Related

Hiding crucial data from an SVG

I have a SVG generated map for the game I am developing. I have no problems with the game being open-source and it uses open web technologies such as HTML and SVG. No problems there.
But at the same time I want the players not to be able to see or reverse engineer a map of the whole world (to retain true exploration). For now I generate map using a seed that is secret and not version controlled. So even though the algorithm is known curious players can use open-sourced code to generate "game-like worlds" but not that exact one. This solves the "global" problem.
But since SVG is rendered on a page as a single Voronoi diagram all the data (I don't mind the coordinates of points) would be extractable. Data like resources, land types, biomes, climate etc. could be fetched from SVG to gain an upper hand in finding good locations for settlements.
Any idea how to prevent that? Players have limited vision so I thought about either:
not rendering the whole Voronoi diagram at all (just the visible part), but that could be potentially tricky to do (maybe, haven't looked into it yet),
inserting the resource/land tile data into SVG graph only to visible locations
I can see the benefits of both approaches and if done correctly it could even boost the performance (not rendering the whole thing/rendering with less data) and lead to bigger worlds without impacting performance.
Any other ideas/programming/architectural approaches to help with the issue?
(I am using Vue.js, d3.js, svg-pan-zoom and Laravel backend just in case it helps.)
The ideas that you gave are perfect, but for implementing them, you need to make hard work, and spend much time.
I have a suggestion. Is will work for most of the users. Maybe some users will "hack" it. But I believe it will work for 95% of the times.
You can create a very big rectangle, from the top left point 0,0 until the right bottom point. The rectangle will be white, and it will be over all other shapes.
This way if someone will download the SVG, we will see nothing. Just a big white rectangle.
In you game HTML, you can add a CSS selector, to hide this rectangle.
If you following this method, most of the users (who don't have a photo editing software) will not be able to see the map.
Users who knows how to inspect elements in HTML may see the map. But I believe that most of them who will see a white box, will not believe that there is something behind.
I think that this is a simple temporary approach that you can do, before doing other more defensive ways.

How can I do complex animations within JavaScript?

so I'm wanting to have various sized triangle particles fly in from a random direction (all over the screen) and then assembles to spell the word "Zoid". I have been looking and three.js looks to be the API that I should use for this kinda stuff.
What three.js example should I be looking at?
I am not looking for someone to make this for me, I am only wanting the name of the technique/animation.
http://anime-js.com/ take a look at this seems like a pretty good framework for animated javascript

How to code a Delaunay Triangle pattern using canvas?

The site http://www.lahautesociete.com/ exhibits the use of a geometric background design whose vertices move in random directions.
I've inspected the DOM and they're making use of canvas to produce the pattern. I'd like to replicate this pattern, but the thing is, even though I have some decent canvas experience, I have no idea where to start on this one.
Is there some sort of mathematical formula that produces the triangular pattern? How would I select the individual vertices? If you can guide me in the right direction, please let me know, thanks!
This is pretty much the only code I could grab pertaining to the canvas design (unhelpful, I know):
<canvas width="1280" height="353" style="width: 1280px;height: 353px;"></canvas>
There's a minified JavaScript file that I unminified, but I've been unable to identify anything relating to canvas within it.
Update: Looks like the deminifier I used couldn't handle the gigantic JS file the site uses. On exploration, I discovered that the site makes use of Three.js
Update (Jan 21, 2016): After a lot of research, I've discovered that the name of the pattern I'm looking to code is called a Delhaunay Triangle. I've come across a few external resources that I look to examine and analyze:
http://christophermanning.org/projects/voronoi-diagram-with-force-directed-nodes-and-delaunay-links
http://codepen.io/blascone/pen/AoFCx
http://codepen.io/kenjiSpecial/pen/BGhrm

Geometric effect image manipulation

I'm trying to build a website allowing users to upload a photo of their face and then return a stylized output such as this example :
I'm not a graphics expert by any means so I'm not sure of the correct term to describe this image manipulation effect.
I have looked at a few JavaScript image libraries (Fabric, Pixastic) but they only seem to offer a fairly basic Pixelation effect which is not quite what I am looking for.
If anyone can point me in the right direction of a suitable JavaScript library I would be eternally grateful!
This would need to implement:
Delaunay triangulation
Voronoi diagram
These are relatively complex areas in the field of polygons and the combination (Voroni/Delaunay tesselation) represent a very specific usage (as the effect in the image). You can probably get away with just the triangulation though, but there are libraries out there that can help you with the basics and from there you may be able to apply it to images and the color values.
Here are a couple of projects to start you off:
https://github.com/ironwallaby/delaunay
https://code.google.com/p/javascript-voronoi/

Using JavaScript to model 3D polyhedra

Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.
I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?
Take a look at this library: SVG-VML-3D
It uses SVG and falls back to VML on MSIE.
They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.
Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.
There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.
Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.

Categories