-
Notifications
You must be signed in to change notification settings - Fork 7
Bitmap Transformer #17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
e14e5b0
a26d48f
6092d3a
321668b
23ac1a0
3f790e2
2da2ef6
fdbd0a6
67903b8
f0e7d77
a981d61
0504965
8d006ed
c1e81a6
03eeaaf
45af2da
82008a2
52cdfb1
2aa61c6
97cd0a3
3d84c89
979b80d
668c952
2535f49
fc0d297
dad2a98
d0e02d4
6365878
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| "rules": { | ||
| "no-console": "off", | ||
| "indent": [ "error", 2 ], | ||
| "quotes": [ "error", "single" ], | ||
| "semi": ["error", "always"], | ||
| "linebreak-style": [ "error", "unix" ] | ||
| }, | ||
| "env": { | ||
| "es6": true, | ||
| "node": true, | ||
| "mocha": true, | ||
| "jasmine": true | ||
| }, | ||
| "ecmaFeatures": { | ||
| "modules": true, | ||
| "experimentalObjectRestSpread": true, | ||
| "impliedStrict": true | ||
| }, | ||
| "extends": "eslint:recommended" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
|
|
||
| # Created by https://www.gitignore.io/api/node,macos,windows,linux | ||
|
|
||
| ### Node ### | ||
| # Logs | ||
| logs | ||
| *.log | ||
| npm-debug.log* | ||
| node_modules | ||
| coverage | ||
|
|
||
| # Runtime data | ||
| pids | ||
| *.pid | ||
| *.seed | ||
| *.pid.lock | ||
|
|
||
| # Directory for instrumented libs generated by jscoverage/JSCover | ||
| lib-cov | ||
|
|
||
| # Coverage directory used by tools like istanbul | ||
| coverage | ||
|
|
||
| # nyc test coverage | ||
| .nyc_output | ||
|
|
||
| # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) | ||
| .grunt | ||
|
|
||
| # node-waf configuration | ||
| .lock-wscript | ||
|
|
||
| # Compiled binary addons (http://nodejs.org/api/addons.html) | ||
| build/Release | ||
|
|
||
| # Dependency directories | ||
| node_modules | ||
| jspm_packages | ||
|
|
||
| # Optional npm cache directory | ||
| .npm | ||
|
|
||
| # Optional eslint cache | ||
| .eslintcache | ||
|
|
||
| # Optional REPL history | ||
| .node_repl_history | ||
|
|
||
| # Output of 'npm pack' | ||
| *.tgz | ||
|
|
||
| # Yarn Integrity file | ||
| .yarn-integrity | ||
|
|
||
|
|
||
|
|
||
| ### macOS ### | ||
| *.DS_Store | ||
| .AppleDouble | ||
| .LSOverride | ||
|
|
||
| # Icon must end with two \r | ||
| Icon | ||
| # Thumbnails | ||
| ._* | ||
| # Files that might appear in the root of a volume | ||
| .DocumentRevisions-V100 | ||
| .fseventsd | ||
| .Spotlight-V100 | ||
| .TemporaryItems | ||
| .Trashes | ||
| .VolumeIcon.icns | ||
| .com.apple.timemachine.donotpresent | ||
| # Directories potentially created on remote AFP share | ||
| .AppleDB | ||
| .AppleDesktop | ||
| Network Trash Folder | ||
| Temporary Items | ||
| .apdisk | ||
|
|
||
|
|
||
| ### Windows ### | ||
| # Windows image file caches | ||
| Thumbs.db | ||
| ehthumbs.db | ||
|
|
||
| # Folder config file | ||
| Desktop.ini | ||
|
|
||
| # Recycle Bin used on file shares | ||
| $RECYCLE.BIN/ | ||
|
|
||
| # Windows Installer files | ||
| *.cab | ||
| *.msi | ||
| *.msm | ||
| *.msp | ||
|
|
||
| # Windows shortcuts | ||
| *.lnk | ||
|
|
||
|
|
||
| ### Linux ### | ||
| *~ | ||
|
|
||
| # temporary files which can be created if a process still has a handle open of a deleted file | ||
| .fuse_hidden* | ||
|
|
||
| # KDE directory preferences | ||
| .directory | ||
|
|
||
| # Linux trash folder which might appear on any partition or disk | ||
| .Trash-* | ||
|
|
||
| # .nfs files are created when an open file is removed but is still being accessed | ||
| .nfs* |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| ## Bitmap Project: | ||
| This is a bitmap transformer built by Jonathan, Peter, and Britt. | ||
|
|
||
| In this project, we are converting the image below using different transforms: | ||
|
|
||
|  | ||
|
|
||
| ##### Our transforms are as follows: | ||
| - Green | ||
| - Invert | ||
| - Greyscale | ||
| - Black | ||
| - White | ||
| - Luminosity | ||
|
|
||
| ##### Green Transform Formula | ||
|
|
||
| > Multiply the green element (color value) of the RGBA array by the max number of colors minus one (256 - 1) or 255. | ||
|
|
||
| ##### Black & White Transform Formula | ||
|
|
||
| > Fill the entire colorArray / its elements with 255 or 0. | ||
|
|
||
| ##### Invert Transform Formula | ||
|
|
||
| > Subtract each color value (RGB) from 255. | ||
|
|
||
| ##### Greyscale Transform Formula | ||
|
|
||
| > Average the RGB color values and set the color values to this average. | ||
|
|
||
| ##### Luminosity Transform Formula | ||
|
|
||
| > Multiply the red color value by .21. Multiply the green color value by .72. Multiply the blue color value by .07. | ||
|
|
||
| --- | ||
| ## To Run This Project Locally: | ||
|
|
||
| To run this project locally, type the following into your terminal: | ||
|
|
||
| 1. `git clone https://github.com/brittdawn/04-bitmap-transformer.git` | ||
| 2. `cd 04-bitmap-transformer/` | ||
| 3. `npm i` | ||
| 4. `node index.js` | ||
|
|
||
| The terminal will then prompt you: "Please enter one of the following: green, white, invert, greyscale, luminosity, black or all." | ||
|
|
||
| You may then type which transform you wish to implement, like so: `node index.js invert`. | ||
|
|
||
| You may now go to the assets folder and see your transformed image. | ||
|
|
||
| Repeat as you wish with other transforms. | ||
|
|
||
| --- | ||
| ## To Run Tests: | ||
|
|
||
| You can type the following into the command line: `gulp test`. | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| 'use strict'; | ||
|
|
||
| const gulp = require('gulp'); | ||
| const eslint = require('gulp-eslint'); | ||
| const mocha = require('gulp-mocha'); | ||
| const cache = require('gulp-cache'); | ||
| const istanbul = require('gulp-istanbul'); | ||
|
|
||
| gulp.task('pre-test', function() { | ||
| return gulp.src(['./lib/*.js', './model/*.js', '!node_modules/**']) | ||
| .pipe(istanbul()) | ||
| .pipe(istanbul.hookRequire()); | ||
| }); | ||
|
|
||
| gulp.task('test', ['pre-test'], function() { | ||
| gulp.src('./test/*-test.js', { read: false}) | ||
| .pipe(mocha({ report: 'spec'})) | ||
| .pipe(istanbul.writeReports()) | ||
| .pipe(istanbul.enforceThresholds({thresholds: {global: 90}})); | ||
| }); | ||
|
|
||
| gulp.task('lint', function() { | ||
| return gulp.src(['**/*.js', '!node_modules/**']) | ||
| .pipe(eslint()) | ||
| .pipe(eslint.format()) | ||
| .pipe(eslint.failAfterError()); | ||
| }); | ||
|
|
||
| gulp.task('dev', function() { | ||
| gulp.watch(['**/*.js', '!node_modules/**'], ['lint', 'test']); | ||
| }); | ||
|
|
||
| gulp.task('default', ['dev']); | ||
|
|
||
| gulp.task('clear', function (done) { | ||
| return cache.clearAll(done); | ||
| }); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| 'use strict'; | ||
|
|
||
| const readFileHelper = require('./lib/bitmap-file-helper.js'); | ||
|
|
||
| module.exports = exports = {}; | ||
|
|
||
| switch (process.argv[2]) { | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 generally speaking, it's bad practice to use |
||
| case 'green': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'green'); | ||
| break; | ||
| case 'white': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'white'); | ||
| break; | ||
| case 'invert': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'invert'); | ||
| break; | ||
| case 'greyscale': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'greyscale'); | ||
| break; | ||
| case 'luminosity': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'luminosity'); | ||
| break; | ||
| case 'black': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'black'); | ||
| break; | ||
| case 'all': | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'green'); | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'white'); | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'invert'); | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'greyscale'); | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'luminosity'); | ||
| readFileHelper.bitmap(readFileHelper.filePath, readFileHelper.callback, 'black'); | ||
| break; | ||
| default: | ||
| console.log('Please enter one of the following: green, white, invert, greyscale, luminosity, black or all'); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 good UX catch |
||
| } | ||
|
|
||
| exports.convert = process.argv[2]; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| 'use strict'; | ||
|
|
||
| const fs = require('fs'); | ||
| const bitmap = require('../model/bitmap-constructor.js'); | ||
|
|
||
| module.exports = exports = {}; | ||
| exports.callback = function (err, data, convert) { | ||
| if (err) throw err; | ||
| let transform = new bitmap.BufferData(data); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 good use of |
||
| if(convert) transform[convert](); | ||
| }; | ||
|
|
||
| exports.bitmap = function (file, callback, color) { | ||
| return fs.readFile(file, function(err, data) { | ||
| if (err) return callback(err); | ||
| fs.writeFile(`${__dirname}/../assets/${color}.bmp`, data, function(err) { | ||
| if(err) throw err; | ||
| }); | ||
| return callback(null, data, color); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 great use of the |
||
| }); | ||
| }; | ||
|
|
||
| exports.filePath = `${__dirname}/../assets/palette-bitmap.bmp`; | ||
| exports.filePath2 = `${__dirname}/../assets/astro.bmp`; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| 'use strict'; | ||
|
|
||
| module.exports = exports = {}; | ||
|
|
||
| exports.BufferData = function(data) { | ||
| this.buffer = data; | ||
| this.id = data.toString('utf-8', 0, 2); | ||
| this.size = data.readInt32LE(2); | ||
| this.offset = data.readInt32LE(10); | ||
| this.dibheader = data.readInt32LE(14); | ||
| this.width = data.readInt32LE(18); | ||
| this.height = data.readInt32LE(22); | ||
| this.pixel_horizontal = data.readInt32LE(38); | ||
| this.pixel_vertical = data.readInt32LE(42); | ||
| this.number_colors = data.readInt32LE(46); | ||
| this.colorArray = data.slice(54, this.offset); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 excellent bitmap constructor - I like that you included the raw buffer in your constructor, along with storing all of the necessary metadata about the bitmap |
||
| }; | ||
|
|
||
| exports.BufferData.prototype.green = function() { | ||
| for (var i = 0, j = this.colorArray.length; i < j; i += 4) { | ||
| let color = this.colorArray.slice(i, i+4); | ||
| let maxColor = this.number_colors - 1; | ||
| color[0] = color[2] = color[3] = 0; | ||
| color[1] *= maxColor; | ||
| } | ||
| }; | ||
|
|
||
| exports.BufferData.prototype.white = function() { | ||
| this.colorArray.fill(255); | ||
| }; | ||
|
|
||
| exports.BufferData.prototype.invert = function() { | ||
| for (var i = 0, j = this.colorArray.length; i < j; i += 4) { | ||
| let color = this.colorArray.slice(i, i+4); | ||
| let maxColor = this.number_colors - 1; | ||
| color[0] = maxColor - color[0]; | ||
| color[1] = maxColor - color[1]; | ||
| color[2] = maxColor - color[2]; | ||
| color[3] = 0; | ||
| } | ||
| }; | ||
|
|
||
| exports.BufferData.prototype.greyscale = function() { | ||
| for (var i = 0, j = this.colorArray.length; i < j; i += 4) { | ||
| let color = this.colorArray.slice(i, i+4); | ||
| let averageColor = (color[0] + color[1] + color[2] / 3); | ||
| color[0] = color[1] = color[2] = averageColor; | ||
| color[3] = 0; | ||
| } | ||
| }; | ||
|
|
||
| exports.BufferData.prototype.luminosity = function() { | ||
| for (var i = 0, j = this.colorArray.length; i < j; i += 4) { | ||
| let color = this.colorArray.slice(i, i+4); | ||
| color[0] = color[0] * .07; | ||
| color[1] = color[1] * .72; | ||
| color[2] = color[2] * .21; | ||
| color[3] = 0; | ||
| } | ||
| }; | ||
|
|
||
| exports.BufferData.prototype.black = function() { | ||
| this.colorArray.fill(0); | ||
| }; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 transform methods look great! Nice job adding the luminosity, invert, and greyscale transforms |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "name": "04-bitmap-transformer", | ||
| "version": "1.0.0", | ||
| "description": "Fun bitmap lab.", | ||
| "main": "index.js", | ||
| "directories": { | ||
| "test": "test" | ||
| }, | ||
| "devDependencies": { | ||
| "chai": "^3.5.0", | ||
| "eslint": "^3.12.0", | ||
| "gulp": "^3.9.1", | ||
| "gulp-cache": "^0.4.5", | ||
| "gulp-eslint": "^3.0.1", | ||
| "gulp-istanbul": "^1.1.1", | ||
| "gulp-mocha": "^3.0.1", | ||
| "mocha": "^3.2.0" | ||
| }, | ||
| "scripts": { | ||
| "test": "mocha" | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @brittdawn @jonathanheemstra @peterkim2 nice job adding a basic npm "test" script |
||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/brittdawn/04-bitmap-transformer.git" | ||
| }, | ||
| "keywords": [], | ||
| "author": "Jonathan, Peter, Britt", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/brittdawn/04-bitmap-transformer/issues" | ||
| }, | ||
| "homepage": "https://github.com/brittdawn/04-bitmap-transformer#readme" | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@brittdawn @jonathanheemstra @peterkim2
README.mdlooks good!