Skip to content
Browse files

first shot. Draws an oblique ellipse

  • Loading branch information...
1 parent ffc7358 commit 1a69b7a0a86b6f22225e3b89b31038028d99a478 @DavidBruant committed Aug 3, 2012
Showing with 154 additions and 0 deletions.
  1. +13 −0 index.html
  2. +141 −0 shapeguesser.js
View
13 index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Shape guesser</title>
+ <script src="./shapeguesser.js"></script>
+ </head>
+<body>
+
+ <canvas width="150" height="150"></canvas>
+
+</body>
+</html>
View
141 shapeguesser.js
@@ -0,0 +1,141 @@
+"use strict";
+
+var cos = Math.cos,
+ sin = Math.sin,
+ PI = Math.PI;
+
+function Shape(){}
+Shape.prototype = {
+ draw: function(){ throw new Error('You need to override this method'); }
+};
+
+
+function Ellipse(x, y, r, R, angle){
+ this.x = x;
+ this.y = y;
+ this.r = r;
+ this.R = R;
+ this.angle = angle;
+}
+Ellipse.prototype = Object.create(Shape.prototype);
+Ellipse.prototype.draw = function(canvas){
+ // Copied from http://www.uwgb.edu/dutchs/Geometry/HTMLCanvas/ObliqueEllipses5.HTM and largely adapted
+ var x = this.x,
+ y = this.y,
+ r = this.r,
+ R = this.R,
+ angle = this.angle;
+
+ canvas = canvas || this.canvas;
+ var x0 = x + R*cos(angle);
+ var y0 = y - R*sin(angle);
+ var x1 = x0;
+ var y1 = y0;
+
+ var DRAWING_STEP = 0.1;
+
+ canvas.strokeStyle = "#000000";
+ canvas.lineWidth = 1;
+ canvas.beginPath();
+ for(var t=0; t <= 2*PI; t += DRAWING_STEP){
+ x0 = x1;
+ y0 = y1;
+ x1 = x + R*cos(t)*cos(angle) - r*sin(t)*sin(angle);
+ y1 = y - R*cos(t)*sin(angle) - r*sin(t)*cos(angle);
+ canvas.moveTo(x0, y0);
+ canvas.lineTo(x1, y1);
+ canvas.stroke();
+ }
+ canvas.closePath();
+
+
+ //Draw Major and Minor Axes
+ /*canvas.strokeStyle = "#FF0000";
+ canvas.beginPath();
+ canvas.moveTo(xctr+majaxis*Math.cos(rotnrad),yctr-majaxis*Math.sin(rotnrad));
+ canvas.lineTo(xctr-majaxis*Math.cos(rotnrad),yctr+majaxis*Math.sin(rotnrad));
+ canvas.moveTo(xctr+minaxis*Math.sin(rotnrad),yctr+minaxis*Math.cos(rotnrad));
+ canvas.lineTo(xctr-minaxis*Math.sin(rotnrad),yctr-minaxis*Math.cos(rotnrad));
+ canvas.stroke();
+ canvas.closePath();
+ */
+};
+
+function Point(x, y){
+ this.x = x;
+ this.y = y;
+}
+Point.prototype = {
+ draw: function(canvas){
+ canvas = canvas || this.canvas;
+ canvas.fillRect(this.x, this.y, 1, 1);
+ }
+};
+
+/*
+ 1) Create abstract Ellipse (draw it) (1 canvas)
+ {x, y, maxR, minR, angle}
+
+ 2) Sample points from it (draw them) (1 canvas)
+ 3) Run the guessing algorithm based on these points
+ 4) Draw the result (and intermediaries) (1 canvas)
+
+ Guessing algo
+ 1) From points, figure the "isobarycentre" and max radius and min radius
+ 2) Create a circle (special ellipse) based on that (centered at the center and with radius medium of max and min)
+ 3) Create ellipses randomly by changing the 5 parameters randomly from the best-ellipse-so-far
+ 4) Select the best and get back at 3).
+ 5) Stop whenever
+
+ Values are chosen within a range. Probability is the same for every value at first, then closely favor things that are
+ closer to the best-so-far (for x, y, min/maxR. Maybe not for the angle)
+ */
+
+
+/**
+ *
+ * @param points
+ */
+function firstEllipseGuess(points){
+
+}
+
+function guessShapeWithHelp(points, shape){
+
+}
+
+/**
+ *
+ * @param points Array of Point
+ * @return {*}
+ */
+Ellipse.guessFromPoints = function guessFromPoints(points){
+ var shape;
+
+
+ return shape;
+};
+
+
+
+
+document.addEventListener('DOMContentLoaded', function(){
+ var context = document.getElementsByTagName('canvas')[0].getContext('2d');
+ var e = new Ellipse(50, 50, 10, 20, PI/4);
+ e.canvas = context;
+ e.draw();
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+

0 comments on commit 1a69b7a

Please sign in to comment.
Something went wrong with that request. Please try again.