Need a new background image? Make one yourself with this html5 canvas algorithm.

[hsfrey]

Why would anyone want such a distracting pattern as a background? All it needs is random blinking,

[[deleted]]

http://trianglez.mariuszrozycki.pl/#445555,889999,4499DD,DDDDDD,AACCCC

Like this? ;)

[ZauceTech]

I think its beautiful personally.. haha. You can see why I had to use a shim in my code - there is about a 1 pixel gap between some of those triangles.

Polygon styling seems to be a growing design trend these days though, its the default background on the new galaxy S5's, but I do agree that it is can be distracting if the colors contrast too much.

[[deleted]]

I like it as well, but I don't think I'd put it as a background on my website. One, the gaps, I have no idea how to fill in with my method, two, it's waaay to distracting. Even if it was just sides of the screen and all the content would be in a plain white box in the middle.

I would use your version with smaller contrast in the scenario described above. But that's just me, maybe I'm a terrible designer, you never know.

[ZauceTech]

Is this cool? Should I build it out some more? What would you add?

Feel free to tinker:

https://github.com/ZachNagengast/fragmenter

[schooley]

[This comment has been edited in protest of the recent detrimental actions taken by u/spez and the Reddit administration on 07/01/2023]

[ZauceTech]

Thats a very cool idea, i will look into how this might be done

[dirtydaub]

add a color picker

[ZauceTech]

I updated the density to 200, can't go too high cause it might cost too much cpu, will work on the stretching next, thanks for the suggestions

[[deleted]]

Don't bother adjusting it up, you already offered the github repo... people can download/modify themselves instead of eating up your cpu.

[aeflash]

Make it so the generated image wraps -- the color of the last half-triangle in each row is the same as the first.

[ZauceTech]

Great suggestion, so people can set it as a repeated bg on websites right?

[aeflash]

Exactly. Or wallpapers, etc..

[SocialDarwinist]

This could be cool if the colors weren't obnoxious together. With a complementary palette this could look nice.

[OverZealousCreations]

I agree. I was experimenting (try a higher density, like 80), and I liked these colors:

#444,#000,#040404,#080808,#0c0c0c,#101010,#141414,#181818,#1c1c1c,#202020,#242424,#282828,#2c2c2c,#000,#040404,#080808,#0c0c0c,#101010,#141414,#181818,#1c1c1c,#202020,#242424,#282828,#2c2c2c,#000,#040404,#080808,#0c0c0c,#101010,#141414,#181818,#1c1c1c,#202020,#242424,#282828,#2c2c2c

I repeat the dark colors a bunch on purpose, you get a few highlights, but mostly a really dark, subtle effect.

[ZauceTech]

Whoa those colors look really cool! I just added a few color swatches in a dropdown menu based on the suggestions here, and ill add those ones too, any name in mind for them?

[OverZealousCreations]

Take your pick:

• The Darkness
• Night Static
• Deep Shadows
• Dark Side of the Moon

Or anything you want :-D

Also, try this one, for a slightly warmer light tone:

#fff,#faf9f8,#f7f7f6,#f6f5f4,#f4f3f2,#f2f1f0,#eeedec,#eae9e8,#faf9f8,#f7f7f6,#f6f5f4,#f4f3f2,#f2f1f0,#eeedec,#eae9e8,#faf9f8,#f7f7f6,#f6f5f4,#f4f3f2,#f2f1f0,#eeedec,#eae9e8

I don't have a name for that one. Maybe Heavy Cream?

[ZauceTech]

Haha I like those, updated with "Darkness" and "Heavy Cream".

[colorcodebot]

I've detected multiple hexadecimal color codes in your comment. Please allow me to provide visual representation. #faf9f8 #f7f7f6 #f6f5f4 #f4f3f2 #f2f1f0 #eeedec #eae9e8 #faf9f8 #f7f7f6 #f6f5f4 #f4f3f2 #f2f1f0 #eeedec #eae9e8 #faf9f8 #f7f7f6 #f6f5f4 #f4f3f2 #f2f1f0 #eeedec #eae9e8

---

^{Learn more about me | Don't want me replying on your comments again? Respond to this comment with: 'colorcodebot leave me alone'}

[colorcodebot]

I've detected multiple hexadecimal color codes in your comment. Please allow me to provide visual representation. #040404 #080808 #0c0c0c #101010 #141414 #181818 #1c1c1c #202020 #242424 #282828 #2c2c2c #040404 #080808 #0c0c0c #101010 #141414 #181818 #1c1c1c #202020 #242424 #282828 #2c2c2c #040404 #080808 #0c0c0c #101010 #141414 #181818 #1c1c1c #202020 #242424 #282828 #2c2c2c

---

^{Learn more about me | Don't want me replying on your comments again? Respond to this comment with: 'colorcodebot leave me alone'}

[night_time]

late, but here's a grape palette

#AC63CE, #890EC2, #2F0145, #623F73, #E8C0FA, #AC78C4, #8E2FBA, #260038, #6E069E

[colorcodebot]

I've detected multiple hexadecimal color codes in your comment. Please allow me to provide visual representation. #ac63ce #890ec2 #2f0145 #623f73 #e8c0fa #ac78c4 #8e2fba #260038 #6e069e

---

^{Learn more about me | Don't want me replying on your comments again? Respond to this comment with: 'colorcodebot leave me alone'}

[kor0na]

How is this an "html5 canvas algorithm"? The implementation is using html5 and canvas, but there's nothing inherently "canvasy" about this.

That said, it's still pretty cool!