My Blog: projects, sketches, works in progress, thoughts, and inspiration.

Tagged: web

I played around a bit with processing.js, an awesome bit of software that runs processing scripts in a browser using the HTML canvas element. I wanted to use it to create an animated full browser background for a web page. I couldn’t find any info on how to do this online, but came up with a solution. It may not be the most elegant, and performance starts taking a big hit at large sizes, but I wanted to share it in case anyone wanted to build on it or already has a better answer. I’ll also note that I haven’t tested this thoroughly.

Simply resizing the canvas element just stretches the rendered image so it needs to be changed within processing.

Since the processing script is essentially converted into javascript it’s possible to communicate between the processing script and other javascripts. So, I added an listener for the window resize event (using jQuery), which calls a function in the processing function to resize the canvas element.

The javascript looks like this:

// javascript (requires jQuery

var ProcessingInit = function() {
  function resizeWindow() {
    var pCanvas = Processing.getInstanceById('pCanvas');

It’s wrapped in a function so that it can be called from processing when the application is started. ProcessingInit(); in the setup function. This makes sure the canvas element is fully instantiated before it tries to manipulate it.

It’s pretty straightforward on the processing side as well. That function simply calls the size function again. I’m not sure if that’s good practice, but it seems to work fine.

// processing

void setup() {

void resize(float X, float  Y) {
Post Page »

HowWeBuildTheWeb is an informal research piece which explores how web designers and developers learn their craft. I had hypothesized that most learned primarily outside of institutions from their peers, either in person or through the web. So far this is overwhelmingly the case.

Visit HowWeBuildTheWeb.netVisit the site.

The site asks designers and developers how and when they first learned their skills and graphs the data over time, showing time horizontally and educational source by the color. Each participant is shown as a block on the timeline. Clicking on each will show more detailed information including answers to a number of qualitative questions about their experience and the web in general.

Check out the site to see peoples responses and how the education of web designers has changed over time. If you make websites, contribute and share your experience.

On a technical side, the site consists of two main components, a form and a set of data visualizations. Form design is a complex art. I used a few common techniques to make it easier to use. The form is organized by the type of information, large fields are shrunk while they are empty, and lists are extended as necessary. There’s also a sneaky login system that I did my best to hide. After submitting, users can edit their information and resubmit. If they return to the page much later, clicking the edit link will let them enter their email and password.

The data visualizations are primarily handled with PHP, HTML, and CSS. The timeline is a table (the first html table I’ve ever made ever). Cells that represent individuals have classes and other attributes so they are colored and clickable. The table handles all of the scaling. The area graph is just a couple of divs with style attributes dropped in for the width. Nothing too fancy.

The site is built on my favorite frameworks: Codeigniter, a php library, and jQuery, for a few javascript touches.

Post Page »

I’ve just finished a website for this cute girl I know, Rachel Verhaaren. She is a photographer, and a student here at MICA. Her work has really fantastic colors and textures (two of my favorite things), especially her large format photographs and often focus on optics and perception.

Most photographers seem to want the most minimal of sites, a white or dark grey page with their work in the middle. I felt it was more appropriate to give it just a little bit more color and give visitors a good impression of Rachel’s work as soon as they open the page, something few photographer’s sites do. WIth that in mind, her portfolio is on the front page with large images linking to sets of images.

website of Rachel Verhaaren - home page

Some nice javascript touches are built with jQuery and the site is powered by WordPress.

website of Rachel Verhaaren - portfolio page

Post Page »


WikiWeb is a piece created in Processing which creates a live, interactive visualization of Wikipedia. I’ve rescripted aspects of the code to make it run a little better and also added a better user interface, hopefully making it easier to use. The new version includes a toolbar of possible actions and a help and reset button. Any feedback on the changes or the project in general is very much appreciated.

Post Page »

If you don’t know already, WordPress is kind of a big deal, and it’s about time i give it some credit. WordPress is a completely open source content management system. Being open source it is not only free for anyone to use, the source code is also visible and unencrypted making it easy for anyone which a little scripting knowledge to customize it, or use parts of it elsewhere. A content management system (cms) is a web interface which allows users to manipulate the content of a web site without having to write any code. Even for people who do know what their doing as far as building web pages this is a far better system than manually trying to write each page. I use WordPress for this website and for a few other pages I’m working on right now.

In addition to being free, the system is also very easy to use, and most importantly very well designed. Through the interface I can add or modify posts on my blog, upload images, create pages, manage my categories and links, comments, designs, and just about anything else the average blogger could ever want to do. There is even a visual editing mode (wysiwyg) allowing users to style the content of posts and pages without writing any html. Since WordPress is installed on your own server, although they also have their own hosting service now, you don’t have to worry about annoying ads and logos and a silly looking sub-domain as you would with a service like blogger. Read On »

Read On (Post Continues) »