How to build a class diagram for your projects in Visual Studio 2008/2010 automatically

One of the great features of Visual Studio is it’s ability to easily create diagrams showing the relationships and inner workings of your classes for applications you are building.  Visual Studio allows you to create class diagram files (.cd) in all kinds of different projects such as visual c++ applications.  This diagram file has a design view interface that allows you to drag and drop classes from your solution explorer or class view.  The display will show the class with all its properties and methods and which access level they have.  It will also show relationships between classes and inheritance relationships.

Soundcard Class

Here is an example of a class showing in the design view

From this you can see a number of useful things.  You can see that the class name is SoundCard, it inherits from the iSoundCard interface, and it has a number of fields (properties) and methods (functions).

The permissions of the fields and methods are represented through the images to the left of each field or method name.  Here is a summary of the main ones

  • Private const field
  • Private field
  • Public method
  • Private method
  • Protected method

There are a number of other features the class diagram has such as showing inheritance, macros, structs, and allowing you to save the diagram as an image.

To create a new class diagram just choose Add > New Item on a source folder you want to place it in.

Then select Class Diagram

Then you will be able to create a full class diagram from your classes in your project.

Now I’m sure the next question your asking is what if I update my class or remove it or add a new class ?

Well when you make changes the diagram automatically updates itself for you.  All you have to do is print it again or re-save the image if you are using it outside Visual Studio.

Here is an example of a fully formed class diagram based on the framework we work with in our Game programming course at Seneca.  This framework was written by Chris Szalwinski and is used by GAM666/DPS901 students.

Presenting Processing.js at OCE discovery 2010

Early last week a group of us from Seneca got a chance to present some of our projects we have been working on in the Center for Development of Open Technology at the Ontario Centers for Excellence Discovery 2010 convention in downtown Toronto.

One of the projects we focused on demoing was the Processing.js project.  We competed in the student connections competition which had us do a 5 minute presentation on Processing.js.  Over 1600 students had entries in the competition and we were selected to compete in the top 5 at the convention.

Although we didn’t win it was an excellent opportunity to show off what p.js can do and what its all about.  While working the booth for the 2 days of the convention we had several people come up and ask about processing.js and quite a few people asking about p.js on iPhone and how to get into developing with it as a replacement for flash because of it being blocked on the iPhone and iPad.

It was an excellent conference and presented lots of opportunities for us to showcase what we have been developing over the last 8 months.  Hopefully next year we will get a chance to present again.

A monthly wrapup on processing.js progress

A lot has happened in the last month and I haven’t had time to keep up with blogging.  Between work, work, conferences, processing.js release 0.9, and other things, I haven’t had much desire to sit down and write about it really.

So a few things to write about include the release of processing.js V0.9.  Our 0.9 release is one of our biggest yet with the most changes, bug fixes, and new features.  The processing.js test-suite is updated and by now most of the major platforms and browsers have been tested.  We can still use a few people to help us cover the browsers and platform combinations not yet tested. Sign up today and help us out and learn about processing in the process (parden the pun).

Yesterday marked the end of the OCE Discovery 2010 conference which we attended with Seneca to display some of the projects we are currently working on including processing.js.

I’ll be writing about that in a few days so check back for more info.

Processing.js 0.9 wrapup and reviews

0.9 will be coming out in a few days and I’ve submitted my work for this release as of last night for review

Some big changes are going into this release related to PImage objects

I changed the way a PImage holds its pixel array internally to use an ImageData object instead of an array of ints.  This means a ton of expensive overhead math is eliminated when drawing frames in a loop and manipulating pixels

Initial tests on minefield and chrome showed sketch’s with animation or pixel by pixel manipulations in a loop were between double and triple there previous speeds. My resize loop test used to run in chrome at about 50-70fps it now runs at 200-240fps.

I did some reviews this release as well for Anna’s hue, saturation, and brightness fixes.  I also wrote a few new tests and rewrote some old ones to test the new color() implementation to make sure it worked ok with PImage stuff.

One more release to go !

Processing.js conference wraps up in Boston

Sitting in the Boston airport waiting for my flight so I decided to put up a post on this weekends get together in south Boston.

For the first time a group of about 20 individuals from the Processing.js development team got together in Boston with some professionals from all over to meet and discuss Processing/Processing.js.   I got a chance to meet a ton of really smart people behind the Processing project and the technologies that support it.

Friday evening I got to sit in on a talk with a panel of professionals from all different companies and organizations.  Al MacDonald led the discussion which included Ben Fry who was one of the original creators of the Processing project, John Resig who started the Processing.js project, Chris Blizzard from Mozilla who is chief evangelist, Dave Humphrey my professor of open source at Seneca College, and Corban Brook from University of Waterloo.

Saturday we held a group workshop to brainstorm ways to improve performance in everything from Processing.js to Mozilla’s canvas implementation to the community learning experience for newcomers.  The objective is to get sketches running in JS as fast as they run in java applets in the browser through native processing.  We made some major improvements and 0.9 and 1.0 is when those changes should start emerging.

Sunday we wrapped things up with more bug fixes and improvements.  I worked with Anna on an IDE for processing.js that is built in Bespin.  We implemented syntax highlighting and passed it on to Al to pretty it up for use on the PJS website.

Overall it was an awesome weekend and a huge thanks goes out to Bocoup for hosting it and for all who came to present and help out.

Starting towards 0.9

0.8 is released and since I haven’t had time to blog much lately I’ll include a summary of the progress I made in 0.8 and what’s coming up in 0.9

In 0.8 I added misc fake-dom.js fixes for the parser test harness, I also added a few PImage bug fixes as well.

The biggest thing that came into 0.8 was copy() and blend() implementations and their PImage prototypes.

I ported over the code almost directly from processing’s implementation with the exception of the nearest neighbor code.

going to get some coding done tomorrow with some really awesome people here in Boston.  Hopefully some nice performance increases will be coming soon.

Processing 0.7 is out, 0.8 is on the way

We released processing 0.7 a few days ago which was an extra week in the making but it was worth it.

0.7 is packed with a huge list of changes and fixes. My first piece of PImage went in and got a few last minute bug fixes applied and now I am working towards 0.8 content.

Last night I pushed up the resize prototype for PImage objects for peer-review.  A few interesting things came out of that.  One being I almost missed the part in the specification about allowing 0 to be passed in for the width or height and interpret that as a sign to keep the images current aspect ratio and just adjust to the specified width or height on the other parameter.

I also ran the tests on a few of my changes and noticed we had to add a few more properties to the fake-dom.js file for the parser tests which was causing 60 of the tests to start failing.

As I’ve been putting PImage together and running some performance tests I’ve realized at some point we will have to abandon the JS pixel array that’s holding pixel data and move to using an ImageData object attached to the PImage.  This will make moving from a PImage object into a ImageData or canvas object for canvas functions a lot faster in the future.  Currently if you are displaying an image in a loop and changing it the performance is not very good.  Adding accessors, changing the object composition, and moving as many functions to drawImage() instead of putImageData() are things we plan to do to speed it up in the future.  Initial tests show storing the imagedata in a ImageData object to be about 10x faster alone.

More about 0.8 changes in a few days.

The first pieces of PImage

I pushed up the first piece of PImage code last night for review.

It looks like 0.7 will contain the following
PImage constructors including a 1 argument that accepts a HTMLImage object

A few example demos are available here and a simple slide show of images is here

more to come on 0.8 later in the weekend

PImage roadmap

With Processing.js’s 0.7 release coming late this week I’m preparing to get as much PImage content packed up, tested, and approved for this release.

Here is a complete list of everything that has to be done to bring the library in line with being able to handle and use a PImage object internally.

PImage upcoming changes to library

PImage constructors
PImage(<img>) accept a reference to a HTML img object and convert it to a PImage
PImage(w, h) create a PImage object with default mode RGB (alpha set to 255)
PImage(w, h, f) create a PImage object with format ARGB
PImage prototypes
.toImageData converts the PImage object to a canvas ImageData object
.fromImageData(ImageData) converts a canvas ImageData object to a PImage object
.get() PImage.get() returns a PImage object of itself
.get(x,y) returns color (int) of PImage coordinate x,y
.get(x,y,w,h) returns PImage object of width and height at coordinate x,y
.set(x,y,color) x,y coordinate, color is a color set the pixel that color
.copy(sx,sy,sw,sh,dx,dy,dw,dh) copy source area to destination area
.copy(srcimg,sx,sy,sw,sh,dx,dy,dw,dh) copy source area of srcimg to destination area
.mask(img) a source image to use as the alpha channel for this image
.mask(alphaArray) an int array to use as the alpha channel for this image
.blend(sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect to the dest rect of MODE mode
.blend(srcimg,sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect of srcimg to the dest rect of MODE mode
.filter(MODE) filter an image with mode MODE
.filter(MODE, l) filter an image with mode MODE and level l (int of range 0-1)
.save(filename) save the PImage to a file
.resize(w,h) resize PImage to width and height
.loadPixels() loadPixel data into PImage objects pixels[] array
.updatePixels() update the pixels in the PImage objects pixel array
Processing functions that need updating to handle PImage objects
p.createImage(w,h,f) create a PImage object of width height and format specified
p.loadImage(f) load an image of filename f
p.loadImage(f, e) load an image of filename f with extension e if no extension given in f
p.requestImage(f) asynchronously load an image f in a separate thread while continuing sketch execution
p.requestImage(f,e) asynchronously load an image f with extension e in a seperate thread while continuing sketch execution
p.image(img,x,y) place a PImage img at x,y coordinate
p.image(img,x,y,w,h) place a PImage img at x,y coordinate of width w height h
p.imageMode(MODE) set a flag to tell p.image() how to interpret w,h
p.get() return a PImage of the current canvas
p.get(x,y) return the color at coordinate x,y
p.get(x,y,w,h) return a PImage of width and height at x,y from main canvas
p.set(x,y,c) x,y coordinate, set this pixel color c
p.set(x,y,img) x,y coordinate, img is a PImage, draw the PImage there
p.loadPixels load a pixel array of the main canvas into pixels[]
p.updatePixels update a pixel array of the main canvas into pixels[]
p.blend(sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect to the dest rect of MODE mode
p.blend(srcimg,sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect of srcimg to the dest rect of MODE mode
p.copy(sx,sy,sw,sh,dx,dy,dw,dh) copy source area to destination area
p.copy(srcimg,sx,sy,sw,sh,dx,dy,dw,dh) copy source area of srcimg to destination area
p.filter(MODE) filter the canvas with mode MODE
p.filter(MODE, l) filter the canvas with mode MODE and level l (int of range 0-1)
p.pixels[] pixel array of the current canvas
p.background(b) draw the background PImage b to the background
Blend modes


Filter modes


Some of this is done, some is started, some is not yet started.  I’ll be adding tickets to lighthouse later today to keep track of it all and pushing some code this evening for 0.7 review and approval hopefully in time !

0.7 release is moving in a forward direction

After 3 weeks of working my way backwards down the rabbit hole I have finally started to make some progress forward with plans for PImage.

Heres a short list of what is going to have to be done and in what order for my 0.7 release

  • write PImage constructors
  • add toImageData and fromImageData prototypes to easily adapt between PImage and canvas ImageData types
  • re-write image()
  • re-write createImage()
  • re-write loadImage()
  • re-write get(x,y,w,h)
  • test copy(), blend(), pimage.get(), pimage.set(), createimage(), loadimage(), image()
  • write prototypes for PImage’s blend, copy, filter, mask, get, set, loadpixels, updatepixels
  • test the prototypes

So yea obviously its not ALL going to get finished by Monday but I think i’ll be able to get a good portion of it done since a first draft of PImage, blend, copy, the blending modes, get, set, toImageData and fromImageData are done now.

Almost ready to get a working test going

More to come over the weekend