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:30 + noise:5 + vintage:15
	//cp -fv d.png e.png ; sips -z 2868 1320 e.png
	function a() {
		var l = [
			[ 75,  55,  35, 0.15, 1.0, "brown"],
			[ 75,  55,  35, 0.75, 1.0, "brown"],
			[175,  55,  55, 0.75, 1.0, "rose"],
			[115,   5,   5, 0.55, 1.1, "red"],
			[215,  95,  15, 0.95, 1.0, "peach"],
			[235, 155,  55, 0.55, 1.1, "gold"],
			[255, 205, 135, 0.95, 1.1, "light"],
			[ 15, 175, 195, 0.55, 1.0, "mint"],
			[ 15, 155, 215, 0.75, 2.0, "blue"],
			[ 15,  75, 135, 0.75, 1.0, "dark"],
			[ 55,  35, 115, 0.55, 1.0, "deep"],
			[ 95,  35, 115, 0.95, 1.0, "purple"],
			[ 75,  55,  35, 0.05, 1.0, "brown"],
		];
		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 m = (parseInt(n * r) + x);
			u += (l[i][5]+" "+i+" "+n+" "+r+" "+s+" "+m+"\n");
			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("+d+", "+e+", "+f+", "+g+");'></div>");
			}
			for (var j = 0; (j < m) && (k < l.length); ++j) {
				var a = ((((l[k][0] - l[i][0]) - 1) / (m + 1)) * (j + 1));
				var b = ((((l[k][1] - l[i][1]) - 1) / (m + 1)) * (j + 1));
				var c = ((((l[k][2] - l[i][2]) - 1) / (m + 1)) * (j + 1));
				var d = (l[i][0] + a);
				var e = (l[i][1] + b);
				var f = (l[i][2] + c);
				var g = o[1];
				z.innerHTML += ("<div style='height:"+h+"px; background:rgba("+d+", "+e+", "+f+", "+g+");'></div>");
			}
			if (i < (l.length - 1)) { t += ((m * h) + (h * s)); }
		}
		alert(n+"\n"+t+"\n"+u);
	}
</script>
<body onload="a();">
	<div id="a"></div>
</body>

~

~

~

Leave a comment