More Circle Pixels w/Mozilla

This page was supposed to demonstrate the new MathPlayer 2.0 support XHTML + MathML pages. Ha!

A few links I've looked at of late

http://web.mit.edu/is/topics/webpublishing/mathml/

http://www.hostsrv.com/webMathematica/Resources/Documentation/English/indexE_5_1.html#t:67

Mozilla Testing and More Circle Pixels

From http://www.dynamicdrive.com/forums/archive/index.php/t-1085.html

Sorry for the delay in answering your question, but I only saw your post this morning. Here's what you need to do to author a page that's viewable in both Netscape/Mozilla/Firefox and IE 6 + MathPlayer 2:

1. These lines should be the first 4 lines in your code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

2. Each <math> tag in your MathML needs to have this attribute: xmlns='http://www.w3.org/1998/Math/MathML'.

3. MathPlayer installs all fonts required for display in IE. For display in the Netscape browsers, you may need extra fonts. See http://www.mozilla.org/projects/mathml/fonts/ for more information.

We have an article on our web site that may be helpful: A Math on the Web Publishing Process (http://www.dessci.com/en/support/tutorials/mt_mp/tutorial.htm) . Also if you're using Dreamweaver, we have a tutorial for using Dreamweaver to author XHTML+MathML pages (http://www.dessci.com/en/support/tutorials/mathml/mathmldw.htm) .

Bob Mathews
bobm at dessci.com
Director of Training
Design Science, Inc. -- "How Science Communicates" (http://www.dessci.com/free.asp?free=news)
FREE fully-functional 30-day evaluation of MathType 5
MathType, WebEQ, MathPlayer, MathFlow, Equation Editor, TeXaide

Here are some math expressions.

x^{2}

y = k \pm \sqrt{r_{}^{2} - {(x - h)}_{}^{2}}

Today I want to continue the subject of yesterday's slog, but with an emphasis on accommodating Mozilla, if not both Mozilla and IE. So if this doesn't work with IE, try a Mozilla type browser like FireFox, though, if it doesn't work, you mayn't be getting this missive. Oh, well.

I used a simple point class to get started on implementing the midpoint algorithm as outlined yesterday (below). Since I'm authoring an xml document, I'm unable to use Frontpage's "design" wysiwyg feature and so I'm trying to use styles...very tedious to get the following...not worth the trouble, really, yet.

Back to October Calendar

←Previous Entry

// class ScreenPt header file

class screenPt {
   private GLint x, y;
   public:
      // default constructor initializes coordinates to (0,0)
      screenPt() { x = y = 0;    }
      void setCoords( GLint xCoordValue, GLint yCoordValue) {
         x = xCoordValue;
         y = yCoordValue;
}
   void getx (GLint x_input) {
      x = x_input;
   }
   void gety (GLint y_input ) {
      y = y_input;
   }
   GLint getx ( ) const {
      return x;
   }
   GLint gety ( ) const {
      return y;
   }
   void incrementx( ) {
      ++x;
   }
   void decrementy( ) {
      --y;
   }
   void setPixel (GLint x, GLint y);
};

Using DevCpp from bloodshed's export to html utility I was able to cut and paste style elements and the following code into this document, which makes it much easier to format code...

#include <gl/glut.h>
#include "ScreenPt.h"

#include <iostream>
using namespace std;

void circleMidpoint (screenPt , GLint);
void circlePlotPoints (screenPt circCtr, screenPt circPt);

void setPixel (GLint x, GLint y) {
	glColor3f(0.,0.,1.);
	glBegin (GL_POINTS);
		glVertex2i (x, y);
	glEnd ( );
}


//<<<<<<<<<<<<<<<<<<<<<<< init >>>>>>>>>>>>>>>>>>>>
void init(void)  {
	glClearColor(1.0,1.0,1.0,1.0); //white background

	glMatrixMode(GL_PROJECTION);
	glLoadIdentity();
	//set the viewing coordinates
	gluOrtho2D(-100, 100, -100, 100);
}

//<<<<<<<<<<<<<<<<<<<<<<<< display >>>>>>>>>>>>>>>>>

void display(void)
{
	glClear(GL_COLOR_BUFFER_BIT); // clear the screen
	glColor3f(1.0,1.0,1.0); //white
	glColor3f(0.,0.,0.);
	glBegin(GL_POLYGON);
		glVertex2i(-30,-30);
		glVertex2i(10,-30);
		glVertex2i(10,0);
		glVertex2i(-30,10);
	glEnd();
    
	screenPt center;
	GLint center_x, center_y, radius;
	cout << "\nEnter the coordinates of the center point of the circle: ";
	cin >> center_x >> center_y;
	center.setCoords(center_x,center_y);
	cout << "\nEnter the radius of the circle: ";
	cin >> radius;
	//The big function call:

	circleMidpoint(center,radius);
	glFlush(); // send all output to display
	char ch; cin >> ch;  //pause
}

//<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>
int main(int argc, char** argv)
{
	glutInit(&argc, argv); // initialize the toolkit

	glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
	glutInitWindowSize(200,200); // set window size

	// set window position on screen
	glutInitWindowPosition(0, 0);
	// open the screen window and set the name
	glutCreateWindow("circle pixels");
	//register your functions

	glutDisplayFunc(display);
	init();

	glutMainLoop(); // go into a perpetual loop
	return 0;
}

void circleMidpoint (screenPt circCtr, GLint radius)    {
	screenPt circPt;
	// GLfloat p = 1.25 - radius
	GLint p = 1 - radius;         // Initial value of decision parameter.

	circPt.setCoords(0,radius);   // Set coordinates for top point of circle.
	
	void circlePlotPoints (screenPt, screenPt);
	
	/* Plot the initial point in each circle quadrant. */
	circlePlotPoints (circCtr, circPt);
    
	/* Calculate next points and plot in each octant. */
	while (circPt.getx() < circPt.gety()) {
		circPt.incrementx();
		if (p < 0)
			p += 2 * circPt.getx() + 1;
		else {
			circPt.decrementy();
			p += 2 * (circPt.getx() - circPt.gety()) + 1;
		}
		circlePlotPoints (circCtr, circPt);
	}
	glFlush();
}


void circlePlotPoints (screenPt circCtr, screenPt circPt) {
	// the eight symmetric points
	setPixel (circCtr.getx() + circPt.getx(), circCtr.gety() + circPt.gety());
	setPixel (circCtr.getx() - circPt.getx(), circCtr.gety() + circPt.gety());
	setPixel (circCtr.getx() + circPt.getx(), circCtr.gety() - circPt.gety());
	setPixel (circCtr.getx() - circPt.getx(), circCtr.gety() - circPt.gety());
	setPixel (circCtr.getx() + circPt.gety(), circCtr.gety() + circPt.getx());
	setPixel (circCtr.getx() - circPt.gety(), circCtr.gety() + circPt.getx());
	setPixel (circCtr.getx() + circPt.gety(), circCtr.gety() - circPt.getx());
	setPixel (circCtr.getx() - circPt.gety(), circCtr.gety() - circPt.getx());
}

Wow, that's easier, but still requires fussing with bground color for the .cppl space, etc. The result of running this code is to make a funny trapezoid (part of the debugging I did which I kept for now) and a prompt for circle parameters, which might look like so:

Enter the coordinates of the center point of the circle: 40 40
Enter the radius of the circle: 50

Here's a detail of the upper right quadrant of the circle over a pixel grid, together with the data for pixel coordinates. You can count 7 pixels to right of center on the top row (y = 90), 5 pixels below that (y = 89) and so on.

40 90
41 90
42 90
43 90
44 90
45 90
46 90
47 90
48 89
49 89
50 89
51 89
52 89
53 88
54 88
55 88
56 87
57 87
58 87
59 86
60 86
61 85
62 85
63 84
64 84
65 83
66 83
67 82
68 81
69 81
70 80
71 79
72 78
73 78
74 77
75 76
76 75

I'm getting an error when I try to view with IE, but the Mozilla envelope seems to be working fine...the reverse of yesterday.

In any case, I'll finish up today by outlining the code I wrote to produce the diagram above (which then required lots of fussing to make the pixel grid work out right. You like it good? I hope so. See how how it matches the coordinate pairs data in the left column: it had better match since the data and the graph were produce simultaneously.