First public commit.

f2d · Dec 11, 2018 · d7e5ecc · d7e5ecc
1 parent 5383585
commit d7e5ecc
Show file tree

Hide file tree

Showing 7 changed files with 826 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # random_ship_generator
 Show a lot of small random pictures to explore ideas.
+
+Sources:
+[EN](https://medium.freecodecamp.org/how-to-create-generative-art-in-less-than-100-lines-of-code-d37f379859f),
+[RU](https://habr.com/company/pixonic/blog/429078/).
diff --git a/demo.gif b/demo.gif
diff --git a/index.css b/index.css
@@ -0,0 +1,65 @@
+html, section, img {
+	background-color: rgba(0,0,0, 0.1);
+}
+body {
+	text-align: center;
+	margin: 0;
+	padding: 0;
+}
+section {
+	display: inline-block;
+	/* margin: 0 auto; */
+	margin: 1em;
+	padding: 1em;
+	text-align: left;
+	vertical-align: top;
+}
+section div + div {
+	margin-top: 1em;
+}
+a {
+	color: #888;
+}
+a:hover {
+	color: #000;
+}
+img {
+	/* background-color: #000; */
+}
+img,
+canvas {
+	border: 1px solid #ddd;
+	/* box-shadow: 3px 3px rgba(0,0,0, 0.1); */
+}
+canvas {
+	position: relative;
+}
+canvas:hover {
+	border-color: #aaa;
+}
+.toggle::after {
+	content: ".";
+}
+.toggle::before {
+	display: inline-block;
+	border: 1px solid currentColor;
+	margin-right: 4px;
+	padding: 0;
+	width: 23px;
+	height: 23px;
+	line-height: 23px;
+	font-size: 22px;
+	font-family: monospace;
+	text-align: center;
+	vertical-align: middle;
+	content: "+";
+}
+.toggle.open::after {
+	content: ":";
+}
+.toggle.open::before {
+	content: "-";
+}
+.hid {
+	display: none;
+}
diff --git a/index.en.htm b/index.en.htm
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Random spaceship sprite generator</title>
+	<link rel="shortcut icon" type="image/png" href="index.png">
+	<link rel="stylesheet" type="text/css" href="index.css">
+	<script>
+	var	la = {
+			'drawing': 'Drawing in progress...'
+		,	'about': {
+				'header': 'About'
+			,	'lines': [
+					'How it works, in principle, is very simple.'
+				,	'For each sprite:'
+				,	'1. Prepare a small random palette of N colors.'
+				,	'2. Step over every pixel inside a sprite, picking random colors from palette with a chance to skip (keep background color).'
+				,	'3. Mirror every step (except uneven middle row).'
+				]
+			,	'links': 'Links and sources:'
+			}
+		,	'links': {
+				'en': 'Original (EN)'
+			,	'ru': 'Translated (RU)'
+			}
+		,	'checkboxes': {
+				'auto_redraw': 'Auto redraw on changes'
+			,	'auto_save': 'Auto save images'
+			,	'draw_frames': 'Also save draw process frames'
+			,	'transprent_bg': 'Transparent background'
+			,	'ver_symmetry': 'Vertical symmetry'
+			}
+		,	'inputs': {
+				'pixel_size': 'Pixel size'
+			,	'black_ratio': 'Black ratio, %'
+			,	'colors_per_sprite': 'Colors per sprite'
+			,	'sprite_width': 'Each sprite width'
+			,	'sprite_height': 'Each sprite height'
+			,	'sprites_per_row': 'Sprites per row'
+			,	'sprites_per_col': 'Sprites per column'
+			,	'canvas_max_width': 'Result image max width'
+			,	'canvas_max_height': 'Result image max height'
+			}
+		,	'buttons': {
+				'draw': 'Create image'
+			,	'save': 'Save image'
+			}
+		};
+	</script>
+	<script src="index.js"></script>
+</head>
+<body>
+	Loading page...
+</body>
+</html>