Initial Commit

README.md

@@ -0,0 +1,68 @@
+# **Data Pixels**
+
+## **Create Pixel Art Programmatically**
+The **DataPixels.js** source code facilitates production of pixel art that is entirely generated programmatically at runtime.   Additionally, the accompanying desktop application, **Data Pixels Playground**, may be used to write and execute code for displaying both customized and automated pixel art.
+
+## **DataPixels.js** 
+
+The DataPixels.js source code features a modular, ES2015 Class design for accessible and effortless construction of new instances.  Each instance contains both **HTMLCanvasElement** and **HTMLImageElement** public accessors whose sources consist of the programmatically generated pixel art.
+
+The DataPixels.js constructor requires 2 arguments:
+
+1. **pixelData**:  An array containing one or more arrays of equal length, consisting of strings composed of 0-255 integer values per 24-bit RGB color channel (e.g., `“255, 255, 255”`) or 32-bit RGBA color channel (e.g., `“255, 255, 255, 255”`).  Additionally, the strings may optionally contain any kind of descriptive text (e.g., `“Red: 255, G - 128, 64 for Blue, Transparency = 32”`) as only the number values within the string will be parsed in RGB / RGBA order.  Strings that contain more than 4 numbers will throw an error.
+
+2. **pixelSize**:  The size of each color data unit in pixels.  This value represents the size of each perceived pixel that forms the pixel art.
+
+![Code Output](./resources/source/images/readme/CodeOutput.png)
+
+## **Data Pixels Playground**
+Data Pixels Playground is a lightweight, cross-platform, desktop application for **Windows**, **Mac** and **Linux**, which may be used to write and execute DataPixels.js instances for previewing and testing purposes.
+
+The application features **built-in example code** via the *Help* menu as well as the ability to **parse pixel data from image files** to produce automatically generated code through the *File > Open Image File…* menu item or through drag-and-drop gestures.
+
+Note: pixel color values that are automatically interpreted from image files with an embedded color space may differ slightly from the image’s intended color values.
+
+![Application Screenshot](./resources/source/images/readme/ApplicationScreenshot.png)
+
+## **Desktop Application Release Builds**
+Creating release builds for **Windows**, **Mac** and/or **Linux** is a 2-step process: code compilation, then application packaging, both of which are accomplished by running command-line NPM scripts that execute Gulp tasks.
+
+#### **Compilation**
+
+Production code compilation can be executed by entering the following CLI command at the project **root folder** [*~/DataPixels/* ]:
+
+```
+npm run prod
+```
+
+For more detailed information concerning code compilation please refer to [**Project Foundation**](https://github.com/gmattie/Project-Foundation).
+
+#### **Packaging**
+
+Application packaging can be executed for either all or individual deployment targets by entering one of the following CLI commands at the project **build folder** [*~/DataPixels/resources/build/* ]:
+
+```
+npm run package
+```
+
+```
+npm run package-linux
+```
+
+```
+npm run package-mac
+```
+
+```
+npm run package-windows
+```
+
+Note: In order to avoid problems with code signing and other build issues it is highly recommended to execute packaging scripts for an individual platform from its own operating system.
+
+For more detailed information concerning application packaging please refer to [**Electron Packager**](https://github.com/electron-userland/electron-packager).
+
+## **License**
+
+[**MIT License**](./resources/build/license)
+
+Copyright © 2017 Geoffrey Mattie

gulpfile.js

@@ -0,0 +1,131 @@
+//Dependencies
+const autoPrefixer = require("autoprefixer");
+const browserSync = require("browser-sync").create();
+const gulp = require("gulp");
+const gulpUtil = require("gulp-util");
+const minCSS = require("gulp-clean-css");
+const minHTML = require("gulp-htmlmin");
+const postCSS = require("gulp-postcss");
+const sass = require("gulp-sass");
+const sourceMaps = require("gulp-sourcemaps");
+const webpack = require("webpack");
+const webpackStream = require("webpack-stream");
+const webpackUglify = require("uglifyjs-webpack-plugin");
+
+//Config
+const config = {
+
+    DEVELOPMENT: gulpUtil.env.development,
+    PRODUCTION: gulpUtil.env.production
+};
+
+//Tasks
+const tasks = {
+
+    TRANSPILE_JS: "transpile-js",
+    TRANSPILE_SASS: "transpile-sass",
+    TRANSPILE_HTML: "transpile-html"
+};
+
+//Paths
+const PATHS_ROOT = "./resources/";
+
+const paths = {
+
+    ROOT: `${PATHS_ROOT}`,
+    BUILD: `${PATHS_ROOT}build/`,
+    SOURCE: `${PATHS_ROOT}source/`
+};
+
+//Folders
+const folders = {
+
+    JS: "js/",
+    CSS: "css/",
+    SASS: "sass/",
+};
+
+//Files
+const files = {
+
+    JS: "main.js",
+    CSS: "main.css",
+    SASS: "main.scss",
+    HTML: "index.html",
+};
+
+//Task Transpile JavaScript
+gulp.task(tasks.TRANSPILE_JS, () => {
+
+    gulp.src(`${paths.SOURCE}${folders.JS}${files.JS}`)
+        .pipe(
+            webpackStream({
+                module: {
+                    rules: [{
+                        test: /\.js$/,
+                        loader: "babel-loader",
+                        exclude: /(node_modules)/,
+                        options: {
+                            presets: [["latest", {"es2015": {"modules": false}}]]
+                        }
+                    }]
+                },
+                plugins: (config.PRODUCTION) ? [new webpackUglify({
+                                                    compress: {warnings: true},
+                                                    sourceMap: (config.DEVELOPMENT)})
+                                               ]
+                                             : [],
+                output: {filename: `${files.JS}`},
+                devtool: (config.DEVELOPMENT) ? "inline-source-map" : ""
+            }, webpack)
+            .on("error", (error) => gulpUtil.log(error)))
+        .pipe(gulp.dest(`${paths.BUILD}${folders.JS}`))
+        .pipe((config.DEVELOPMENT) ? browserSync.stream() : gulpUtil.noop());
+});
+
+//Task Transpile Sass
+gulp.task(tasks.TRANSPILE_SASS, () => {
+
+    gulp.src(`${paths.SOURCE}${folders.SASS}${files.SASS}`)
+        .pipe((config.DEVELOPMENT) ? sourceMaps.init() : gulpUtil.noop())
+        .pipe(
+            sass({
+                outFile: `${files.CSS}`
+            })
+            .on("error", sass.logError))
+        .pipe(
+            postCSS([
+                autoPrefixer()
+            ]))
+        .pipe((config.PRODUCTION) ? minCSS() : gulpUtil.noop())
+        .pipe((config.DEVELOPMENT) ? sourceMaps.write() : gulpUtil.noop())
+        .pipe(gulp.dest(`${paths.BUILD}${folders.CSS}`))
+        .pipe((config.DEVELOPMENT) ? browserSync.stream() : gulpUtil.noop());
+});
+
+//Task Copy HTML
+gulp.task(tasks.TRANSPILE_HTML, () => {
+
+    gulp.src(`${paths.SOURCE}${files.HTML}`)
+        .pipe(minHTML({collapseWhitespace: true}))
+        .pipe(gulp.dest(`${paths.BUILD}`))
+        .pipe((config.DEVELOPMENT) ? browserSync.stream() : gulpUtil.noop());
+});
+
+//Task Default
+gulp.task("default", [tasks.TRANSPILE_JS, tasks.TRANSPILE_SASS, tasks.TRANSPILE_HTML], () => {
+
+    if (config.DEVELOPMENT) {
+
+        browserSync.init({
+            server: {
+                baseDir: `${paths.BUILD}`,
+                index: `${files.HTML}`
+            }
+        });
+
+        gulp.watch(`${paths.SOURCE}${folders.JS}**/*.js`, [tasks.TRANSPILE_JS]);
+        gulp.watch(`${paths.SOURCE}${folders.SASS}**/*.scss`, [tasks.TRANSPILE_SASS]);
+        gulp.watch(`${paths.SOURCE}${files.HTML}`, [tasks.TRANSPILE_HTML]);
+    }
+});

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "data-pixels-playground",
+  "version": "1.0.0",
+  "description": "Create pixel art programmatically",
+  "author": "Geoffrey Mattie",
+  "license": "MIT",
+  "main": "main.js",
+  "scripts": {
+    "dev": "gulp --development",
+    "prod": "gulp --production",
+    "dev-prod": "gulp --development --production"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.7",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.4.1",
+    "babel-preset-latest": "^6.24.1",
+    "browser-sync": "^2.18.8",
+    "gulp-clean-css": "^3.0.4",
+    "gulp-htmlmin": "^3.0.0",
+    "gulp-postcss": "^6.4.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-util": "^3.0.8",
+    "gulp": "^3.9.1",
+    "uglifyjs-webpack-plugin": "^0.4.3",
+    "webpack-stream": "^3.2.0",
+    "webpack": "^2.5.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}