August 2011 Archives

Wow! Gorillas in Bristol

| No Comments | No TrackBacks
Wow! Gorillas is an outdoor art event featuring over sixty painted gorilla sculptures throughout Bristol. The gorillas have been placed in Bristol for the summer, and their last day will be on September 6th. (After September 6th, they will all be shown on display in Bristol Zoo.) In short, Wow! Gorillas is a charity event, and it has been brought together to celebrate the 175th anniversary of the Bristol Zoo. Wow! Gorillas aims to provide funding for gorilla conservation (and education about gorillas) and to raise funds for a local Bristol charity. The event brings community, business, and the arts together. The gorillas have been painted by local artists. 

Last year, London hosted a similar event for elephant conservation, and Bath sponsored a lion conservation event with near life-size sculptures of the animals around the respective cities. (I blogged about these here: Spot the Lions in Bath and Parading Artistic Elephants in London.)

I visited the gorillas in Bristol at the weekend. Fortunately, the weather was warm and sunny, despite a couple of quick downpours; however, cupcakes were devoured during this time at a lovely cupcake shop near the cathedral. Many other families, groups, and couples had the same plan to go gorilla-spotting. Some cycled, and others walked, and many drove to the ones further afield; it was a great way to see the city and to get some exercise. Both children and adults were drawn to the painted gorillas, and locating them was addictive. Also, strangers were quite chatty with others on the same mission.

As an artist, I appreciate art bringing the community together and educating and supporting a good cause. With so many others visiting the gorillas, it really does show that the community are interested in the arts. I was also glad to see that many of the sculptures were not badly damaged; some had been written on or chipped, but overall, they seem to be mainly unharmed.

In addition to bringing the community together, technology has also been brought together to make the gorilla-searching even more enjoyable. A mobile application can be downloaded to track the gorillas via GPS technology and to allow the user to mark them off the list when the gorilla is discovered. A photograph can also be taken with the device, which will upload the image with the information about the specific gorilla. The gorillas can only be marked as discovered in the application when the mobile is within a certain distance so that users do not 'cheat'. The ability to follow the gorilla trail on a GPS application made the process easier and more enjoyable, with the ability to plot which gorillas still need to be found on the application's map. 

Last year, the Bath lions used a mobile application, but it was not nearly as advanced and it only plotted the images of the lions on a map without GPS based on the user's location, so this is definitely a step up and nearly everyone was using a mobile device to photograph the gorilla.
 
A few photographs of Wow! Gorillas are below, and more information about them can be read at: http://www.bristolzoo.org.uk/wow-gorillas

wowgorillas.jpg
I love these miniature sculptures and this mug, made by Jen Ray. (Jen sells her items on Etsy at http://www.etsy.com/people/corduroy.) Who would not want to have a cute mug that wants to "zap the bag things" away when you're having a bad day? I want one of these! The miniature bunny with golden pants is also adorable, and Jen's listed a blog for one of her action bunnies, created by one of her fans. The bunny is photographed in amusing situations.

Read the blog here: http://nunekanin.tumblr.com

Check out Jen's Etsy shop here: http://www.etsy.com/people/corduroy

jenray.jpg
One of my main interests is travel, so I wanted to use this to create a wedding theme. Each table was named after a city that we visited as a couple, and I created name tags from paper "luggage tags" that I purchased in a craft store. Leftover scrapbooking paper was used to decorate the end of each tag, and each table had its own theme and paper. Personalised silk fan favours were provided for the guests, and the name tags were placed on top of these. This was a simple and creative idea that was quick and easy for me to do with limited time and resources. It was also another gift that the guests could take away with them to remember the day. One of the place settings is photographed below.

placesettings_wedding2.jpg

Our tables looked lovely with the blue silk hand fans and the name tags, as detailed in the photograph below. The cornflowers placed in Mason jars on each table looked amazing; I wish that I had gotten more photographs of these table settings and the decorations.

placesettings_wedding.jpg

Improved Blog

| 1 Comment | No TrackBacks
It has been a long time coming, but I have at last spent some time sorting out my blog on the new web server. Work still needs to be done on it, and the styling will be taking shape over the coming weeks. However, I feel that it is best to get it out there in its 'default' and blank canvas state. Now that the wedding is out of the way, I can spend a little bit more time on this project and other projects. Feel free to send me a message.

Wedding Flowers: Cornflowers

| No Comments | No TrackBacks
In a previous post, I displayed several photographs of my favourite flower (cornflowers) that were used in floral displays. Now that the wedding has come and gone, I have some photographs of my own. Nearly all of these cornflowers were home-grown in the garden. They were combined with cream roses to create the displays and bouquets. 

cornflowerboquet_1.jpg

cornflowerboquet_2.jpg

cornflowerboquet_3.jpg

For the reception, I gathered several Mason canning jars (blue and white) and cut several bunches of cornflowers from the garden. These were then placed in jars, and there were two jars placed on each table. I also cut bunches of cornflowers and filled four tin buckets; these buckets were placed on the cake table. Unfortunately, we did not get any photographs of these displays, but a couple of photographs that I based my displays on are below.

cornflowers_14.jpg
cornflower_8.jpg
Photograph sources for the above four photographs: http://www.gapphotos.com/ and http://www.greenandgorgeousflowers.co.uk
Adobe have released a new product, known as Adobe Muse, that allows the creation of websites without needing to code. With Adobe Muse, users will be able to drag and drop elements, such as text boxes and buttons, onto a web page. There will also be support for third party integration tools, such as Google Maps.

To use this new software, Adobe will probably charge for use by a subscription basis. Adobe will launch this new product in early 2012, but it will be changing the name. For more information, please visit Adobe's website: http://muse.adobe.com/index.html
My design task last week was to design and send out wedding "thank you" cards for the lovely wedding gifts that we received. While most couples invest in generic "thank you" cards, I decided to design my own cards using the artwork and fonts that I used in the wedding invitations. This way, I was able to personalise our "thank you" cards with our names and wedding date and link the stationary to make it memorable and special to the card's receivers.

The card that I created was folded three times and stuck together with an envelope seal. The receiver's address was placed on the back of the card and the personalised message hand-written underneath the artwork.

The wedding "thank you" card is photographed below and next to a display of flowers used for the wedding.

thankyou_wedding.jpg

Javascript Accordion

| No Comments | No TrackBacks
One feature that is likely to be on a website is an "accordion". An accordion is a styled list of data that can be minimised and maximised based on a mouse click, and these are often used in navigation menus where the menu items can be expanded. I have had to program these fairly recently.

This tutorial will describe how to achieve the accordion effect using Javascript and then show how it could be achieved using the JQuery library.

Note that I have made the initial default option for each accordion panel to display; it is important to ensure that the user is able to see the content in case Javascript is disabled.

The HTML for the accordion will be displayed similar to the format below.

<div class="accordion">
<div class="apanel">
<h1>Header</h1>
<p>Text</p>
</div>
</div>

First, we want to get each 'apanel' and apply a new style via class name ('unselected') to hide all panels except for the first one. internet Explorer does not recognise the Javascript getElementsByClassName() method, so we need to improvise. To make Internet Explorer behave, we first need to loop through all of the DIV elements on the page, then use DIV.className to determine the name of the class. Internet Explorer also cannot handle changing styles in the same manner that other browsers can, so we use the element.style.setAttribute() and element.setAttribute() methods on the element on the element's style to set class names.

if (document.getElementsByClassName) {
    for (var i = 0; i < document.getElementsByClassName("apanel").length; i++) {
        var item = document.getElementsByClassName("apanel")[i];
        if (i == 0) {
            item.style.height='';
        } else {
            item.style.height='20px';
            item.className="apanel unselected";
        }
    }
} else {
    i=0;
    div = document.getElementsByTagName("div");
    while (element = div[i++]) {
        if (element.className == "apanel") {
            if (i == 0) {
                element.style.setAttribute("height","");
            } else {
                element.style.setAttribute("height","20px");
                element.setAttribute("class","apanel unselected");
            }
        }
    }
}

The above will work if you are using the accordion only once on a page. If you have multiple accordions, you should give each accordion an ID; you can then put the above code into a method and pass an ID parameter. The ID parameter can then be referenced to hide/expand all accordion panels except the first one in each group. (See the example below.)

function chooseAccordion(id) {
 // ... place the above code here...
}

The accordion can be styled to however you wish it to look using CSS. I have set the H1 component to have a 'cursor:pointer' and have ensured that all default states have visible content. Only the '.apanel .unselected p' class should be hidden.

Using jQuery is much easier and it uses a lot less code. To achieve the same as above, simply look at the following example.

In jQuery, simply call the addClass() method to append a new class. Use the css() method to add CSS styling, and use the each() method to loop through all elements to pick out the 'apanel' element. The next bit of code captures the onClick event and determines if the tab is already opened or closed and completes the next bit of action, such as opening the clicked-on tab and ensuring that all other tabs are closed.

   jQuery('.apanel').addClass("unselected");
   jQuery('.apanel').css("height", "20px");

   jQuery('.accordion').each(function() {
      panel = jQuery(this).find('.apanel');
      panel.first().removeClass("unselected");
      panel.first().css("height", "");
   });
  
   jQuery('.apanel').click(function() {
      if (jQuery(this).hasClass("unselected")) {
         jQuery('.apanel').addClass("unselected");
         jQuery('.apanel').css("height", "20px");
         jQuery(this).removeClass("unselected");
         jQuery(this).css("height", "");
      } else if (jQuery(this).hasClass("unselected") == false) {
         jQuery(this).addClass("unselected");
         jQuery(this).css("height", "20px");
      }
   });

Animation can also be used with Javascript to create various effects, such as sliding effects when the user clicks onto the accordion.

Classic Tractor Show

| 1 Comment | No TrackBacks
Summer is the time when classic cars and tractors leave the barns, sheds, and garages to go onto display for others to enjoy and for their owners to mingle with like-minded enthusiasts.

A classic tractor show was held at the Coshocton County fairgrounds on the 9th of July, not far from where the Saturday farmer's market is held every week. I enjoyed seeing these brightly-painted and loved-by-their-owners antique tractors. These owners would have spent significant time re-working these machines, considering that these machines and would have been used so often and worked on by farmers, who would not have kept them in any sort of mint condition. These machines would have been riddled with rust and dents through so many years of hard work.

tractor_1.jpg

tractor_2.jpg

tractor_3.jpg

tractor_4.jpg

Music Festivals of 2011 in Poster Art

| No Comments | No TrackBacks
I love music festivals (who doesn't, despite dreary weather) and the artwork that goes in to the design of posters for music festivals and CD covers for bands. A lot of the work is very creative with illustrations and catchy fonts. This year (2011) has brought common landscape themes to the poster art. We see mountains and cityscapes and natural themes; as usual, the font plays a specific part in the artwork of the poster. In some cases, the text is the artwork. I thought that I would include some of the best music festival poster artwork from 2011.

From left to right, the posters in the image below are as follows:

1) Future Music
2) Snowball
3) Mission Festival
4) Pach Anga!
5) Hang Out Music Fest
6) Sasquatch
7) Sugar Maple
8) Osheaga
9) Cornbury
9) Groovefest
10) Swat the Pumpkin Pie
11) Sticky Buds
12) Lollapalooza
13) Nelsonville Music Festival

musicfest.jpg

HTML5 - Drawing with Canvas

| 1 Comment | No TrackBacks
One useful feature of HTML5 is the Canvas element. The HTML5 Canvas element allows developers to 'draw' graphics on the screen. In some cases, developers have even drawn complete works of art, from Homer Simpson to the Internet Explorer logo to a droplet of rain to a parrot (1).

Although the HTML5 Canvas is an excellent way for rendering graphics without the need for GIF or JPEG images, be warned that it is not widely supported. The HTML5 Canvas element is only supported in the following browsers@ IE 7+, Opera 10+, Safari 3+, Chrome 3+, and Fireforx 3+. It also requires Javascript to 'draw' the elements, and some of the more advanced features may not be supported or work consistently across browsers.

To use an HTML5 Canvas element, the user simply needs to ensure that the correct document type is set as the first line in the html page; This is done by inserting the tag: <!doctype htm>. Then, add a <canvas> element to the web page, as below.

<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>


This <canvas> tag will act as a placeholder for you to draw the elements. The height and width can be changed in the canvas; also note that the HTML5 Canvas will be empty. In order to fill the canvas, we use Javascript.

The following lines of code manipulate the canvas and draw the elements into place. First, we check whether or not the browser supports canvas using the method getContext(). Then, we specify getContext(); '2D' is two-dimensional and will render two-dimensional graphics. (One can also render in 3D.) The user can specify the fill colour and stroke colour of the graphic using fillStyle and StrokeStyle, respectively and specifying the value using the RGB value or the hexidecimal value.

The following steps to create the element require the drawing to take place, and this is achieved by starting a new path - using beginPath() - and then moving the path to its X and Y coordinates on the canvas using moveTo(X,Y). The path can be moved from point to point to create a graphic, and when the developer is finished, the method closePath() is called. Finally, the developer needs to call the fill() method to fill the new graphic with the colour defined earlier in the code.

<script language="Javascript">
var drawingCanvas = document.getElementById('myDrawing');
if(drawingCanvas.getContext) { //check browser support for canvas
    var ctx = drawingCanvas.getContext('2d');
    ctx.fillStyle = 'rgb(111,21,33)';
    ctx.beginPath()
    ctx.moveTo(0, 0);
    ctx.lineTo(150, 0);
    ctx.lineTo(150, 0);
    ctx.lineTo(75, 15);
    ctx.closePath();
    ctx.fill();
</script>


I've provided another example below that programatically uses logic to print out verticle lines.

<script language="Javascript">
var context = drawingCanvas.getContext('2d');
context.strokeStyle = "#C432F2";

context.beginPath();

for (var x = 0.5; x < 500; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 380);
}
context.closePath();
context.stroke();
</script>


Shapes can also be drawn by using the relevant method, such as 'arc' or 'rect' methods. The method below uses 'arc' to create a circle.

context.arc(100,100,50,0,Math.PI*2,true);

Hopefully this article provides you with a basic understanding of the HTML5 Canvas element to explore other features and advanced features (gradients, 3D graphics, charts, etc) on your own. Also, the following website (2) is a useful 'cheat sheet' if you intend on using HTML5 Canvas to draw your own graphical elements, and there are also many other resources out there.

Happy drawing; happy programming.

(1). http://www.queness.com/post/4023/18-brilliant-pure-css-drawings

(2). http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf

Archives

Recent Comments

  • jenn: Thank you. read more
  • Murge: Amazing post. read more
  • Herbert: good post. site read more
  • Frank Quake: Hey, This is great when you said that I had read more
  • Chappy: You mention peptides here? I have had first hand experience read more
  • jenn: Thanks! I love the work. I have got more recent read more
  • Fanakapan: Thanks for the write up. This was some of my read more
  • jenn: Yes.... but that's only for the islands. Mostar and Montenegro read more
  • jenn: Hello, the code is not mine to hand out. I'll read more
  • pantich: More info about the best day trips from Dubrovnik can read more
OpenID accepted here Learn more about OpenID