Show HN: Kubist, a little web app to make cubism-like images | Hacker News Reader

Show HN: Kubist, a little web app to make cubism-like images

williamngan.github.io

231 pointsmetaphorical48 comments

It's really cool that Poisson disc sampling is used to generate the points. Here, best-candidate sampling is used, based on [1]. But have you considered using the possibly faster Bridson's algorithm [2]?

Using Harris corners to analyze the picture is a cool idea too. Good job!

[1] http://bl.ocks.org/mbostock/b17e0b2aa8b2d50de465 [2] https://www.jasondavies.com/poisson-disc/

Cool, I didn't know about Bridson's algorithm. Thanks for the pointers!

Yes! I remember seeing this random sampling method about a year ago and completely forgot what it's called! Here's the webpage I saw it on, complete with explanation and step-by-step animations: http://bost.ocks.org/mike/algorithms/

I've made an app for the similar art style: http://polygenapp.com , it has been discussed on HN not long ago: https://news.ycombinator.com/item?id=8966928 . Here's a complete list of tools that I'm using, if anyone's interested: https://medium.com/@polygenapp/frameworks-libraries-and-othe... .

This is very neat. And on iOS I could see this great to make your lock screen funky, but still personalized.

Would love a desktop version of this, to be able to edit bigger pictures. Currently, generating laptop desktop backgrounds is very slow on mobile devices. It's also hard to position the points exactly, and the result cannot be zoomed. It's fine for mobile sizes, but a desktop app would make it much more pleasant.

That's... not cubism.

I agree it's not cubism. Well. Kind of. Calling it Kubism is ok though.

And besides, when art takes itself too seriously, with strict descriptions, it limits itself. I think Braque and Picasso would think that this is neat. So this is great.

No, not at all. It's nice, but not cubism. Cubism can, for example, look like this:

https://en.wikipedia.org/wiki/File:Juan_Gris_-_Portrait_of_P...

A cubism app could 1) detect edges 2) distort the image in a way that these edges follow splines 3) place things enclosed in edges at a random offset 4) amplify edges.

Another great example of a cubism artist is anatole krasnyanksy

https://www.google.com.au/search?q=anatole+krasnyansky&espv=...

Wouldn't a cubist app require a 3D model of the subject, or at least photos taken at multiple angles?

Yup. I don't see any cubes. It must be trianglism then.

SVGism.

No, it's kubism.

Quite.

The parent has a good point though, this looks nice and is interesting but wouldn't it misses the main tenet of cubism, which was to show multiple facets of objects simultaneously, so taking a face, you might see an eye and nose in profile, and also an eye from the front - it is like a simultaneous view of all sides of an object, not a distorted view of one side.

Looks quite similar to http://close-pixelate.desandro.com/ -- good job!

Insta-Chuck Close versus insta-Picasso.

Btw, this is the original "Kubist" I made with Processing a couple years ago. It uses opencv instead of JSFeat for feature point detection, and Mesh library instead of d3.

http://www.metaphorical.net/note/on/kubist (really old website, sorry it's kind of unusable :P)

Btw2: there's a "Download SVG" link on lower right. The SVG file can be imported to Adobe Illustrator, Inkscape, etc.

"The guy" being Mao Zedong is a nice touch, I'll grant that.

Very cool!

I love that you can generate these patterns from images, the gradients are a killer feature!

I've made a tool that also generates Delaunay Triangulation patterns but lacks importing of an image. Check it out as well: http://msurguy.github.io/triangles/

I've used this recently! I also attempted to make a Japanese-language triangulation tool a bit more user friendly, but there are still significant bugs: http://internets.computer/delaunay/

Love the lighting effects!

Photos look somewhat more modern after that. It's exactly what I needed. Simple, does one thing right :)

I failed in doing something very similar. Could you explain how you split the image up into triangles?

There is a link at the bottom of the page that links to https://medium.com/@williamngan/kubist-6ed1d8025806 which appears to be an explanation on how it works.

In the demo there's also a second mode called "Cell" that seems reminiscent of sampling via Poisson Disc, which you can read more about in Mike Bostock's excellent "Visualizing Algorithms" post.[0]

[0] - http://bost.ocks.org/mike/algorithms/

Yep, both delaunay ("Triangle") and voronoi ("Cell") uses "best candidate algorithm" to distribute the points by default. It's similiar to poisson disc.

The "Analyze image" uses JSFeat to apply a computer vision algorithm (feature point detection) to add some "interesting" points based on the image.

Yes. I use d3.geom.delaunay or d3.geom.voronoi to create the delaunay or voronoi tessellation.

http://bl.ocks.org/mbostock/4341156

Then for each polygon, I take its points (center point or vertices or an arbitrary point) and find the corresponding pixel on the image. Then I extract the rgb color, and use that to fill the polygon (as solid color or gradient).

Really really nice. Enjoyed playing around with it. The resulting images are very appealing to me.

I agree, the resulting images are beautiful. For some reason, it's surprisingly mesmerizing to drag the points around and see the colors change.

I searched for a long time to find a online triangulation app but couldn't find. I end up with using a mac app, mesh[1] Thanks

[1] http://dmesh.thedofl.com/

My little Kubes:

http://i.imgur.com/upxc3A3.png

http://i.imgur.com/1iLB1WI.png

The second one looks almost like the interior of a geode, like a 3D crystal or something similar, cool :)

Nice work! A small suggestion: live update the image when I drag a point around. It's annoying to have to click, drag, release, click, drag, release when making small adjustments.

Good point. I want to do this as well, but the performance is not good enough yet. To be improved!

If you add a throttle it might be ok even if there's a delay between the move and the re-render.

You shoud set min attribute for border input element to 0 so it cannot go to negative numbers, like this: <input type="number" min="0" ...

Nifty. Kinda reminds me of the Waterlogue[1] app.

[1] http://www.waterlogueapp.com/

Here's a similar thing I made that just generates these sorts of triangles with some diffuse lighting: http://christopherhesse.github.io/delaunay-experiment/

Thank you for not registering a stand-alone domain to host this.

Why? (genuine question)

Because we don't need yet another domain to host a .js file or a nifty way of displaying something. HN is polluted with "Look guys, I made a jQuery plugin over the weekend, so instead of linking my Github you can check it here yetanotheruselessdomain.io". I might be bitter though, since whenever I want to register a domain for a genuine product/service it is usually taken with a "Buy this domain" link on it and nothing else. Too many domains are being used for silly purposes while taking them off the market from those that could give them much bigger potential.

Cool. Very helpful to create color palettes from a picture.

Cute. I take it that the "cell" version is a Voronoi diagram, and the "triangle" version is its dual?

Yep! I didn't use the technical names because it sounds technical ;-)

Heh, cute. BTW the source code link is at the bottom left.

nice...

love code art. jenn schiffer has some nice stuff @ http://vart.institute/

Reply on news.ycombinator.com