How to code a Delaunay Triangle pattern using canvas? - javascript

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

Related

How to generate polygon dimensions with the least effort?

I found this page https://www.bridgersteel.com/metal-colors/roof-visualizer where there is an interactive way to change the color of a demo house and see how it looks like.
As far as I know, they used a pretty straightforward and simple way of doing this.
However, what I don't understand is how did they produced the exact super-precise polygon points. Is there a non-manual way of doing this?
Otherwise, even basic, this job requires ton of days to be made...
Do you have any hints?
I'm going to guess they used vector graphics software, like Adobe Illustrator, to create the svg. Depending on the software, you can even see the code it generates. You can also convert an svg image to code using javascript on the website itself.
I visited the page and came up with the following in the link below.
https://drive.google.com/open?id=1PQimeXKGyCJd1lNZHHHuOkOhLc3oq97v

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/

How to make 3D animation with Canvas

I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.

Irregular image drag & drop using HTML5 canvas

I'd like to be able to write an application in HTML5 that is similar to the following.
HTML5 Canvas Animals on the Beach Game with KineticJS
The problem with that demo though is the mouse over event is only accurate to the rectangle surrounding the animal. Is there any way to do this with more accuracy, be it in KinectJS or otherwise?
There are generally two ways:
Using custom paths with each image as hitboxes (that you manually define) then using an is-point-in-path algorithm
Using a ghost-canvas (or whatever you like to call it) as I detailed in this old tutorial. Ignore the link to the new tutorial, the old one uses what you'd want.
The first method here is much faster but requires a lot more code and manual work. The second method is pixel-perfect but much slower. Still, if you don't have an enormous amount of objects it may suit your needs.

Drawing/manipulate a quadrilateral vector on an image using 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.

Categories