Skip to content
Permalink
Browse files

spread code into seperate files

  • Loading branch information...
Jeremy Heminger Jeremy Heminger
Jeremy Heminger authored and Jeremy Heminger committed Apr 3, 2019
1 parent 209cc95 commit b77b22427378276980917815d2064d72d9fe9196
Showing with 290 additions and 251 deletions.
  1. +2 −0 README.md
  2. +2 −2 index.html
  3. +51 −0 js/geometry.js
  4. +130 −0 js/imagedata.js
  5. +82 −0 js/other.js
  6. +23 −249 script.js → js/reducecolors.js
@@ -5,6 +5,8 @@ Using Javascript to manipulate images

This program has a base class to import images and get data.

#### Note: This uses import and threfore needs to be run in a server environment or you will get a CORS error

The first sub class ReduceColors does just that.

The first feature I added was an algorithm that finds the nearest color.
@@ -13,13 +13,13 @@
'use strict';
import * as classes from '/script.js'
import * as reducecolors from '/js/reducecolors.js'
const W = 500
const H = 700
// call the sub class
let test = new classes.ReduceColors()
let test = new reducecolors.ReduceColors()
// create and reference some canvases
let i = test.canvas(document.getElementById("original"),W,H)
@@ -0,0 +1,51 @@
'use strict';

import * as imagedata from '/js/imagedata.js'

export default {}

/**
* @class Geometry
* @extends Geometry
* */
export class Geometry extends ImageData {
constructor() {
super()
this.cids = 0
this.ctx = []
this.buffer = null
this.imgdata = null
}
/**
* @param {Number} s strength of the spin
* @param {Number} r radius
* @param {Number} w width
* @param {Number} h height
* @param {Number} x center of spin x
* @param {Number} y center of spin y
* */
spiral(s,r,w,h,x=null,y=null) {
x = (x == null ? w/2 : x)
y = (y == null ? h/2 : y)
w = w * 4
let temp = this.buffer
for(let j=0;j<r;j++) {
for(let i=0; i<360;i++) {
let xy = General.trig(x,y,j,i)
let xy2 = General.trig(x,y,j+s,i)
let p = (xy[0] + xy[1]) * w - 1
// get current pixel
let tR = this.buffer[p]
let tG = this.buffer[p + 1]
let tB = this.buffer[p + 2]

let q = (xy2[0] + xy2[1]) * w - 1
temp[q] = tR
temp[q + 1] = tG
temp[q + 2] = tB
}
}
this.buffer = temp
return this
}
}
@@ -0,0 +1,130 @@
'use strict';

import * as other from '/js/other.js'

export default {}

/**
* gets the image data, creates a canvas and addss data to a buffer, then draws data
* @class ImageData
* */
export class ImageData {
/**
* add a canvas to the target
* @param {Object} DOM object
* @param {Number}
* @param {Number}
* @returns {Number}
* */
canvas($t,w,h) {

let cid = this.cids

let c = document.createElement('canvas');
c.setAttribute('width',w)
c.setAttribute('height',h)
c.setAttribute('id','c'+this.cids)
c.setAttribute('data-id',this.cids)
$t.appendChild(c)

this.cids++;

this.ctx.push(c.getContext("2d"))

this.width = w
this.height = h

return cid;
}
/**
* load multiple images
* @param {Array} list of images
* @todo maybe the Array should be a set
* @return {Promise}
* */
load(src) {
const paths = Array.isArray(src) ? src : [src];
const promise = [];
paths.forEach((path) => {
promise.push(new Promise((resolve, reject) => {
const img = new Image()
img.src = path
img.onload = () => {
resolve({
img:img,
path:path,
status:'ok'
})
}
}))
})

return Promise.all(promise);
}
/**
* draw the image to the canvas
* @param {Number} the ctx ID
* @param {Object} the image object
* @param {Number} width
* @param {Number} height
* */
draw(i,img) {
this.ctx[i].drawImage(img, 0, 0, this.width, this.height)
return this
}
/**
* @param {Number}
* */
getData(i) {
const imgd = this.ctx[i].getImageData(0,0,this.width, this.height)
const pix = imgd.data
const buffer = imgd.data.buffer
const sourceBuffer8 = new Uint8ClampedArray(buffer);
this.buffer = sourceBuffer8
this.imgdata = imgd
return this
}
/**
* loops all the pixels of the image and calls functions to act on the pixel
* @param {Number}
* @param {Number}
* @param {Array}
* @param {Object}
* * */
loopPixels(p,params) {
let pr = new Promise((resolve, reject) => {
let i = 0, j = 0, len = 0, x = 0, y = 0, f
for(i=0, j=0, len=p.buffer.length / 4; i!=len; i++, j+=4 ) {
if (typeof params.func === 'function') {
params.func(p,this.width, this.height,j,params)
}
x++
if(x>=this.width) {
y++
x=0
}
}
resolve(p)
})
return pr
}
/**
* @param {Object}
* @param {Number}
* */
drawBuffer(i) {
this.ctx[i].putImageData(this._imgdata, 0, 0);
}
/**
* @return {Number}
* */
get _ctx() {
return this.ctx
}
get _buffer() {
return this.buffer
}
get _imgdata() {
return this.imgdata
}
}
@@ -0,0 +1,82 @@
'use strict';

export default {}

/**
* @class Colors
* */
export class Colors {
/**
* returns a color hex value from an integer
* @param {Number}
*
* @returns {String}
* */
static componentToHex(c) {
c = parseInt(c);
let hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
/**
* returns a color hex value from an 3 integers
* @param {Number}
* @param {Number}
* @param {Number}
*
* @returns {String}
* */
static rgbToHex(r, g, b) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
}
/**
* returns a random color
* @returns {String}
* */
static random(hex = true) {
let c = [];
for(let i=0; i<3;i++) {
c.push(~~(Math.random() * 255));
}
if(hex) {
return this.rgbToHex(c[0],c[1],c[2])
}else{
return c
}
}
}
/**
* @class General
* */
export class General {
/**
*
* @function trig
* @param {Number}
* @param {Number}
* @param {Number}
* @param {Number}
* @param {Boolean}
* @returns {Mixed}
* */
static trig(x,y,r,d,array=true) {

if(d<0)d+=360;
if(d>360)d-=360;

let a = d * Math.PI / 180;
let xpos = r * Math.cos(a);
let ypos = r * Math.sin(a);

if(array) {
return [
~~xpos+x,
~~ypos+y
]
}else{
return {
x:~~xpos+x,
y:~~ypos+y
}
}
}
}
Oops, something went wrong.

0 comments on commit b77b224

Please sign in to comment.
You can’t perform that action at this time.