Planning some interviews

I have been working on writing interview questions that we will ask Maltese people when we visit. We just got approval to re-use the questions from last year, which we will ask average people who live or work on sites where cisterns are located. The questions relate to Maltese culture, historical cistern usage, and the person’s knowledge about water shortage and climate change issues. I have also written another set of interview questions; one for water and/or cistern experts, and one for students and faculty members studying engineering. We’re hoping to get approval for these questions soon, as well!

I’m hoping to progress more on the website once we choose a logo for the Water & Society project. We’ve narrowed down our selections, but making a choice has proven to be very difficult since so many people are giving input. Updates on that coming soon...

Vanessa and I are going to work more closely together soon, since we'll be creating our first Teaching Resource Module for the website! We're excited to finally have something cool on the website to show for the work we've done so far. We're meeting soon to start planning!

-Amanda

Just One More Bug...

We have some success! At first there were issues trying to get the "rock" texture to display (bright green part below). Zoe helped me realize I had the wrong parameter for the vertexAttribPointer, where I was supposed to pass three for the x, y, z but I was passing the number of vertices instead.

I was still struggling until I realized the vec3.create([x,y,z]) had the brackets. Below are some different shots of the cistern with the lighting.

Per Vertex Shading

Per Fragment Shading

Trying to do some debugging. These are just the normals. I'm not really sure what is wrong here!

Small Progress

Good news is I got it to display! Bad news is it is still not quite right. I have no errors, but I have 274 warnings and only the water displays correctly.

Looks fun, right? It is pretty much something wrong with the vertexAttribPointer, so once that's fixed the other errors should clear up. Here is what gets displayed:

I spent all weekend trying to fix it. At least it's displaying now, that gives me a little hope :). I'm aiming to get it working in the next week or two.

On a side note, here is how I calculated the normals for the shading:

            v1 = vec3.create(((x[vals[1]-1])-(x[vals[3]-1])),

               ((y[vals[1]-1])-(z[vals[3]-1])),

               ((z[vals[1]-1])-(z[vals[3]-1])));

            v2 = vec3.create(((x[vals[2]-1])-(x[vals[3]-1])),

               ((y[vals[2]-1])-(z[vals[3]-1])),

               ((z[vals[2]-1])-(z[vals[3]-1])));

            v1 = vec3.normalize(v1);

            v2 = vec3.normalize(v2);

            vector = vec3.cross(v1, v2);

            rockVertexNormals.push(vector[0]);

            rockVertexNormals.push(vector[1]);

            rockVertexNormals.push(vector[2]);

-Vanessa

Example Code to Scan in the Vertices

Since I haven't had anything cool to post recently due to the delays in the lighting (still working on it!!), I figured I would post the code that scans in the vertices. So, this function is called handleLoadedWorld and takes data as a parameter. Data is the scanned file with the vertices and texture coordinates. As you can see we need to split the data into an array of "lines" and split it at each new line.

We have vertexCount to keep track of the number of vertices, vertexPositions to keep track of each vertex, and vertexTextureCoords to keep track of the texture values.

Each set of vertices is scanned into x, y, and z or textureX and textureY depending on if it is a point or a texture coordinate.

    function handleLoadedWorld(data) {
        var lines = data.split("\n");
        var vertexCount = 0;
        var vertexPositions = [];
        var vertexTextureCoords = [];
        var x = [];
        var y = [];
        var z = [];
        var textureX = [];
        var textureY = [];
        var index = 0;
        var textureIndex = 0;

        for (var i in lines) {
            var vals = lines[i].replace(/^\s+/, "").split(/\s+/);
            if (vals.length == 4 && vals[0] == "v") {
               // Scan vertices
               x[index] = parseFloat(vals[1]);
               y[index] = parseFloat(vals[2]);
               z[index] = parseFloat(vals[3]);

               index += 1;
            }
            else if (vals.length == 3 && vals[0] == "vt") {
               // Scan texture coords
               textureX[textureIndex] = vals[1];
               textureY[textureIndex] = vals[2];

               textureIndex += 1;
            }
            else if (vals.length == 4 && vals[0] == "f") {
               // It is a line describing a vertex; get X, Y and Z first
               vertexPositions.push(parseFloat(x[vals[1]-1]));
               vertexPositions.push(parseFloat(y[vals[1]-1]));
               vertexPositions.push(parseFloat(z[vals[1]-1]));

               vertexTextureCoords.push(parseFloat(textureX[vertexCount]));
               vertexTextureCoords.push(parseFloat(textureY[vertexCount]));

               vertexPositions.push(parseFloat(x[vals[2]-1]));
               vertexPositions.push(parseFloat(y[vals[2]-1]));
               vertexPositions.push(parseFloat(z[vals[2]-1]));

               vertexTextureCoords.push(parseFloat(textureX[vertexCount+1]));
               vertexTextureCoords.push(parseFloat(textureY[vertexCount+1]));

               vertexPositions.push(parseFloat(x[vals[3]-1]));
               vertexPositions.push(parseFloat(y[vals[3]-1]));
               vertexPositions.push(parseFloat(z[vals[3]-1]));

               vertexTextureCoords.push(parseFloat(textureX[vertexCount+2]));
               vertexTextureCoords.push(parseFloat(textureY[vertexCount+2]));

               vertexCount += 3;
            }
        }

The above code will first define x, y, z, and textureX and textureY. Then, it will go through as the vertices are mapped together and push them onto the vertexPositions array, and similarly the textures are mapped together on the vertexTextureCoords array. Continuing from where we left off...

        worldVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexPositionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositions), gl.STATIC_DRAW);
        worldVertexPositionBuffer.itemSize = 3;
        worldVertexPositionBuffer.numItems = vertexCount;

        worldVertexTextureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, worldVertexTextureCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexTextureCoords), gl.STATIC_DRAW);
        worldVertexTextureCoordBuffer.itemSize = 2;
        worldVertexTextureCoordBuffer.numItems = vertexCount;

    }


Then we create the vertex buffer and bind the buffer and add the data we just scanned in. We also specify how "big" each vertex is (which is 3 for x, y, and z) and define the vertexCount. We do the same for the texture buffer, but the texture size is only two this time. Hopefully my explanation helps and you enjoyed seeing some example code :).

 -Vanessa

We have a start on the site!

Hello!

It's been a while since I've updated you with my progress. I've been doing a lot of reading on Malta's history, culture, water availability, climate change threats, etc...all to prepare me for creating the teaching modules on the website. It's been really interesting and fun to learn about. I'd say I'm on my way to becoming a Malta expert.

As far as the website goes--there's progress! We are hoping to have our own virtual server to run our Omeka site soon, but in the meantime, the test server is working just fine. We are still in the process of choosing a finalized logo and design concept for the site, after having a few dozen Graphic Design students submit suggestions. I created a survey for other members of our ICEX team to help decide, but no conclusions have been made yet. Until we decide on something, I have been working on a temporary design so our website doesn't look too "under construction." Here's a screenshot of the home page:

So far, I've created some different pages to break up the site. I wrote and published the "About The Project" page, which has sections on the Water Ways project, ICEX program, the People involved, and Funding information. 

I've created the pages for Our Research and Teaching Resources, but haven't yet written/compiled the information that will go into these sections of the website.

The website theme I'm using was originally created by someone else for Omeka, and I've been trying to go into the code and mess around to see what I can do. It's definitely a learning experience and I'm looking forward to see what I can turn the website into.

Next steps will be to choose a logo for Water Ways and decide how we want users to navigate through the website. I'll also start working on a teaching module. I'll keep you posted--my New Year's Resolution is to update more often.

-Amanda

Slow Progress, But an Updated User Interface!

I have been struggling to add the shading. Each way I try it, the cistern stops displaying. I need to read some more tutorials to figure out what I'm doing wrong.

Onto the good news! I changed the way the user interacts with the cistern. I saved both ways, but I like the new way much better. The old way was like you were a person walking around the cistern. In this way, it was difficult to get a side view of the cistern and then navigate to get a top view. The arrow keys were walking in a direction and the page up/down were looking up and down. To fix this, I changed it so the cistern rotates instead of "walking." You can use the arrow keys to rotate the cistern and the page up/down keys to zoom in/out. I am going to figure out if I can get a link so anyone reading this can test out the program!

-Vanessa