added p5 to the project to take care of the drawing part

n-peugnet · Mar 5, 2018 · 01ddf5c · 01ddf5c
1 parent 93908a0
commit 01ddf5c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -9,20 +9,15 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
 	<script src="../src/class.area.js"></script>
 	<script src="../src/class.mapped-image.js"></script>
-	<style>
-		#example-image-1 {
-			border: solid 1px;
-			width: 500px;
-			height: 400px;
-		}
-	</style>
+	<script src="../src/p5.mapped-image.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
 </head>
 
 <body>
 	<h1>Mapped-images-generator Demo</h1>
-	<div id="example-image-1"></div>
+	<div id="div-1"></div>
 	<script type="text/javascript">
-		var mImage = new MappedImage("example-image-1");
+		var mImage = new p5(mappedImageGen, "div-1");
 	</script>
 </body>
 

diff --git a/src/class.area.js b/src/class.area.js
@@ -5,7 +5,7 @@ class Area {
 	 * @param {int[]} coords the list of coordinates
 	 * @param {string} href the link this area is going to point to
 	 */
-	constructor(shape, coords, href) {
+	constructor(shape = "rect", coords = [], href = "") {
 		this.shape = shape;
 		this.coords = coords;
 		this.href = href;
@@ -15,11 +15,11 @@ class Area {
 		this.coords.push([x, y]);
 	}
 
-	set href(url) {
+	sethref(url) {
 		this.href = url;
 	}
 
-	set shape(type) {
+	setshape(type) {
 		this.shape = type;
 	}
 }
diff --git a/src/class.mapped-image.js b/src/class.mapped-image.js
@@ -2,13 +2,12 @@ class MappedImage {
 
 	/**
 	 * 
-	 * @param {string} image 
 	 * @param {Area[]} areas 
+	 * @param {string} image 
 	 */
-	constructor(id, image, areas) {
-		this.id = id;
-		this.image = image;
+	constructor(areas, image) {
 		this.areas = areas;
+		this.image = image;
 		this.tempA = null;
 	}
 
@@ -21,13 +20,7 @@ class MappedImage {
 			this.tempA = new Area("rect", [x, y]);
 		else
 			this.tempA.addCoord(x, y);
-	}
-
-	setEvents() {
-		var html = document.getElementById(this.id);
-		var self = this;
-		html.onmousedow = function (e) {
-			self.drawArea(e.offsetX, e.offsetY)
-		}
+		console.log(x, y);
+
 	}
 }
diff --git a/src/p5.mapped-image.js b/src/p5.mapped-image.js
@@ -0,0 +1,23 @@
+var mappedImageGen = function (p) {
+
+	var testArea = new Area("rect");
+	testArea.addCoord(10,10);
+	testArea.addCoord(50,50);
+	var map = new MappedImage([testArea]);
+
+	p.setup = function () {
+		p.createCanvas(400, 300);
+	};
+
+	p.draw = function () {
+		p.background(200);
+		p.fill(0);
+		map.areas.forEach(area => {
+			p.rect(area.coords[0][0], area.coords[0][1], area.coords[1][0], area.coords[1][1]);
+		});
+	};
+
+	p.mousePressed = function() {
+		p.rect(10, 10, p.mouseX, p.mouseY)
+	}
+};