
CodeTree
Rich Hauck
CodeTree is a social network for sharing and displaying artwork done in Processing and Adobe Flash.
Classes
Final Project Seminar
Keywords
icm flash processing social_networks
Description
Is there a way in which digital artists can learn new techniques, be exposed to new coding structures, and better express themselves by working in tandem or in a group?
CodeTree is an attempt to create a worthwhile dialogue between new media artists of different skill levels and backgrounds. The objective is to create a worthwhile social network that facilitates artistic expression and gets artists to dissect, share, and expand upon one another’s code.
Membership is free, and registered members can create a profile as well as place comments throughout the site. Members are also encouraged to share their artistic works in Proce55ing, Macromedia Flash, and Java, along with their source code.
CodeTree is an attempt to create a worthwhile dialogue between new media artists of different skill levels and backgrounds. The objective is to create a worthwhile social network that facilitates artistic expression and gets artists to dissect, share, and expand upon one another’s code.
Membership is free, and registered members can create a profile as well as place comments throughout the site. Members are also encouraged to share their artistic works in Proce55ing, Macromedia Flash, and Java, along with their source code.
Personal Statement
As a commercial Web designer, I became intrigued with the optimization and visual effects that only programmatic art and design can provide. Like many other designers who took high school math for granted, I suffered the results of my apathetic attitude in this subject as I began to tackle programming through books and tutorial Web sites. The learning experiences that impacted me most, however, were the ones in which I could share dialogue with another artist. It was during these conversations that better coding practices and, perhaps more importantly, new, visual concepts that I had not considered to explore, were exposed to me.
This is not all to say that my path to learning efficient programming was or remains an easy task. With experience, I discovered that many online examples and resources are either outdated and/or poorly written. Then there’s the artist pioneers themselves. Be it business or artistic interest, these trendsetters and pioneers have placed their techniques under lock and key, leaving only the compiled results to absorb. Despite these challenges, it is my hope that a community can be assembled by artistic expression and the acknowledgement that sharing knowledge is beneficial for all involved. (http://www.mandalatv.net/itp/fall05/thesis/introduction.php)
This is not all to say that my path to learning efficient programming was or remains an easy task. With experience, I discovered that many online examples and resources are either outdated and/or poorly written. Then there’s the artist pioneers themselves. Be it business or artistic interest, these trendsetters and pioneers have placed their techniques under lock and key, leaving only the compiled results to absorb. Despite these challenges, it is my hope that a community can be assembled by artistic expression and the acknowledgement that sharing knowledge is beneficial for all involved. (http://www.mandalatv.net/itp/fall05/thesis/introduction.php)
Background
Please see: http://www.mandalatv.net/itp/fall05/thesis/context.php
Audience
This project is to turn students into artists, artists into teachers, and teachers into students. The initial draw for the Web site would be artistic expression and artist exposure; the site would be a place where viewers could experience interactive art and see what this emerging community has to offer. By providing the source code that drives the artwork (and depending on the artist’s interest in involvement), the artist—or their artwork, would serve to mentor and inspire someone into creating a piece of work based on the original. That someone could be either a student new to the medium or an expert within another field of the medium.
Implementation
CodeTree is built with the server-side language PHP5 in conjunction with a MySQL database. Prospective site contributors must first register with a username and e-mail address (additional fields for a coder biography and Web site URL are also available). Once registered, the user is then permitted access to the artwork comment forms, keyword tag fields, and the artwork submission form.
The artwork submission form requires two files: the compiled Processing JAVA applet or the Macromedia Flash SWF and the authoring files compressed in ZIP format (I chose ZIP to accommodate the varying quantities and file types an author may include in their piece). A third, optional field offers users to submit a thumbnail JPEG to represent the artwork. All forms throughout the site use JavaScript validation to ensure that the submissions are filled out correctly.
To accelerate the launch date to coincide with my ITP thesis presentation I included a few open-source libraries. “FreeTag,” an open-source module authored by Gordon Luk, was implemented to enable keyword tagging of the artwork. The site also uses “FeedCreator,” a PHP file that publishes RSS feeds.
For code submission, I have installed “TinyMCE,” an open-source editor for text submissions. Soon after installing TinyMCE, I used a plug-in called “insert code” by Maxime Lardenois to connect to GeSHi, a code syntax highlighter. This combination of open-source components has enabled users to publish formatted code directly onto CodeTree’s pages.
The artwork submission form requires two files: the compiled Processing JAVA applet or the Macromedia Flash SWF and the authoring files compressed in ZIP format (I chose ZIP to accommodate the varying quantities and file types an author may include in their piece). A third, optional field offers users to submit a thumbnail JPEG to represent the artwork. All forms throughout the site use JavaScript validation to ensure that the submissions are filled out correctly.
To accelerate the launch date to coincide with my ITP thesis presentation I included a few open-source libraries. “FreeTag,” an open-source module authored by Gordon Luk, was implemented to enable keyword tagging of the artwork. The site also uses “FeedCreator,” a PHP file that publishes RSS feeds.
For code submission, I have installed “TinyMCE,” an open-source editor for text submissions. Soon after installing TinyMCE, I used a plug-in called “insert code” by Maxime Lardenois to connect to GeSHi, a code syntax highlighter. This combination of open-source components has enabled users to publish formatted code directly onto CodeTree’s pages.
Conclusion
Online social network behavior has proved to be unpredictable, and while I have come to understand quite a bit, it is a continual learning process.
Processing users have requested a text file submission form to publish code directly to the Web page, but that would potentially alienate Flash users who author directly in the FLA file. There’s also the possibility that multiple text files would need to be published. I eventually found an open-source solution in TinyMCE combined with the insertcode plug-in and GeSHi (see technological basis). I later discovered that code formatted in TinyMCE is hard to copy and paste, so I might introduce a new publishing feature in the future.
Keyword tagging, or associating words with objects, was a feature I included to encourage user-defined categorization of the site content. While site contributors use keyword tagging, the majority tagged their works with the words “processing” and “flash.” I see this as a system flaw, as tagging should ideally represent concepts instead of the technology displaying those concepts. To combat this use, I added a dropdown menu in the submission form requesting the authoring environment of the submission. Subsequent submissions have gone both ways, but it is still too early to tell if this does not work.
Perhaps the biggest change has been the addition of the “grow a tree” section. Part of CodeTree’s objective is to encourage coders to interact with one another’s code. Seeing some sort of relationship between different interpretations of the code is fundamental for the learning aspect of the site. At the project’s start, I determined that it would be extremely difficult to create a usable data visualization that explained the relationships between code authors and code adopters. My best solution was to incorporate tagging, but I soon discovered that this alone did not display or encourage the relationships between different coders. To correct this, I added “grow a tree,” where users submit and explain their code while other users are invited to adopt the code, amend it, publish their work to the site, and show the relationship between the two pieces. As of the time of this writing, this section has only been posted live for a few days. I have already received community feedback and have new ideas towards further integrating this section throughout the rest of CodeTree.
Recently, someone submitted thumbnail images of their work through the JPEG-only submission form, yet the thumbnails were not displaying properly on the site. The form validation did not reject the files, and according to the server, the files were submitted as JPEGs. After e-mailing the artist, I discovered that he screen-captured the applets and renamed the TIFF files as JPEGs. Obviously, there is no precaution I could program to prevent this from occurring, and I think this anecdote serves as a testament to the unpredictability of the online social network.
Processing users have requested a text file submission form to publish code directly to the Web page, but that would potentially alienate Flash users who author directly in the FLA file. There’s also the possibility that multiple text files would need to be published. I eventually found an open-source solution in TinyMCE combined with the insertcode plug-in and GeSHi (see technological basis). I later discovered that code formatted in TinyMCE is hard to copy and paste, so I might introduce a new publishing feature in the future.
Keyword tagging, or associating words with objects, was a feature I included to encourage user-defined categorization of the site content. While site contributors use keyword tagging, the majority tagged their works with the words “processing” and “flash.” I see this as a system flaw, as tagging should ideally represent concepts instead of the technology displaying those concepts. To combat this use, I added a dropdown menu in the submission form requesting the authoring environment of the submission. Subsequent submissions have gone both ways, but it is still too early to tell if this does not work.
Perhaps the biggest change has been the addition of the “grow a tree” section. Part of CodeTree’s objective is to encourage coders to interact with one another’s code. Seeing some sort of relationship between different interpretations of the code is fundamental for the learning aspect of the site. At the project’s start, I determined that it would be extremely difficult to create a usable data visualization that explained the relationships between code authors and code adopters. My best solution was to incorporate tagging, but I soon discovered that this alone did not display or encourage the relationships between different coders. To correct this, I added “grow a tree,” where users submit and explain their code while other users are invited to adopt the code, amend it, publish their work to the site, and show the relationship between the two pieces. As of the time of this writing, this section has only been posted live for a few days. I have already received community feedback and have new ideas towards further integrating this section throughout the rest of CodeTree.
Recently, someone submitted thumbnail images of their work through the JPEG-only submission form, yet the thumbnails were not displaying properly on the site. The form validation did not reject the files, and according to the server, the files were submitted as JPEGs. After e-mailing the artist, I discovered that he screen-captured the applets and renamed the TIFF files as JPEGs. Obviously, there is no precaution I could program to prevent this from occurring, and I think this anecdote serves as a testament to the unpredictability of the online social network.
Additional Documents
- CodeTree - Main Image