Imagery

This post has been in my drafts for a while. I wanted to share it as it seemed to be a theme I unknowingly explored. And here I thought I was bad at sticking to one subject or concept….

Enjoi.

Reverse Transcriptase

I like small things. I like the things that affect us and we can’t see. It amazes me that viruses, bacteria, living and non-living entities which we can barely see can coexist with us, or really ruin our day.

The CGSociety is sponsoring a challenge put on by Autopack, the autoPack Visualization Challenge.
I do plan on submitting an image to the challenge, but I mainly used this as inspiration for my animation this semester. Originally I wanted to depict the entire life cycle of HIV. So I started storyboarding:

After I wrote and drew the steps out I realized this was a lot of information to cover in a 30-60 second animation.  I am still learning animation techniques and to learn all of the techniques in three months would have been pretty ambitious ( especially with project research in the background).  So It was agreed that I should focus on a part of the viral life cycle.

 

At this point I started thinking about HIV, and pondered “what really makes HIV so dangerous?” The answer is in the proteins HIV caries with it. One of these proteins is reverse transcriptase (RT). HIV uses RNA to carry genetic information. In order to infect its host HIV needs proteins like RT to make DNA out of the RNA. The new DNA is later integrated into the host DNA by Integrase (a character for separate HIV tale).

My main character, HIV Reverse Transcriptase, isn’t perfect. A lot of the time it screws up. One may wonder how this messy virus lives so long and infects so many. In fact, the constant mistakes made by RT works to HIV’s advantage. This ever so slightly will modify the envelope proteins, making them unrecognizable to the body’s immune system.

 I need to storyboard again and figure out exactly what will happen throughout the animation. But at least for now, I have my star.

HIV Reverse Transcriptase with RNA/DNA
pdb model 2hmi

Taxonomy Interactive – Organizing the chaos

For information aesthetics we are coding our own program which reads a dataset and displays it to the user.  I chose to collect taxonomy information from the Integrated Taxonomic Information System. The dataset I collected consists of a list of names starting with the Kingdom ‘Animalia’ down to all Genuses ( I was having trouble downloading a list which included all species, probably because it would be huge). To give more context to the dataset I manually input the levels of ‘Life’ and ‘Domain’.  Then I parsed the data ( which was .csv) into strings representing the paths which looked like:

‘Life>Eukaryota>Animalia>Chordata>Aves>Strigiformes>Oscines>Podargidae>Batrachostominae’

Which represents the taxonomic levels:

‘Life>Domain>Kingdom>Phylum>Class>Infraclass>Order>SubOrder>Genus’

The path is then interpreted and presented to the user as circles which can be moved on the screen. Right now, the placement of circles has no correlation to relationship. Just the idea that larger circles represent more abstract groups of organisms (‘Life’ followed by ‘Domain’) while smaller circles represent more defined groups ( ‘Genus’ ). When the user hovers over a circle the lowest level name of that path is displayed, while the entire path is displayed at the top of the screen.

The program you see above only runs a sample of my dataset, as the entire taxonomic list is ridiculously extensive.

So for my final…

…I decided to continue with this project. I think its great I was able to parse the data, but this isn’t really how I want to display it. I want some sort of relationship between each node and the path be evident. So my goals for the final project are to:

• Make the ellipses into spheres, so they are more representative of a 3D space.
• Allow the user to rotate in the 3D space.
• Display one level at the beginning of the application, then display the contents of a level when a node is clicked (if you click the node again its contents will hide, i.e. a toggle effect).
• Arrange the positioning of the nodes, so that appropriate nodes are within proximity of each other ( no longer random placement).
• Check and ensure the nodes are not overlapping.

If I have time left, I might try to implement a slider that allows the user to quickly go from displaying just the ‘Life’ node to all nodes… I just really like the idea of having a center node and then others radiating out from this node. I am not sure if I want connection lines. While I think they give better context, I enjoy the chaos within the organization. Because ultimately taxonomy is just a way for us to organize and comprehend the chaos.

So to get started I went through a tutorial by Jer Thorp on Spherical Coordinates:

This image links to screenshot of me playing the interactive

This image links to screenshot of me playing the interactive

I used spheres instead of ellipses ( as he does ). I like how the nodes move along spherical paths (oppose to moving linearly in x, y, z space) and I am hoping this tutorial will help me keep the nodes realative to each other , using undrawn spheres as boundaries.

If anyone has other suggestions for how to improve the first iterative, please share :D! By the end of the semester you should see some progress.

Origination

Origination == Generating an Original Idea;

This is sometimes the most stifling part of the process. When the only limitation is “visualize a physiological process”, your choices still seem endless. With so much interesting information to choose from, I usually find it hard to stick with a topic. For two of my classes my final assignment is to illustrate a whole, or part of a, physiological process. This post is of sketches for each class.

–Illustration Techniques —

The final will be painted in Photoshop or Corel painter. The focus is to use color to define form and present a mood. I chose the release of Epinephrine and Norepinephrine from Chromaffin cells in the Adrenal medulla.

–3D–

For my 3D class the objective is to build, texture, light and composite render a 3D environment of the process or event. While we had to opportunity to pick the same process, I chose something different. It took me a while to come up with an idea I liked. What I struggled through most was ‘seeing’ microscopically.

I finally chose these little guys:

Giardia Intestinalis.  Infestation of the bacteria occurs because it is somehow ingested in cyst form. Once the cyst gets into an the small intestines, conditions are and the cyst’s outer shell breaks down. The bacteria then become active. Giardia intestinalis have optical discs which adhere them to the endothelial lining of an animal’s small intestines. They then outcompete the host’s absorption of nutrients. Symptoms include but are not limited to diarrhea and vomiting ( doesn’t sound fun ).

The following are sketches that I am going to keep rendering. I want to get a better understanding of the form of the bacteria, and how they interact with their environment. Once I pin down a sketch I will generate some value and color schemes to get a better idea of what I want going on in the scene.

Html5 Mini Adventure

I have been thinking a lot lately about making an interactive by creating imagery in Adobe Illustrator and exporting it to a HTML 5 canvas tag. Then using JavaScript to add functionality. And I finally had some time to download and try out the Plug-ins! Check it out!

It may look like ‘just an image’ but it is not. If you right-click ‘inspect element’ you will see it is a canvas tag. If you look in the head tag  you will see the javascript used to draw the element on the page. 😀 I pretty excited. Nothing moves yet so it is pretty boring, but this is the beginning to wonderful interactive anatomical adventures! Once I figure out how each layer and each object is labeled, it should be pretty straight forward to add functionality.

One is provided by adobe, but the one I just used is by visitmix.com. When you scale the page ( ‘Command’/’Ctrl’ + ‘+’) the image does not scale with it. The Adobe Plug in is supposed to export images that scale.

I will keep you updated as I get more time to implement the other plug in, and as I get to add some functionality. But in the mean time feel free to check out the plug-ins:

Adobe .ai to HTML5

VisitMix .ai to HTML5

( And in case you haven’t noticed, I have a nice reference page building up)

The Uterus

Invertebrates produce motile spermatozoa and non-motile spermatozoa, giving their sub-phyla the flexibility to produce sexually or asexually. Vertebrates produce sexually. Non-mammalian vertebrates posses an oviduct. Being mammalian vertebrates, the females in our species possess a uterus (plural uteri or “uteruses”), also known as ‘the womb’. It is a strong and flexible organ, with thick muscular tissues. It is a place specifically developed to hold and nourish the fertilized ovum.

The uterus is pear shaped and located inside the pelvis. It is dorsal and slightly rostral to the bladder. The pelvic diaphragm sits below the uterus, supporting it. Other support is gained from ligaments suspending the organ.

I am choosing to illustrate the uterus because of its unique round shape, the fact it is accompanied by  small tubes (fallopian tubes). Also becasue it is suspended by mesenteries, which should provide some neat textures to explore in pen and ink.

Sketches to come soon!

New Beginnings & Technologies

In the beginning of every semester I always feel excitement for the things to come. It is only two weeks into the semester and most of my classes have already covered much material.  I am taking Illustration Techniques, Computer Viusalization ( to learn how to deal with more 3-dimensional media), Haptics and Augmented Reality (to learn C++ and simulation of touch technologies), as well as Business and a Research class. I am also working on campus with the Office of Marketing and Communications. I have left myself with time to be bored.

Illustration Technique assignments are due just around the corning. After this weekend I will be able to show some sketches. Our first assignment is to teach the class how to articulate with line using pen & ink, as well as digital media.

In Computer Visualization, we are being taught in Autodesk’s 3d Studio Max. I have some Maya experience, so it has been a task just to change hot keys muscle memories. Within the past two weeks the class has already modeled a syringe and red blood cells. While I have done some 3d modeling, I am eager to learn more. My texture and lighting books recently arrived, so hopefully over the weekend I can makes some time with them as well.  I also want to learn about textures, but I am a little fearful of unwrapping UV maps (Oh the memories of frustration).

Business class will be good in that it will hopefully provide me insight for how to properly handle the necessities that no artists enjoys, dealing with clients. Through recommendations ( toggl.com ) and on my own accord (rememberthemilk.com) the beginning of this year seems to be forcing me to document my work. These are programs which help prioritize and time manage my tasks. While the process seems a little neurotic, I am starting to see a benefit.

And while I may not be able to fit in time over the course of this semester, something I want to learn more about is developing tablet applications.

Personally, I am an android :, so enjoy:

Ideas

I find it beneficial to keep an eye on what others are doing. Personally, doing this helps me keep ideas fresh and discover new resources.  Sometimes I find it also makes me think about a subject in a different light.

A few years ago, my medical microbiology professor from previous schooling introducd TED talks to my class (she was a huge fan). I have found this a great place to go and see what others do in related and unrelated fields of study. Also, this is a collaborative environment where individuals can become a part of the community and share ideas about improving the world.

The most recent TED talk I found discusses how medical imagery is currently produced and used:

I think this talk does a good job of introducing the basics of how this imagery  can be created, used and examined.

Designing A Website — What To Think First.

The World Wide Web and web technologies have only been around for a short time ( in comparison to human existence), but they have developed quickly. So it can be a little overwhelming when someone, new to the media, wants to create a web-page. When looking up HTML and CSS, a lot of the information pitches new developments such as HTML5, CSS3 & JavaScript of JQuery functions. All the things a developer ‘needs’ to make the best portfolio they can. While these tools may help, they are not necessary (especially at first). You have to be willing to start with the basics.

But today I don’t want to start with the basics. Today I want to discuss what you start looking at before you look at and learn code. In the BVIS program we need to create a website as a final project, and while I have done this before, and have a feel for the beginning process, I realized not a lot of online material teaches the process before the code.

What am I Making?

We just established we want to build a website, but you can have more then one type of website. For my purposes I will be creating a portfolio website. But maybe you are making a website to advertise a business, to sell a product, to share news, fashion or general information. Regardless of what you make this is where you start to brainstorm about your needs, your audience and functionality.

 

 

 

Site Map

Once you develop a general understanding of  your needs,  you can lay out a Site Map. A Site Map allows the designer (or programmer) to understand the relationship of each of the pages.  Below you can see my site map for the portfolio website I plan to create. The Home page will have a navigation bar which will link to four pages, 3 internal and one external link( ‘BLOG’ ) . The sitemap is supposed to allow for visualization of depth of within your website.

Laying Out Relationship of Pages

Do you have a website you want to look at to understand this better? Try xml-sitemaps.com. I was able to generate a sitemap for the site where my future website will be posted. This program generates a list of the pages and the subsequent directories with each page inside ( starting from the root of a site). Some people may understand this text list more then then above box method. Which ever way you lay out the information, make sure you understand how one page will relate to another. This is important before setting up links within your site.

Function

Most likely you thought about functionality before setting up your site map, but double check it. Before you set up your wire frame make sure you know what each page is going to be doing. How do you get to it? Is it located within the correct hierarchical format? Look at what groups of information have together. Do you have too much grouped together, if so spread it out and create more pages. Do you have too little grouped together, try condensing your information? Do you need more information, less information?

Wire-Frame

Now you can start to visually layout the site. Over all you want all of the pages to fit the same layout to make sure they flow, and your audience ( the user ) always intuitively knows where they are. There is no style at this point, just some spacing and understanding of where functional things go ( buttons) and where content will be places ( Main Tout and Side Tout).

The second wire frame has a little more detail to show the relation of how a subsequent page will follow the basic wire frame.

Once you have created your wireframe, you may realize that your site map has to much or to little information, or maybe there is something that you need to change. Don’t be afraid to go back and REVISE!

 

You Have Done It!

I am sure you are anxious to build you site, and while you are one step closer, you will probably want to think about design next.  What type of color scheme do you want to use? What font? Do you want any borders or patterns, and textures. But we will save that for later.
(Side note: While it is good to plan everything out (functionality and design), you could technically take the time now to build the over all site structure. Use W3Schools and other resources to create your site structure. When you build a site you will code the structure first and style second anyway. . . Yeah I know, I just contradicted myself. This process is difficult to make linear.)

There are other resources out there for planning the design of your website. Some of these links will ask more questions that may help to improve the functionality of your site:

• How to plan your website
• Beginner’s Guide to HTML5 &CSS3 (even though I said you shouldn’t just jump right in… I know some of you will be rebellious)
• WebsitePlanning (These are videos to help you plan, & it is free to register and watch)

This process is very much trial and error, definitely take the time to plan out your website. And save your process. Once you build your website you may realize you need to change a part of your site map. But don’t get discouraged, that is all a part of the learning process!

Good Luck & Happy Planning!