Generating colorful iOS backgrounds in less than 50 lines of JS and some basic photo editing skillz

<script>
	//scroll to bottom
	//shot 935 x 1475 (1870 x 2950)
	//sips --rotate -35 a.png --out b.png ; cp -fv b.png c.png
	//crop:768x1666 + blur:5 + noise:5 + vintage:5
	//cp -fv d.png e.png ; sips -z 2868 1320 e.png
	function zz(n) { return Math.min(Math.max(0, n), 255); }
	function aa() {
		var l = [
			[ 75,  55,  35, 0.15, 1.0, 0.0, "brown" ],
			[ 75,  55,  35, 0.75, 1.0, 0.0, "brown" ],
			[235, 115, 115, 0.55, 1.1, 0.0, "rose"  ],
			[195,  75,  75, 0.55, 1.0, 0.0, "berry" ],
			[215,  95,  15, 0.75, 1.0, 0.0, "peach" ],
			[235, 155,  55, 0.95, 1.1, 0.2, "gold"  ],
			[255, 195, 135, 0.95, 1.1, 0.0, "light" ],
			[ 15, 175, 195, 0.55, 1.0, 0.0, "mint"  ],
			[ 15, 155, 215, 0.75, 2.0, 0.0, "blue"  ],
			[ 15,  75, 135, 0.75, 1.0, 0.0, "dark"  ],
			[ 55,  35, 115, 0.55, 1.0, 0.0, "deep"  ],
			[ 95,  35, 115, 0.95, 1.0, 0.0, "purple"],
			[ 75,  55,  35, 0.05, 1.0, 0.0, "brown" ],
		];
		var p = [];
		var o = [0.97, 0.93];
		var h = 15;
		var n = 7;
		var t = 0;
		var u = "";
		var z = document.getElementById("a");
		for (var i = 0; i < l.length; ++i) {
			var k = (i + 1);
			var r = l[i][3];
			var s = parseInt(l[i][4]);
			var x = (((parseInt(l[i][4] * 10) % 10) + 1) - 1);
			var y = parseInt(l[i][5]);
			var w = (((parseInt(l[i][5] * 10) % 10) + 1) - 1);
			var m = (parseInt(n * r) + (x + y));
			u += (l[i][5]+" "+i+" "+n+" "+r+" "+s+" "+m+"\n");
			if (p.length > 0) {
				l[i][0] = p[0][0]; l[i][1] = p[0][1]; l[i][2] = p[0][2];
				p = [];
			}
			for (var j = 0; j < s; ++j) {
				var d = l[i][0], e = l[i][1], f = l[i][2], g = o[0];
				z.innerHTML += ("<div style='height:"+h+"px; background:rgba("+zz(d)+", "+zz(e)+", "+zz(f)+", "+g+");'></div>");
				if (i < (l.length - 1)) { t += h; }
			}
			for (var j = 0; (j < 3) && (k < l.length); ++j) {
				var d = (((l[k][j] - l[i][j]) - 1) / (m + 1));
				l[i][j] = (l[i][j] - (d * w));
			}
			for (var j = 0; (j < m) && (k < l.length); ++j) {
				var a = (((l[k][0] - l[i][0]) - 1) / (m + 1 + w));
				var b = (((l[k][1] - l[i][1]) - 1) / (m + 1 + w));
				var c = (((l[k][2] - l[i][2]) - 1) / (m + 1 + w));
				var d = (l[i][0] + (a * (j + 1))), e = (l[i][1] + (b * (j + 1))), f = (l[i][2] + (c * (j + 1))), g = o[1];
				if (j >= (m - y)) { p.push([d, e, f, g]); continue; }
				if (j >= (m - w)) { p.unshift([d + a, e + b, f + c, g]); }
				z.innerHTML += ("<div style='height:"+h+"px; background:rgba("+zz(d)+", "+zz(e)+", "+zz(f)+", "+g+");'></div>");
				if (i < (l.length - 1)) { t += h; }
			}
		}
		alert(n+"\n"+t+"\n"+u);
	}
</script>
<body onload="aa();">
	<div id="a"></div>
</body>

~

~

~

Leave a comment