That One PARTicle That Just Can’t Keep Up

for (int x = 0; x < video.width; x++) {
int pixelColor = video.pixels[index];

int r = (pixelColor >> 16) & 0xff;
int g = (pixelColor >> 8) & 0xff;
int b = pixelColor & 0xff;

Here I have made a slight changes to the colour, I have changed the attributes from “r,g,b,” to “h,s,b,”. The reason for this is to add a clearer image to what is been projected, allowing people to see what is going better. At the moment I feel the way the particles are looking doesn’t look clear enough and show the blank spot where the person is well enough, changing these attributes will hopefully improve this.

for (int x = 0; x < video.width; x++) {
int pixelColor = video.pixels[index];

int h = (pixelColor >> 16) & 0xff;
int s = (pixelColor >> 8) & 0xff;
int b = pixelColor & 0xff;

Also changing the font size again, this time too 2.5.


As you can see I have encountered a little problem

theproblemThe problem I have encountered here is the camera cannot keep up with my movements, this is a big deal because of the pace people walk through Weymouth House, they will not notice that there bodies are being blanked out. Trying to fix this problem I added in a fps command;


This had no response to the work; nothing changed so I fluctuated between higher and lower frame rates and this still had no difference….So I tried cutting the amount of letters (particles) in half to reduce the collisions between them, again this had no difference. This problem is a tricky one to figure out, so I’m going to move from w119 and head down to the walking space and see if this makes any difference.

openspaceWhat you’re seeing here is the first view of the production in the Weymouth House walk through; me stepping away from to webcam to see if it is clear that I am standing there. The lag on the image isn’t as bad as it was up in W119, that could be due to the wider every of space, I did also reduce the size of the particles to allow more space for movement, hence dark spots.

I’ve Made A Decision

I’ve decided to use more than one of the code manipulations in this space, considered as further experimentation I am going to explain it as; “which code reacts better to the bigger environment.”

The Line Between Two Designs

The next step to try a different interpretation of what I am doing, before I get really deep into the code I need to state which direction I want to go in, either working the particles like the plan has always been or delving into something else, working with lines rather than dots or maybe even something completely different. Options being numbers or playing around with size of the letters, not like before, in turns of absolutely massive or really tiny. I will have to prepare myself whether lighting will have a big effect on the sizes and if this could effect the distance the camera could see.

10906287_10204886449954306_241422977948094300_nI’ll just get straight into trying out the lines, code used below –v–

String letterOrder =
"-__--__==__--__==__--__==__--__==__--__==__--__==__--__==__--__==" ;
char[] letters;

Using equals signs and similar line shapes I have replaced all the zeros, here are the results –v–Screen Shot 2015-01-25 at 21.41.48Yes! That is just a black screen!

There is obviously a problem here….

Doing further insight into what’s gone wrong here and not having any errors the problem is with density; the letters need to have a curtain density for them to placed onto the screen. The problem with using lines and lets which are very thin is the density of the symbols isn’t computed by the code leading to the blank screen.

Because I have come across this problem I am going to mess about a bit with the code and see what I come up with.


PFont font;
float fontSize = 3;

Increasing the size of the font the 3, usually being 1.5 you can see that the size of the letters is cause a bigger confrontation with each other dismantling the image and making it look quite (inaway) pixelated.

I not sure if I really like this effect, it has quite a lot of lag which is shame and does portray my concept to it’s full degree.


String letterOrder =
" .`-_':,;^=+/"|)\<>)iv%xclrs{*}I?!][1taeo7zjLu" +
char[] letters;

reversed particles

This is the reverse of the one before; having the particle on the inside, to do this I used what I learnt about density in the letters and made the top like of letters all lines and the bottom line ‘O’s’, creating what is above.

String letterOrder =
"------------------------------------------------" +
char[] letters;

 Here I have kept the top line of text which has worked out quite well for me; the way the pixels are reacting to my body shape and the outside if very similar to one of the drawings I have.

10419987_10204886438634023_5063957941942802546_nHere I was trying to show the difference I want between the body and what’s outside the body, and with the size of the text and the way code is laid out in the form of letter density order it has resulted in the main focus being what’s happening outside of the structure. Another thing I have noticed is the way the shade black doesn’t have any letters, it is a completely blank space when on camera. When I move my body the letters (particles) react in such away that it show’s what is happening when the motion takes place, even if it can’t be seen the camera is showing it, exactly what my concept is.

The Next Step

I want to make the particles clearer, giving the image more clarity and nicer imagery. My next step of experimentation is to mess about with the colour attributes and how the particles are represented.

Individual Analysis. Inpiration

What Inspires Me

AmnonOwed-KinectPhysics-03-640x360 AmnonOwed-KinectPhysics-04-640x360These images above are the result of using a Kinect Camera, exactly like the ones used on the Xbox. I see using these as more of a cheat because the camera is already programmed to detect bodies with the use of depth, having half my work already sort out for me, but with further experimentation and me not actually owning a Kinect I am finding it very difficult to manipulate the code so it will use my Mac webcam instead. Using “SimpleOpenNI” which is a library you can install on “Processing” I was going to have a look what some already created code would look like and try and use that as a bases to create my almost “Particle System”.

Why an almost Particle System?

To be perfectly honest I have run out of time to write a Particle System from scratch, my hand in is next week on Monday and the time it would take to go through this process would probably hit a fortnight. No worries though, this is where the “Almost Particle System” comes in.

In the pictures above you can see the shape of a human body which has been developed in to little lines/dots (quite like particles), to me this is stunning. This is how I would draw a picture, the code and developed again what I would describe as a piece of art and I love that. This also reminds of other works I have seen;

Particleswhiteback‘Punktiert’ another library I could develop from; this particles are beautiful, incredibly simple black on white little balls of different sizes working in correlation with each to have a constant movement around the canvas. This reminding me of something else I saw;

 Looking into these three pieces I hoping you’re getting an idea of where I want to go with this digital environment I want to complete. I have always found beauty in these little motion, there is so much character and life in the little creatures and it’s all created through the development of letters and numbers. Of course I’m going to create something based of these, they inspire me.

Where I could take this idea?

Adapting these ideas to a digital environment where people can interact through a webcam this idea may work very well with the motion of particles around a body. Like the top two images I could reverse what has been done and put the motion dots on the outside of the body rather than the inside, relating that the second image the black particles would react to a persons body or hand or whatever as a negative space.

Lets get experimenting.

Concepts…A designer who writes essays

Having just gone through writing an essay for my ‘Cross Media Creativity Perspective’ my brain is filled with what I would call ‘MindBlowingChaos‘ ‘Concept Overload’; working with ‘Participatory Culture’.

Extract from my ‘Cross Media Creativity’ Essay – Focusing on the ‘Doctor Who’ Phenomenon

“Through out this course my position in the cross media sphere has been enhanced; coming into the perspective from a ‘Digital Media Design’ view my knowledge of Cross Media Creativity has expanded to more than just the knowledge of tablets, computers and phones. Being taught that cross media creativity is more that just viewing media on a screen I have learnt that the use of re-inventing a franchise in your own way is part of this perspective. When thinking about productions like Doctor Who I would always consider the show to be running on its own power; the cast and crew creating the show in parallel with the audience enjoyment in the phenomena. This reflects an understanding of the power fluctuations between the creator and consumer. This having a huge role to play with such a big phenomena cross media creativity brings the audience and what they love watching together and allows opportunities to be part of it. This unit has impacted on my future media consumption; a guilty pleasure of mine is watching Doctor Who fan made trailers and now when watching them I don’t just view what someone has created; I view why they have created it that way, what are they trying to say and how could this effect the entirety of Doctor Who. To come with future projects I will now always take into account how it will be consumed and what production values may effect my inspirations. Throughout the unit the learning curve has been hard, but enjoyable giving me an eagerness to learn how much wider the scale goes with Cross Media Creativity.”

Above is an example of my own interpretation of ‘Participatory Culture’, this created by me in First year.

Taking this theory concept in to context I am going analyse a way of ‘maybe’ incorporating it into my Processing piece; taking a Phenomena in the world and manipulating it into a work.


What is Processing?

Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks.


This work above is an example of what can be created through the use of Processing. My knowledge being based in HTML/CSS the potential to create something above through a piece of code is quite over whelming; being able to sit down a use a pencil to create a piece of art similar to the above would have been expressed as ‘common sense’ to a person like me, but being able to use ‘code’ to write a work of art has opened my views to this.processing_workshop_20141010Processing Spiral


Above is the result of the code…

Here I’m at a point where I am experimenting with the potential of what could come out of coding, hopefully eventually leading me to the point where I become inspired by something I would like to create.

Here I’m find the repeat of the spiral too simple; something so basic which hasn’t taken me long to create doesn’t satisfy what I want to do.

Moving on the something better a bit more complex

Now it’s time for 2nd Year

So it has taken me a solid 2 months to actually get to the point of being able to say;

“I am on the verge of being half towards catching up with all my work”

My website is at the point where I am happy to leave it for now and press on with what is important….second year on my DMD University course.

Website Header

Prepare yourself for some Design.