Year-end update

As the student researcher involved with data format and content, it was my job to create a website that featured data collected during the last few years from another program at our University, Vanessa’s WebGL 3D cistern visualizations, and a few sample educational modules for middle school through university-level educators. At the beginning of the project, I broke up my tasks into three sections that I would complete in sections throughout the school year.

For the first third of the school year, I focused on familiarizing myself with Omeka. Omeka is a web-publishing system, similar to a database, that we are using to run our website. It comes equipped with several “themes” and “plugins” to add user-interactivity to the website. I set myself up with a trial Omeka account, and downloaded and tested the functionality of over a dozen different plugins. I played around with Omeka and looked at different themes. Since I didn’t have any coding, specifically HTML, experience, this was all very new to me. Next, I started reading everything I could find about Malta until a became an expert on the country.

After I had understood Omeka more, I was ready to start with the content. I decided on the primary navigation for the website, which consists of a homepage with some pictures and descriptions, along with five main pages: About, Partners, Research, Teaching Resources, and a Contact page. After reviewing data collected on cisterns in Malta that Vanessa was using for her visualizations, I wrote the ‘About’ page and decided how to make the ‘Research’ page. The research is broken into sites we visit, data collection, and visualizations. Once Vanessa finishes her WebGL plugin, I’ll be able to include them on the visualizations page (but for now they just link to her visualizations on a different website). Next, I started with the Educational Modules. I started with the easiest first: a two-day 45-minute lesson plan for middle school Social Studies classes. Vanessa and I worked together to create the first in-class lesson, which is a fun activity that provides students with a solid background on how the history of Malta plays a role in shaping their water scarcity issues. Then I created a follow-up homework assignment using Vanessa’s WebGL cisterns, as well as a second lesson on water conservation for the following class period and a homework assignment to accompany the second lesson. Additionally, I solidified a logo design, homepage design, and “look and feel” for the site.

For the last two months, I’ve been trying to tackle editing the existing Omeka themes and plugins. I took an Introduction to Computer Programming class last quarter, and I am currently enrolled in a class where I’m learning some HTML, but it has still required a lot of outside reading and trial-and-error. Since Omeka was made to be really simple with a drag-and-drop interface, it actually makes it really difficult to edit, like to be able to add images and animation to the homepage. Finally, I was able to add a picture slideshow to the homepage, as well as a rotating cistern from Vanessa’s WebGL creation. After finally having the look for the site that I wanted, I created the second teaching module, which is aimed to be used by high school World History classes. The first in-class lesson is the same as the middle school one. For the homework assignment, students will read and answer questions about water scarcity and climate change effects from personal interviews that I conducted with three Professors at the University of Malta when I visited two months ago. 

Since we still have a month of school left, I am going to create a third teaching module for University educators that will follow similar themes of how social and environmental factors tie together to shape Malta’s future in terms of water availability and climate change effects.

Progress Throughout the Year

CREU: Final Report

When I began this research project, I had little experience with graphics. Throughout the year I have learned and experienced a great amount and have been able to work with Amanda to produce a nice website and cistern interaction program.

At first, it was a struggle to learn a completely new language that was very different from C and Java that I was used to. I spent several weeks going through the WebGL tutorials on learningwebgl.com. Once I felt more comfortable with the language, I was creating my own shapes and objects for practice before I started working with the cistern. Below are some examples of my first programs using WebGL. I practiced with shapes and texture mapping.

Finally I was ready to move on to understanding and parsing obj files. I had to figure a lot of this out on my own, and had a lot of difficulties figuring out how to map the vertices to indices to the texture coordinates. See the images below of my first attempts of loading the cistern:

At this point I had implemented an interactive camera, so the user could navigate through the cistern. My first implementation of the interactive camera was similar to a person walking around the cistern. I realized a better implementation would be the keys for rotating and the page up and down keys for zooming in and out. I adjusted my program to make the interactive camera more user friendly. Having fixed the interactive camera, I resumed my work on the obj parser. After I had the shape of the cistern was displaying correctly, my next step was incorporating the water the the base of the cistern together, and fixing the texture coordinates.

Cistern base and water separate, but loading:

Base and water together:

My last step was to add on extra features. Some of the features I added include lighting, updated textures, and increasing the speed of the program. I added functionality for the program to load all the cisterns at the start of the program, to allow for the user to easily scroll over the different cistern models and be able able to select between them without waiting for it to load. The lighting gave the cistern a more realistic look. Later, I incorporated the coordinates of Malta and displayed the locations of the cisterns that we had data for with different colored markers.

Lighting, textures fixed:

While I was working on all of this, Amanda had been building our website with Omeka. My next step has been to develop an Omeka plugin to be able to have the cistern program on the website directly. Right now I'm still learning the basics of PHP and Omeka but I hope to have the start of my plugin working by the end of the quarter. For now, my program is available at the following link:

http://users.csc.calpoly.edu/~zwood/ICEX/Cistern/shading.html. Below are some pictures of my final program:

Website home page

I've spent a lot of time working on the home page of the website...with not as much progress as I would've liked. I've been going through the theme creator's code and it's proven to be very challenging to edit. So far, I've figured out how to change the text on the homepage, but I'm still having trouble with images. I've met with a few people who are good with HTML and CSS to ask for help, read various online forums, and a Web Design book, but I still haven't quite found the solution. Hopefully I'll be able to get the homepage how I want it to look in the next week!

As far as the teaching modules, I've just about finished the first one (still waiting on someone to send me the final code for the cistern water usage simulation game so I can incorporate it.) I have my ideas all planned out for the second teaching module, so I just need to implement those.