spread code into seperate files

README.md

@@ -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.

index.html

@@ -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)

js/geometry.js

@@ -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
+	}
+}

js/imagedata.js

@@ -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
+	}
+} 

js/other.js

@@ -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
+	    	}
+	    }
+	}
+}