7 ms·
Show HN: Kubist, a little web app to make cubism-like images
- vezzy-fnord 11y ago"The guy" being Mao Zedong is a nice touch, I'll grant that.
- mihau 11y agoPhotos look somewhat more modern after that. It's exactly what I needed. Simple, does one thing right :)
- d55 11y agoI failed in doing something very similar. Could you explain how you split the image up into triangles?
- dsp1234 11y agoThere is a link at the bottom of the page that links to https://medium.com/@williamngan/kubist-6ed1d8025806 https://medium.com/@williamngan/kubist-6ed1d8025806 which appears to be an explanation on how it works.
- lelandbatey 11y agoIn 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/ http://bost.ocks.org/mike/algorithms/
- metaphorical 11y agoYep, 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.
- metaphorical 11y agoYes. I use d3.geom.delaunay or d3.geom.voronoi to create the delaunay or voronoi tessellation. http://bl.ocks.org/mbostock/4341156 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).
- CleanCoder 11y agoThank you for not registering a stand-alone domain to host this.
- Ecco 11y agoWhy? (genuine question)
- CleanCoder 11y agoBecause 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.
- hiphopyo 11y agoLooks quite similar to http://close-pixelate.desandro.com/ http://close-pixelate.desandro.com/ -- good job!
- mortenjorck 11y agoInsta-Chuck Close versus insta-Picasso.
- akilism 11y agonice... love code art. jenn schiffer has some nice stuff @ http://vart.institute/ http://vart.institute/
- camillomiller 11y agoCool. Very helpful to create color palettes from a picture.
- dllu 11y agoIt'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 http://bl.ocks.org/mbostock/b17e0b2aa8b2d50de465 [2] https://www.jasondavies.com/poisson-disc/ https://www.jasondavies.com/poisson-disc/
- metaphorical 11y agoCool, I didn't know about Bridson's algorithm. Thanks for the pointers!
- doomrobo 11y agoYes! 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/ http://bost.ocks.org/mike/algorithms/
- ComNik 11y agoReally really nice. Enjoyed playing around with it. The resulting images are very appealing to me.
- explosion 11y agoI agree, the resulting images are beautiful. For some reason, it's surprisingly mesmerizing to drag the points around and see the colors change.
- nulltype 11y agoHere's a similar thing I made that just generates these sorts of triangles with some diffuse lighting: http://christopherhesse.github.io/delaunay-experiment/ http://christopherhesse.github.io/delaunay-experiment/
- ris 11y agoThat's... not cubism.
- keyle 11y agoI 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.
- 1ris 11y agoNo, 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_Pablo_Picasso_-_Google_Art_Project.jpg 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.
- bobbles 11y agoAnother great example of a cubism artist is anatole krasnyanksy https://www.google.com.au/search?q=anatole+krasnyansky&espv=2&biw=1366&bih=683&source=lnms&tbm=isch https://www.google.com.au/search?q=anatole+krasnyansky&espv=...
- randomsearch 11y agoWouldn't a cubist app require a 3D model of the subject, or at least photos taken at multiple angles?
- malkia 11y agoYup. I don't see any cubes. It must be trianglism then.
- imaginenore 11y agoSVGism.
- 11y ago
- nbartlomiej 11y agoI've made an app for the similar art style: http://polygenapp.com http://polygenapp.com , it has been discussed on HN not long ago: https://news.ycombinator.com/item?id=8966928 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-other-tools-used-in-the-making-of-polygen-app-a79694fe87f https://medium.com/@polygenapp/frameworks-libraries-and-othe... .
- keyle 11y agoThis is very neat. And on iOS I could see this great to make your lock screen funky, but still personalized.
- e_proxus 11y agoWould 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.
- deleted 11y ago[deleted]
- metaphorical 11y agoBtw, 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 http://www.metaphorical.net/note/on/kubist (really old website, sorry it's kind of unusable :P)
- metaphorical 11y agoBtw2: there's a "Download SVG" link on lower right. The SVG file can be imported to Adobe Illustrator, Inkscape, etc.
- DannoHung 11y agoNifty. Kinda reminds me of the Waterlogue[1] app. [1] http://www.waterlogueapp.com/ http://www.waterlogueapp.com/
- ggchappell 11y agoCute. I take it that the "cell" version is a Voronoi diagram, and the "triangle" version is its dual?
- metaphorical 11y agoYep! I didn't use the technical names because it sounds technical ;-)
- dmnd 11y agoNice 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.
- metaphorical 11y agoGood point. I want to do this as well, but the performance is not good enough yet. To be improved!
- dmnd 11y agoIf you add a throttle it might be ok even if there's a delay between the move and the re-render.
- carterehsmith 11y agoHeh, cute. BTW the source code link is at the bottom left.
- msurguy 11y agoVery 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/ http://msurguy.github.io/triangles/
- flashman 11y agoI'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/ http://internets.computer/delaunay/
- metaphorical 11y agoLove the lighting effects!
- RevRal 11y agoMy little Kubes: http://i.imgur.com/upxc3A3.png http://i.imgur.com/upxc3A3.png http://i.imgur.com/1iLB1WI.png http://i.imgur.com/1iLB1WI.png
- PebblesHD 11y agoThe second one looks almost like the interior of a geode, like a 3D crystal or something similar, cool :)
- dvh 11y agoYou shoud set min attribute for border input element to 0 so it cannot go to negative numbers, like this: <input type="number" min="0" ...
- cturhan 11y agoI 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/ http://dmesh.thedofl.com/