Question

One example of computer-aided design (CAD) is building geometric structures inter- actively. In Chapter 4, we will look at ways in which we can model geometric objects comprised of polygons. Here, we want to examine the interactive part.

Let’s start by writing an application that will let the user specify a series of axis- aligned rectangles interactively. Each rectangle can be defined by two mouse positions at diagonally opposite corners. Consider the event listener

canvas.addEventListener("mousedown", function() {
  gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
  if (first) {

    first = false;
    var t1 = vec2(-1 + 2*event.clientX/canvas.width,

                  -1 + 2*(canvas.height-event.clientY)/canvas.height);

}
else {

    first = true;
    var t2 = vec2(-1 + 2*event.clientX/canvas.width-1,

                  -1 + 2*(canvas.height-event.clientY)/canvas.height);
    var t3 = vec2(t1[0], t2[1]);

    var t4 = vec2(t2[0], t1[1]);

    gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*(index+0),
                     flatten(t1));

    gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*(index+1),
                     flatten(t3));

    gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*(index+2),
                     flatten(t2));

    gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*(index+3),
                     flatten(t4));

index += 4; }

});

and the render function

function render()
{

  gl.clear(gl.COLOR_BUFFER_BIT);
  for (var i = 0; i < index; i += 4) {

    gl.drawArrays(gl.TRIANGLE_FAN, i, 4);
  }

  window.requestAnimFrame(render);
}

We use the boolean variable first to keep track of whether the mouse click is generating a new rectangle or generating the diagonally opposite corner of a rectangle from the previous mouse click. The position of the mouse from the first click is stored. When the second click occurs, the two positions are used to compute the positions of the two other vertices of the rectangle, and then all four positions are put on the GPU. The order in which they are put on the GPU is determined by the render function’s use of a triangle fan, rather than the triangle strip we used in previous examples. We will see the advantage of this form when we extend our example to polygons with more than four vertices. The rest of the program is similar to our previous examples.

We add a color selection menu to the HTML files:

<select id="mymenu" size="7">
<option value="0">Black</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option>
<option value="4">Blue</option>
<option value="5">Magenta</option>
<option value="6">Cyan</option>
</select>

The event listener for this menu simply stores the index of the color, thus making it the current color that will be used until another color is selected. Here is the code for color selection:

var cIndex = 0;
var colors = [

  vec4(0.0, 0.0, 0.0, 1.0),  // black
  vec4(1.0, 0.0, 0.0, 1.0),  // red
  vec4(1.0, 1.0, 0.0, 1.0),  // yellow
  vec4(0.0, 1.0, 0.0, 1.0),  // green
  vec4(0.0, 0.0, 1.0, 1.0),  // blue
  vec4(1.0, 0.0, 1.0, 1.0),  // magenta
  vec4(0.0, 1.0, 1.0, 1.0)   // cyan

];

var m = document.getElementById("mymenu");
m.addEventListener("click", function() { cIndex = m.selectedIndex; });

The color index can be used in multiple ways. If we want each rectangle to be a solid color, we can set up a vertex array for the colors and then augment the event listener for the vertex positions by adding the code

gl.bindBuffer(gl.ARRAY_BUFFER, cBufferId);
var t = vec4(colors[cIndex]);

3.10 Building Models Interactively 127

128 Chapter 3

Interaction and Animation

gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec4’]*(index-4), flatten(t));
gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec4’]*(index-3), flatten(t));
gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec4’]*(index-2), flatten(t));
gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec4’]*(index-1), flatten(t));

Note that this code is coming after we have already incremented index when we put the four vertex positions on the GPU. If we want each rectangle to be displayed in a solid color, we could store these colors in an array; then in the render function we could send each polygon’s color to the shaders as a uniform variable. Using a vertex array does, however, let us assign a different color to each vertex and then have the rasterizer interpolate these colors over the rectangle.

Now let’s consider what changes are needed to allow the user to work with a richer set of objects. Suppose that we want to be able to design a polygon with an arbitrary number of vertices. Although we can easily store as many vertices as we like in our event listener, there are some issues. For example,

1. How do we indicate the beginning and end of a polygon when the number of vertices is arbitrary?

2. Howdowerenderwheneachpolygoncanhaveadifferentnumberofvertices?

We can solve the first problem by adding a button that will end the present polygon and start a new one. Solving the second problem involves adding some additional structure to our code. The difficulty is that, while it is easy to keep adding vertices to our vertex array, the shaders do not have the information as to where one polygon ends and the next begins. We can, however, store such information in an array in our program.

We will make use of gl.TRIANGLE_FAN in the render function because it will render a list of successive vertices into a polygon without having to reorder the ver- tices as we did with gl.TRIANGLE_STRIP. However, having all the triangles that comprise a polygon share the first vertex does not lead to a particularly good trian- gulation of the set of vertices. In Chapter 12, we will consider better triangulation algorithms.

First, we consider a single polygon with an arbitrary number of vertices. The event listener for the mouse can add colors and positions to vertex arrays each time the mouse is clicked in the canvas.

canvas.addEventListener("mousedown", function() {
  var t = vec2(2*event.clientX/canvas.width-1,

               2*(canvas.height-event.clientY)/canvas.height-1);
  gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);

  gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec2’]*index, flatten(t));

  t = vec4(colors[cIndex]);
  gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
  gl.bufferSubData(gl.ARRAY_BUFFER, sizeof[’vec4’]*index, flatten(t));

index++; });

We add a button

<button id="Button1">End Polygon</button>

in the HTML file and the corresponding event listener

getElementById("Button1").onclick = function() {
  render();
  index = 0;

});

and the render function

function render()
{

  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.drawArrays(gl.TRIANGLE_FAN, 0, index);
}

to the application file.
As simple as this code is, there are a couple of interesting points. Note that

the render function is called from the button listener, which then resets the index that counts vertices. We can change the color from the color menu between adding vertices. The rasterizer will blend the colors for the next couple of vertices when a color is changed.

To get multiple polygons, we need to keep track of the beginning of each polygon and how many vertices are in each one. We add the three variables

var numPolygons = 0;
var numIndices = [ 0 ];
var start = [ 0 ];

The variable numPolygons stores the number of polygons we have entered so far. The array numIndices stores the number of vertices for each polygon, and the array start stores the index of the first vertex in each polygon. The only change we have to make to the mouse listener is to increase the number of vertices in the present polygon

numIndices[numPolygons]++;

The button callback

getElementById("Button1") = function() {
  numPolygons++;
  numIndices[numPolygons] = 0;
  start[numPolygons] = index;

  render();
});

starts a new polygon before rendering. Finally, the rendering function is

3.10 Building Models Interactively 129

130 Chapter 3

Interaction and Animation

function render()
{

  gl.clear(gl.COLOR_BUFFER_BIT);
  for (var i = 0; i < numPolygons; ++i) {

    gl.drawArrays(gl.TRIANGLE_FAN, start[i], numIndices[i]);
  }

}

The programs cad1 and cad2 on the website show some of the elements that go into a simple painting program; cad1 draws a new rectangle specified by each pair of mouse clicks, and cad2 allows the user to draw polygons with an arbitrary number of vertices.

The above code is a basic layout i need to be able to create other shapes Painful Paint Programming – In the latter part of chapter 3, the “CAD” program is introduced. We are going to expand on that and make some improvements. He has provided code for a rectangle and an N degree polygon. You will add the following functionality. Allow the user to select if they want filled or outline. Allow the user to change the color (Hint: look up HTML form color input) You will have buttons (Preferably toggle inputs) to allow the user to draw a rectangle, an n-point polygon, a line, circle and a triangle. You will allow the user to draw a rectangle with the same method that he employs, however, you will draw a temporary rectangle showing the user where the first point was clicked and where the mouse cursor is. For the N-point polygon you will draw the current polygon until the user has finished. For the line you will simply select a point and then another point. (Again draw a temporary line to show the user where the line would currently be) For the circle, select the center of thecircle selecta second point to specify the radius (Again creating a temporary circle to show the user where it would be). If the circle is filled, you can use triangle fan to fill it. However, you will only want to use triangle fan on circle. For the triangle, the user will select three points to draw the triangle. (A temporary triangle will be drawn while the user is selecting the 3rd point). At anytime the user can cancel drawing an object by clicking the right button. BIG HINT: Don’t forget your data structures. Instead of using one global array of vertices, make classes for each particular type that have their own render functions which take the gl and program parameters. Once the user has finished adding the object push that object onto a list. Then call each of their render methods with the gl and program variables sent in as parameters. Minor Hint: You only clear before you start going through the list of objects, that way they all show up. You will only need to clear the screen when you are drawing the temporary outlines for the user. In this particular situation you will need a temporary array of vertices and change the vertices each frame while the user is drawing the object.

Answer 1

1.The basic this we do in RP is layering and solidifying . there are different methods to soidify and laying , each mothods give arise to new RP technique . solidifying can be done by laser U.V Lamp

2.To control what we want to generate we have to follow following steps

(a). geometric modeling defining the volume of object with the help of CAD system

(b)tessllation of geometric model , by this step object is converted into triangles and polygons to approximate is surface and distunguish the object's inside and outside surfaces

(c) slicing of the 3D model into layer to see how it looks in layers during generating 2D layers .

3. liquid , solid and powder are three matetial

4.Rapid prototyping is fast fabrication process by stacking 2D layers on layer to generate 3D models using CAD . during stacking each layer get bonded to each other and generate 3D model .

RP has many adavntages

(a) fast and accurate .

(b) no need of jigs and fixtures.

(c) minimum material wastage.

(d) good surface finish.