Change of plans

I asked Ben whether my idea was a little too convoluted (i.e. that a pixel could be considered a class) and he agreed that it was. He suggested that instead of painting by pixels, I create stamps (for example, a stamp for the eyes, a stamp for the mouth, etc) that then creates the picture.

I've instead decided to base my idea off Japanese purikura machines. Purikura machines are very much like a photobooth, except it allows you to edit your photos by placing objects, words, etc onto the image.

Mona Lisa

I thought purikura'ing Da Vinci's Mona Lisa would be interesting as it's THE quintessential portrait of a person.  

Changing my focus to Classes

Considering so many people are doing if/else statements, I'm now deciding to base project 3 on classes with my paint by class idea.

For example, within the hand class (this is purely an example. The illustration shall be much more interesting!), I could suggest states and methods (i.e. how to mix paint colours to create the colour green for example) which is then to be applied to the hand class. 

Estimated Cost

• Canvas ($10 - $40) or Canvas printing (?)
• Acrylic paint - white, black, and the primary colours (Free, already have it)
• Brushes (free, already have brushes)
• Total: Anywhere between $10 to perhaps $70 - need to source a cheap printer if I'm to do the line illustrator on the computer which is preferable.

Time Allocation

12/5/11 - Friday: Idea formulation

21/5/11 - Saturday: Line art creation (drafts, figure out colours, final, digital or traditional?)

22/5/11- Sunday: Continue with lineart, finish it by Monday.

23/5/11 - 24/5/11 - Mon/Tues: Source a printer, negotiate a reasonable cost.

25/5/11 -Wednesday: Begin writing 200 words for exhibit. 

28/5/11 - Saturday: Finish up loose ends.

29/5/11 - Sunday: ""

30/5/11 - Monday: Lineart must definitely be printed by now. 

30/5/11 - Tuesday: Presentation and Exhibition. 

Ideas for Project 3

Loops Comic Strip

If/Else Quadtych

Colour by Classes

I will draw some line art onto a canvas of an appropriate image. Each segment will be allocated a class, in which a paint colour is specified for each class.

Dancing Flower

I'm going to edit this code. It is also a prime example of an application that relies on if/else terms to properly execute.

Deconstructing the code

 TypeClock by Julia Wang

Here is 'TypeClock' by Julia Wang which has a great example of an if/else statement:

The code I'm interested in:

if( h > 12) { //IF PM
background(5);
fill(50);
h = h - 12;
}
else { //if AM
background(255);
fill(240);

}

Basically, the code is saying if the hour is greater than 12pm (i.e. during the pm hours), then it sets the background to black, or else the time is during the 'am' so the background is set to white.

---

Starfield by Martin Holler

Here's a sample of the code:

if(mousePressed)

z -= velocity * 10;

else

  z -= velocity;

This bit of the code controls the functionality of the application -- when the mouse is pressed the velocity of the stars movement according to the z-axis is increased 10 times. Otherwise (else), the velocity returns to normal.

---

Rush Hour by Florence Labelle

int elapsed = millis() - savedTime;
if( elapsed < 10000) {

background(intro);

}

else {

niveau1();

}

if (posXrouge > 315){

background(fin);

This code sets out what to display on the screen while playing Florence's rush hour game. So, if the time that has transpired is less than 10 seconds, the screen displays an introductory image, explaining how to play the game. After 10 seconds, you start on level 1 (niveau 1) of the game and if you are able to move the red car across the x-axis more than 315 pixels, you win, and the 'finish' image appears saying 'bravo!'.

If/Else

For Project 3 I have decided to base my exhibit off the if/else term because I feel it best allows for a clever or comedic metaphor.

Below I've pasted the syntax from Processing's Reference libraries to outline the basics of the code:

if(expression) { 
  statements 
} else { 
  statements 
} 

if(expression) { 
  statements 
} else if(expression) { 
  statements 
} else { 
  statements 
}

Obviously extremely straight-forward, but allows for great complexity if needed.

Reflections on Project 2

1. a) Did I design something meaningful?
I don't really go out of my way to design things that are meaningful, so I feel this question is a little loaded. If someone else finds meaning in what I've created, that's great, but I'm happy to just design things that are beautiful and that work.

b) Did I enjoy having an open ended task?
Very much so. I thrive in these sorts of projects because freedom allows me to attempt to break boundaries I have within myself.


2. a) Did the project motivate me to learn the code myself?
Yes, it did, which is what I appreciated most of all. I really want to be proficient in a coding language, and this was a good stepping stone for me.

b) Did I rely on tutors?

Not at all, I did most if not all the troubleshooting myself. I think it may have turned out better if I asked for some help and guidance though.

c) What were the main challenges?
Changing the base code, colours, animation, and figuring out how to make the sound work (including corroborating with the visualisations).


3. Am I satisfied?
Extremely!

Finale

{Screenshot}

So here is the finished product. I've adjusted the colours (only somewhat), animation and text to better suit the sounds used and for general aesthetic purposes. 

The reason that the fireworks remain multicoloured is simply because otherwise, it is too difficult to discern between separate fireworks. Also, it then just becomes a flurry of circles which I feel is purposeless. So instead, I changed the way the firework is animated so the firework is more congruent with the sounds and to further interact with its environment. 

I've also made it so the text is nice and readable with a better font selection (good ole' Times!) and making it so the text is written by word, rather than letter (though pressing the number '2' on the keyboard allows the user to write by letters if preferred). As suggested at our presentations, I've also removed the cursor for readability reasons. 

I decided to not use any map() functions (i.e. vocalisations based on where mouse is on screen) because I feel it over complicates the program, and would probably overload the machine, or just take away from the nice effects I've already created.

To conclude, I am extremely pleased with my final composition and hope you enjoy it too!

Click here to view on OpenProcessing.org

Fireworks by William San

This is the code I based my transformation application on, check it out!

Fixed

I fixed the trailing issue. Was simpler than I thought!

(Note: Doesn't seem to work when embedded on Blogger, so go to the source!)

Transform: Work in Progress

Here's some progress on my Transformation app. I used a quote by Nietzsche regarding transformation, that is to BE transformed by this application.

"A thought, even a possibility, can shatter and transform us." - Nietzsche

However, I am having a tricky time making the text trail after the mouse in a readable manner due to the fireworks code affecting the mouse' functions. I also need to figure out how to add sound when the mouse is clicked, and when the mouse is dragged (according to x/y co-ordinates).

I did have the background changing based on where the mouse was on the screen, but it was far too jerky.

Loop to use

Here's a loop I made in Garageband of a section of music by Caribou - "Odessa". I'd like to use this for the musical element of my Transformation app.

Hosted by kiwi6.com free mp3 upload.
Download mp3

Interim Presentation: Storyboard

This would be a very complicated program where I'd have to record a large variety of vocalisations, music, and so forth. It follows on with my favourite wallpaper idea where the text follows your mouse to create nice imagery, except this includes transforming backgrounds, noise, pitches, and so forth. It also enables you to record the song and perhaps save it or at least be able to replay what you did. I may possibly be being a little too ambitious though!

My second idea is fairly self-explanatory. Click image for larger version.

Reflections on Project 1

Concluding our first project, I am happy with my results even though they may not be consistent. I found the project to be a very challenging introduction to the world of Processing, considering my experience with code is very limited. Mostly, I was interested in figuring out what one can and can't do within the confines and parameters of a coding framework.

What I have learnt is to leave illustration and intricacy to the programs designed for such things, and rather, to take advantaged of the abilities of development and code i.e. the maths, the functions, the physics even!

If I were to improve my design, I think I would have perhaps stuck to one idea and expanded from there for a more effective set. So rather than four separate star patterns, just gone with the star mapping or typographic one, for example, and expanded it to fit all the panels.

My goals for our next assignment are to really knuckle down and focus on what is assigned to us, and really envision an application that encompasses the concept of transformation. I will endeavour to post more regularly to my blog with progress, inspiration and so forth to better understand my methods. Also, to allow myself to be freer and more experimental with my coding to see what I can formulate.

Final Wallpapers: Stars

Following our interim presentation, I realised I needed to go on an entirely different path to better understand the benefits of the Processing machine. So I backed off from doing any tedious illustrative work and just perused through the OpenProcessing website to get some ideas. 

I began by experimenting with some interactive code and found I could draw some interesting starfield imagery and thus, decided to stick with some constellationy, nebulae-y, and galactic awesomeness. 

Mapping the stars.

Inspiration for this image was derived from this quote:

Every atom in your body came from a star that exploded. And, the atoms in your left hand probably came from a different star than your right hand. It really is the most poetic thing I know about physics: You are all stardust. You couldn’t be here if stars hadn’t exploded, because the elements - the carbon, nitrogen, oxygen, iron, all the things that matter for evolution and for life - weren’t created at the beginning of time. They were created in the nuclear furnaces of stars, and the only way for them to get into your body is if those stars were kind enough to explode. So, forget Jesus. The stars died so that you could be here today.”

—	Lawrence M. Krauss

A gas giant is born.

Unfortunately, I am having issues saving them as .pdf's. I shall upload these onto OpenProcessing and perhaps someone can help me troubleshoot the issue.

Now I must tend to my poor little kitten who has conjunctivitis. Adios. 

*Backgrounds created in Photoshop.

Interim Presentation: Wallpaper

Inspiration: 

Illusion

Surrealism

Steam punk

Retro colours

Retro wallpaper.

Retro illustration.

Jessica Hische. 

So, without further ado, I present hours of painstaking labour (click images for high-res). Voila!

Made in Illustrator and Photoshop. 

Mario's Favourite Mode of Transport

A diagonal stripe pattern with a twist (the twist was unintentional).

A little better... but not quite.

Dammit I'm mad. Surely the blatantly obvious is staring me in the face?

{

strokeWeight(20);
stroke(#8d5173);
line(0,0,70,70);
strokeWeight(20);
stroke(#8d5173);
line(0,70,70,0);

fill(#6b455c);
noStroke();
quad(20, 35, 35, 20, 50, 35, 35, 50);

fill(#6b455c);
noStroke();
quad(0, 15, -15, 0, 0, -15, 15, 0);

fill(#6b455c);
noStroke();
quad(70, 15, 85, 0, 70, -15, 55, 0);

fill(#6b455c);
noStroke();
quad(55, 70, 70, 55, 85, 70, 70, 85);

fill(#6b455c);
noStroke();
quad(-15, 70, 0, 55, 15, 70, 0, 85);

stroke(#d6abc6);
strokeWeight(1);
line(0,0,70,70);
stroke(#d6abc6);
strokeWeight(1);
line(0,70,70,0);

noFill();
stroke(#582c45);
strokeWeight(1);
quad(0, 35, 35, 0, 70, 35, 35, 70);

noFill();
stroke(#d6abc6);
strokeWeight(1);
quad(0, 0, 35, -35, 70, 0, 35, 35);

}

It's better though, switched out the triangles for quadrilaterals, but it's still having weird overlapping issues. Ooh, and much much prettier with the pink:

And I would have gotten away with it if it weren't for those meddling brackets!

I started working on a plaid background in Processing 1.2, because often times, it turns out fairly awesome. But I can't seem to grasp what on earth is going wrong with my code. For the record, it should look like this:

Except, it's looking more like this - oh little sadistic glitch thingy, how you torment me so!

ARGH!!!