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 768 x 1666
	//blur:10 + noise:5 + vintage:15
	function a() {
		var l = [
			[255, 155, 155, 0.10, 1, "pink"],
			[255, 135, 135, 1.75, 1, "rose"],
			[155,  15,  15, 0.55, 1, "red"],
			[255,  95,   5, 0.55, 1, "orange"],
			[255, 155,  35, 1.35, 1, "gold"],
			[255, 215, 135, 0.35, 3, "light"],
			[ 69, 169,  69, 0.50, 1, "green"],
			[ 35, 155, 235, 0.95, 3, "blue"],
			[  5,  95, 175, 0.75, 1, "dark"],
			[ 75,  35, 155, 0.55, 1, "deep"],
			[ 95,  55, 135, 0.95, 1, "purple"],
			[115,  95,  75, 0.10, 1, "brown"],
		];
		var o = [0.97, 0.93];
		var p = 750;
		var h = 15;
		var n = parseInt((((p/h)-1)/(l.length-1))-1);
		if (n < 1) { n = 1; }
		n = ((n + 3) + (n % 2));
		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 = l[i][4];
			var m = parseInt(n * r);
			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