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.

New Additions to the Program!

Much progress has been made since our last post! The website is up and running (stay tuned for a post by Amanda soon) and there have been many adjustments to my cistern interaction program.

The first update is the lighting. It now is more accurate and the cistern does not get darker as we zoom in and out. Here are some screen shots:

The next big change is a lot of re-factoring and code organization. It is now much easier to read and understand, and all the cisterns load upon the page loading. This way, the user can scroll over whichever cistern they would like to view and a preview will show up. Upon clicking the new cistern, it will load immediately instead of scanning the entire obj files again. This is of course a much better design for interacting with the cistern! Stay tuned for a post when the link has been updated to host the new additions.

Lastly, I have added code to handle GIS data of Malta. When the page loads initially, it is the map of Malta. On the map are several markers representing the locations of the cisterns. For now, they are colored differently based on the cistern location, but eventually I am going to implement "picking" so the user can click on the markers and the program will load the cistern in that location. Here are some more screen shots:

Added markers:

Cool bugs!

-Vanessa

A Start on the First Education Module

We are planning for the website have a few educational modules, and we are making some progress with the first! This first module will be geared toward 7th-8th grade Social Studies, offering lesson plans for the classroom and some online interactive activities a little further down the road. 

So far, we are just working on the lesson plan. It involves two 45 minute class periods devoted to learning about Malta’s past, present, and predicted future with regards to water and conservation techniques.

We are making great progress with the project! We have planned two major activities (one for each day) along with other class discussions that we will incorporate into the final lesson plan.

The first activity involves students developing a timeline of Malta’s major events that connect to water availability or lack thereof (model pictured above). The activity involves breaking the students into groups and assigning them a historical event or period to read about. They will then summarize the three main points and draw a picture to represent the period. Finally, they will hang the events in chronological order on a clothesline to create a clothesline timeline. As we started developing the activity further this week, we have run into some problems with connecting all of the major events in Maltese history with water. For example, the Neolithic Period (5000 BCE - 2500 BCE) is really important in Maltese history. These people were the first known inhabitants of the island, and many interesting underground temples with sophisticated engineering. After visiting the most famous of these temples, the Hal Saflieni Hypogeum in Malta a few days ago and being fascinated by the extensive architecture of these early engineers, we really want to incorporate this into the timeline activity. Here's a picture of the hypogeum we visited:

However, it's difficult to draw a clear connection to water. We are doing more reseach about a prehistoric cistern that was possibly use prehistorically in the hypogeum. Even if an event doesn't directly relate to water, there are various themes that we've identified to be indirectly related throughout history. Some themes that relate to water are cultural influences, agriculture and land fertility, population trends, trade, irrigation systems, and practices involving the importation, extraction, and purification of water. This activity aims to approach each of these themes and touch upon how it relates to and impacts the historical and current usage of water in Malta.

Our second activity relates directly to cisterns and water consumption, and allows for students to compare and contrast various water conservation techniques. We have been working with Andrew for this activity because he is developing a WebGL program based upon Vanessa’s 3D simulation. His activity allows for students to select the number of people in their family, if they have a dishwasher, and other similar selections related to water. While it is still in development, we are working with him to correlate our activities so that a possible online homework assignment can be supplemented to our lesson. With the in class activity, students will need to calculate their water usage with basic math through a series of questions. Based on the students water usage, they will take a certain number of water droplets from the pile in the cistern.

It will clearly be more complex than the picture above...but it gets the idea across, right? We want the students to be able to identify their water usage and be able to make decisions on water conservation techniques to preserve the water stored in their cistern (especially during dry months). More updates on this coming soon!

-Vanessa & Amanda

Our First View of a Real Cistern!

Today was our first day of gathering data from the cisterns. We took a ferry to the Gozo fields and were able to successfully obtain two cistern mappings. The euphoria and excitement levels were very high today, and we had an interesting day of rain, makeshift shelters, and even seeing a fish!

We began our journey at 7:30 AM this morning and we got back around 5 PM. We took a bus to the ferry, and then a bus again to the Gozo fields.

Ferry from Malta to Gozo

The view was beautiful, there were luscious green fields and flowers all around us. We were thrilled to get our first view of a real cistern!

Our First Experience in the Gozo Fields

Before we got settled in, we had to take a "rainbow" picture. 

ICEX Team (minus me, Jane, and Spencer) 

It was raining when we arrived so we had to brainstorm ways to protect the generator. Luckily, there was a shed with metal scraps and wood pieces so we made a makeshift shelter! We originally set up our control box inside a nearby shed, but when it stopped raining we relocated to be closer to the cistern.

Makeshift Shelter for Generator

While some were setting up the equipment, Jeff was helping Amanda and I set up the log books. We keep one log book for drawings of the sonar scans and the ROV heading.

Setting up Log Books

 Here is the outside of the first cistern we mapped. The cistern was circular and we took several scans at the different levels. The cistern appeared to taper as we moved up the cistern.

Gozo Fields Cistern #14

 Everyone was working hard to help the cistern mapping go smoothly, and it did! Our research partner, George Azzopardi, was very interested in determining if two of the cisterns were connected. We were able to find an interesting passageway in the direction of the projected cistern. The passageway was towards the upper part of the cistern and wasn't full of water, so we were unable to determine a full path to the adjacent cistern. It will be exciting to see how the sonar readings turn out!

Overview of the Group

Log Books all Set Up!

Setting Up

Deploying the ROV

And last but not least, we spotted a fish in the second cistern! The picture from the GoPro didn't come out that well but tomorrow we are going back to the Gozo fields and I am hopeful we will spot another fish. A fish was very unexpected to see in a cistern and I'm curious as to how it got there!

Super Cool Fish

Today was an amazing first day of mapping the cisterns and I am looking forward to going back out tomorrow! I'm currently working on adding more cisterns to the WebGL code and those should be up and running in the next few days!

Update on Cistern GUI & Lighting and Intro to Teaching Module

Here is an update on the 3D data visualization project! I have been working on fixing the lighting, and I also added functionality to select between the different cistern models. Available models are: M'dina Cathedral Sacristy, Case Cutietta, House Ta'anna, and Convento Dei Cappuccinni.

Here is a live link: http://users.csc.calpoly.edu/~zwood/ICEX/Cistern/shading.html but it does not include the updated lighting code as of now. It will be updated soon!

If you have Safari and the link says “Could not initialize WebGL” refer to the following steps:

1. In Safari, open the Safari menu and select Preferences.

2. Then, click the Advanced tab in the Preferences window.

3. Then, at the bottom of the window, check the Show Develop menu in menu bar checkbox.

4. Then, open the Develop menu in the menu bar and select Enable WebGL.

Here are some screen shots:

M'dina Cathedral Sacristy

M'dina Cathedral Sacristy

House Dar Ta'anna

Convento Dei Cappuccinni

Case Cutietta

Case Cutietta

I have added functionality to remove the water, the textures, and the lighting as desired by the user. My next task is to add an overview of Malta, and allow the user to see the overview of the location of the different cisterns, and then be able to select which one they want to view. I am very excited to get started on this project and I look forward to sharing the results! This is going to be my final project for our graphics class.

Amanda and I are working to develop a teaching module that relates to the history of water in Malta, and explains the importance of water conservation and various conservation techniques. We have created two activities that will be part of our two, 45-minute lesson plans that will be available on the Water Ways website!

The first activity is called Clothesline Timeline of Malta’s History with Emphasis on Water and Society. The students will be given a few paragraphs on different topics about Malta's history. A few of the topics include the Knight's of St. John, French occupation, and World War II. We talk about the history as well as more recent water events. The students will then summarize the topic with a few sentences and pictures on a piece of paper, including the name and date of the event. These papers will be put together on a clothesline or string with clips attaching the papers in the order the events occurred. The students will then introduce the topic they read to the entire class so everyone can learn about all the different topics.

The second activity is called the The Effect of Water Scarcity in Malta. Students will be divided into groups, which will be called “neighborhoods.” In each neighborhood, the students will have a set amount of paper water droplets representing their water supplies. The students will be given a sheet which allows them to select how often they use water (from showering, gardening, etc). They will then have to calculate how much water they use per day and determine if between their neighborhood they will have enough water in their supply. Since the activity focuses on Malta, water shortages will be faced. The students will have to brainstorm different water conservation techniques as well as different water collection techniques. The students will have a follow up homework assignment that provides data from water usage and consumption in Malta.

The learning objectives for this activity are as follows:
1. Further students understanding of water scarcity in Malta
2. Help students realize the importance of water preservation
3. Understand the effect of personal actions with relation to the water supply

Andrew is going to make a graphical model of this activity as part of his final graphics project, so we are hoping to add this as an optional online or take-home activity for the students.

Our activities will be combined with homework assignments and descriptions for the teachers. This teaching module is part of our final project for our global engineering course. Amanda and I are excited to continue our external research and learn more about Malta as we get further and further along with our project.

-Vanessa