Particle Chimes

This is the final sketch that I submitted for presentation - I got help from Ben to fix the bugs that were occurring in my sketch and tweaked a few things like the transparency of the particles. I really like this end aesthetic and sound response - like with every project, given more time, I would have made some improvements, such as experiments with different bar height to represent different sounds. However, I feel this cute little application was very successful in it's own right. :)

Particle Beep 17

As a final touch to my sketch, I made the platforms drop on collision in accordance with the pitch of sound they play. When they get to the bottom of the screen, they reappear in their original positions. I like this because it begins to challenge the user and adds interest to the sketch as it's not just a simple scale anymore.

I am still having issues with the memory and sound bugs but am at a loss how to fix them. I have spent hours trying to fix them and have had both Ben and Steven look at it to no avail.

Particle Beep 14

This is my final code starting to take shape - the particles respond to the sound by changing in size depending on which platform they hit. I also changed the background size to make the particles visible on the screen as I felt white was the best colour for them. Other than that, the code pretty much remains the same as the previous sketch. I felt the sideways movement worked well.

Particle Beep 12

Here I was experimenting with different appearances of the particles, sort of like musical notes, but more importantly, got movement working with the platforms - they move across the screen and, when they hit the right side, reappear on the left, so they go round infinitely. Have put colours in to reflect the pitch of the sound being produced.

Particle Beep 11

I took away all movement here to concentrate on the sound. I put a differently pitched 'ting' sound on each platform - sort of like a computerised xylophone. I intend to make the colours reflect the pitch of the sound as the go down in pitch with vertical placement. I put back in the horizontal component of the particles' velocity to make them bounce in arcs across the platforms.

Particle beep 10

The problem with this version of the code was that the platforms moved as one clump together, rather than individually, hence the overall movement was very small.

Particle Beep 9

Here I had the one platform moving from side to side across  the screen, however there was a problem with my code that resulted in the particles bouncing off 'imaginary' platforms. I wanted to duplicate the moving platform so that I would have 5 staggered platforms moving from side to side across the screen.

Particle Beep 8

In this sketch, I took away the horizontal component of the velocity, and reduced the number of platforms. This allowed some particles to escape, rather than being trapped, and my intention was to have the particles move from side to side.

At this point I was having issues with a few bugs in the code. The 'OutOfMemoryError' keeps coming up. I have run this past both Ben and Steven and both have tried various solutions to the problem - neither have been able to fix it... so I'm stuck with the problem for now. :(

Particle Beep 7

Here I fixed the colours by sticking with RGB colour mode. I made the sine wave of platforms respond a little less tightly to the mouse, but other than that the code was similar to the last one. An issue was that lots of the particles were getting stuck because the platforms were so close together.

Particle Beep 5

Here, I encountered issues with colours - apparently my program doesn't recognise HSB values, even though I looked up how to do them to check. Hence the awful colour scheme. Anyway, this was an experimentation with just a 1/4 of a sine wave to see if this allowed for better interaction. At this stage I also changed the sound to a more hollow thud for a more natural sound.

At this stage an issue cropped up that the sound wasn't working as it should. A sound was produced when every particle was made, which is not what I had in mind. I had my tutor look at this and he sidestepped the problem with a mute function, however this still isn't working perfectly. Sometimes the particles make a noise when they hit the platforms, and sometimes they don't.

Particle Beep 4

This sketch was an experimentation with a more interesting interaction of the platforms with the mouse. The right hand (now upper) part of the curve follows the mouse, and the left side responds oppositely, to form a sine wave. The particles still bounce off the platforms.

Particle Beep 3

In this sketch I simply made expanded the array to hold more values for more platforms in preparation for my next development.

Particle Beep 2

In my second experiment with sound, I added an array to the sketch to allow me to have 5 platforms instead of 1. The platforms were still responding to the mouse via thickness but were stationary at halfway height point this time.

Particle Beep

This was my first experiment with adding sound - it was an electronic-y beep sound and the platform responded to mouseY interaction (up and down following the mouse), and grew and shrank depending on Y position also. I liked the interaction of the platform but felt it could be developed much further. Also, the particle stream at the top of the stream needs work.

Blip reactor

This was my second experiment to show for the interim - what I called the blip reactor. When it hit the bar in the centre of the screen, it made a blip sound and increased the size of the ellipse. When it hit the bar again on a second drop down the screen, it began to decrease the size of the ellipse, and so on, every two drops of the screen. This was a basis for me to work on incorporating sound into my sketches.

I could only upload screenshots of the sketch because Open Processing won't allow me to upload applets. :(

Attempt at Particles

This was my trial run using the particle code from http://processing.org/learning/topics/simpleparticlesystem.html for our class interim. This is working on one of my key ideas with a platform that reflects particles. I will work on getting a sound to be produced on the collisions.

These sketches were my working for the above sketch.

Initial Concepts

Initial sketch up of concepts for sound shape:

Research/Credits to

This was some initial researching into the sketches on Open Processing which involve sound. To be honest, it seems like sound is a lacking component in the sketches up there - they either seem to lack sound or lack incorporating it well. I don't know if this scares me or not - maybe this is an indication it's a hard thing to achieve properly - challenge accepted.


This sketch is a little worm that eats the food that appears on mouse click. The worm follows mouseX and mouseY coordinates and you drag it to the food. There's a munch sound when it eats the food and a different munch sound as it moves along - the tail grows with each bit of food it eats. I kind of like this sketch as it's a little humourous and has very obvious cause and effect of the visual and audial components, but it has too much control and not enough interesting interaction I think.



This sketch appears to shatter and fall away on each click and is accompanied by a loud shatter sound. I like the complexness of the visual component, but am not so sold on the repetitiveness.



This sketch responds to mouse interaction - it has no sound, despite what the title suggests, but is very pretty and I like the interaction between the sketch and mouse. It's enough to be able to control it, but not so much that it's boring.



This sketch is interesting - you create randomised ellipses on the mouse click which, if you click again, produce a (rather irritating) sound, and (sometimes?) also produces extra ellipses. I got a bit confused by how you create more ellipses that scatter, as it seems a bit random, but I like the concept.


Some other research:

http://blog.datasingularity.com/?p=335 - helped me with understanding of particle systems

http://processing.org/learning/topics/simpleparticlesystem.html - the particle code that I borrowed with crediting to use in my work

http://processing.org/discourse/yabb2/YaBB.pl?num=1268810196 - investigating how to create a particle reaction

http://processing.org/learning/pvector/ - understanding the whole vector concept of particles

http://webphysics.iupui.edu/JITTworkshop/152Basics/vectors/vectors.html - more vector explanation - this one was more helpful

Artist's statement

My interactive sketch utilizes the illusion of rotation created by a combination of sine wave movement and altering gradients, based on the vertical position of the shapes created by the user. The interaction I really wanted to create between the user and the sketch was a two-way creation of illusional movement. The sketch gives the user a blank canvas on which to start drawing, and gives rise to the user drawing on screen the shape that they want to create out of a trail of squares – the entire trail also moves horizontally in response to the mouse to let the user have more input into its position. In turn, the sketch takes this trail and gives feedback not only in a rise and fall of the squares based on a sine curve, but also by slowly rocking the squares back and forth to create the illusion of the entire shape on screen tumbling towards the user. 

Final Sketch

Click and drag - creates a tumbling effect of squares which responds horizontally to mouse movement.


A development of the Wave of Squares sketches using subtle rotation and altering of the transparency in response to vertical position to give the illusion of the shape rotating about the x axis.

Wave of squares 4 (Simple experiment 2)

Click to create squares which 'bounce' and move from left to right in response to the mouse.


Finally managed to get each square rotating individually! I like the tumbling effect this produces.

Spinning squares (Simple experiment 3)

Speed of rotation responds to distance between mouse and square. Click and hold to reverse the square shrinking or growing.




Used a custom function (with help from http://processing.org/learning/basics/variablescope.html) to create the second square, which works as a sort of target to keep the white square within.

Spinning square

Speed of rotation responds to distance between mouse and square. Click and hold to reverse the square shrinking or growing.


Have fixed the code on this since the last blogged version - now responds better to mouse movement and has limits on the square's size.

Wave of squares 3

Added some code to the previous version in an attempt to make the squares hinge back and forth... It has just statically rotated them. Will work on fixing this.

Crazy spinning square

Woah. Need some more control here (might want to link to the sketch to see it start as it grows outside of the page pretty quickly) but it's kinda cool :)

Click and hold to shrink and move the mouse to alter the speed of rotation.

Attempt at mouse-responsive rotation

Work in progress - starting to respond to mouse but not in the way I wanted.

Bars 3 - Grow and shrink (Simple experiment 1)

Bars are created when mouse is moved across the screen. Bars grow and shrink of their own accord.


Have altered the code on this since the last version so that the mouse does not need to be held down to create the bars, which I think works better.

Bars 2

Fixed code so that the height of the rectangles returns to zero each time the mouse is released.

Wave of squares 2

Made a few tweaks to the code to get the most recently created square to move and to make the squares a little more independent of the mouse.

Wave of squares

Progress

Working on codes - planning next stages of development...

Bars

Click to create the bars - wanting to make the size of the bars return to zero on each click and also have the bars shrink when the mouse passes - looking at 'if' statements possibly?

Moving Squares

Interesting, but not the effect I was after. Also, it does a weird thing in Processing (this is the code copied to Open Processing) where it creates a duplicate square up in the top left corner on every click, as well as the one at the mouse location which messes up the sketch - not sure why this is happening.

Chasing the Almighty Dollar

Something I came across in my quest to find out how to make the squares move. Kind of the opposite to what I want to do, but still cool - thought I'd document :)

http://installationspace.com/spaces/net-art/2011/01/09/chasing-almighty-dollar/

Success!

Finally! Thank you for your help Steven... Still a way to go but at least my array is working!

Progress

Currently in progress is an attempt to create a sketch where spinning squares appear on click command (where the cursor is) and follow in relation (not directly to) the mouse. I'm very stuck. I'm using arrays to set up the squares, and a mousePressed function to create the squares where the mouse is clicked but it's not working. The program keeps giving me the 'array out of bounds' error and I have tried numerous times to fix it but to not avail. Nothing I have googled or looked up in my book is helping.


int numRect = 0;
float x = 100;
float y = 100;
int indexPosition = 0;

float[] rectXps = new float[0];
float[] rectYps = new float[0];

void setup() {
  size(700, 400);
  background(255);
  smooth();
}

void draw() {
  rectXps[indexPosition] = mouseX;
  rectYps[indexPosition] = mouseY;

  int i = 0;
  while (i > 0) {
    rectXps[i] = mouseX/2;
    rectYps[i] = mouseY/2;
    i = i+1;
  }

  int j = 0;
  rect(rectXps[j], rectYps[j], random(x), random(y));

}

void mousePressed() {
  numRect = numRect + 1;

  rectXps = expand(rectXps, numRect);
  rectYps = expand(rectYps, numRect);

}

Click Rotator 2

Spins when mouse clicked and held. Almost reminds me of pressing the accelerator down in a car - could I turn this into a wheel and incorporate that into my interactive sketch?

I want to try to get the rotation to increase, as in accelerating, but not sure how to do this - have tried a ++ function but this just seems to make the square spin at crazy speeds instantly...

Progress

Click Rotator

Spins and stops on click command. Now working to make the square appear on left click command and spin/stop on right click command.

Sketch - Click Rotator - in progress

Click to rotate - want this to rotate continuously on one click though.

Sketch - Rotating Square

Step 1 - check. I have the rotating square. Next step is to add mouse interaction.

Progress

So far I have my three initial concepts, and am looking at developing all three, but concentrating mostly on the first one which has the rotating squares. After the class discussion, I've decided I'm going to work on getting the squares to rotate, then add mouse interaction to make the squares rotate with momentum with the mouse. After this, I'm going to alter the shape of the squares to a cog type shape and see if I can get the cogs to interlock and rotate with each other, with the intention of the user being able to drag cogs together and make them all rotate as a chain reaction.

Initial Concepts

Further Inspiration

Research/Inspiration Project 2

Ragdoll Aquarium

Interactive sketch example 1 - ragdolls move/scatter with momentum when mouse is dragged over the screen. Ragdolls all float independently without interaction also.

I thought this was a really interesting example of an interactive sketch that encourages input from the user with a careful balance of control and interaction. The dolls all move slowly all the time, but can be picked up and 'thrown' across the screen with the mouse. They don't just sit there when there's no interaction, so it's not boring, but there is significant enough reaction from the sketch with little mouse input to make it engaging for the user.


Rotation and Zoom Composite Warp Grid

Interactive sketch example 2 - particles appear to repel from the mouse and create curvy patterns as the mouse is moved across the sketch.

I absolutely love this sketch - the way it appears to repel the mouse is something I'm thinking about putting in my sketches and the patterns it produces as a result of moving the mouse are really pretty and encourage user interaction.

Per Pixel Image Rotation

Interactive sketch example 3 - wheel spins with altering speed as you move the mouse across the sketch.

This is something I'm thinking about putting into one of my sketches - an object which rotates as you move the mouse across the screen... Very cool. Obviously I'd be making a more visually complex sketch with the rotation just being an element of the whole, so as to make sure the sketch was interactive enough to hold the user's attention.

Final Sketches

Project 1 Final A
Project 1 Final B
Project 1 Final C
Project 1 Final D
Project 1 Final E
Project 1 Final F
Project 1 Final G
Project 1 Final H

I was unable to successfully upload the applets to open processing, so the codes I wrote in processing have been copied and pasted into the 'Create a Sketch' function.

Also, sketches are embedded in my blog, rather than the pdfs uploaded, as pdfs cannot be directly uploaded without conversion first to jpg images and I assumed it would give the same result. :)

Project 1 Final H

I really like how the progression (and growth) of ellipses, and respective line weights, creates a different elliptical pattern going from left to right. This is created by the transparency of the lines - reduced opacity combining in the overlapping areas. The meeting points of the lines form outwardly extending radial patterns also with semi-transparent parts of non-overlapping lines.

Project 1 Final G

This was actually a code I almost abandoned as it really wasn't working, but I altered the variables for the width and height of the ellipses until I got them to create a smooth sin curve type pattern at the top and bottom of the sketch. It's the growth of the sides of the ellipses that forms these really visually appealing curves. I've also made the line weight a variable, so that it begins really really thin and builds up to wider bands as the pattern spreads out.

Project 1 Final F

Again playing with line transparencies and varying line widths. It makes a really nice symmetrical pattern with criss-cross detailing on the overlaps. The sweeping pattern creates a little bit of depth into the image which is a really nice addition.

Project 1 Final E

Here, I was playing with transparent fills and building layer upon layer to create a gradient effect. This subtle fading helps to give the image depth, acting as a sort of shadow/peak illusion.

Project 1 Final D

This sketch has a beautiful folding effect created by overlapping paths, with a glow from dense overlapping on the edges. I like how this suggests another structure within the actual structure of multiple ellipses, with the overlaps forming a central square of negative space.

Project 1 Final C

This structure is similar to Final D, but the variables have been adjusted to form a slightly different structure - it's amazing to see how two numbers adjusted can change the sketch. The lines give the illusion of a sort of ribbon tapering and curving across the page - I really like this one.

Project 1 Final B

I love this one - it alludes to such depth within the image, just by layering ellipses. The result of the ellipses, the cone shapes, appear to slot together, creating an intense overlapping of lines with reduced opacity. I did this by reducing the width of these ellipses, tapering them from their anchor points at the corners to the other end of the sketch respectively.

Project 1 Final A

This was my first manipulation of the original code (which was 'Final B'). I extended the variables far beyond the edges of the sketch to make the large slinky type forms which you can see just the edges of. I also faded the translucency of the ellipse strokes in opposite directions up and down the page.

Inspiration...

The Adobe Reader logo provided my inspiration for my final sketches. The curves and illusion of depth interested me and I set about creating my own designs stemming from this curvaceous shape. Also, I think red is a very striking colour and provides great interest in the image.

Ripple

Experiment with random stroke colour - animated for extra impact :)

Blues

Was trying to get this to loop... but I actually quite like the structure just static - the lines taper to a centre point which draws the focus to the centre of the image.

Green

Playing with animation - I like how the lines cross to create a linear structure - may develop this criss-cross pattern to something a little more complex for visual interest.

Sketchboard

Just playing with mouse interaction... Drag to draw. Click to stop and then click to draw again.
I realise this isn't really structured so will revise ideas.

Small Flash

Drag to draw. Still playing with mouse interaction and random colour generation. Will look into more structured sketches now.

Flash - Epileptic warning - strobe colours!

Playing with basic mouse interaction. Click to go back to a small circle again.

Black Hole

So excited I finally managed to get this to work!! For ages I had the code twitching at the maximum point because I had conflicting lines of code. Fixed it and I get this looping animation just with variables on the radius of the circle making it grow.

Crazy lines

Love the structure these lines form at their maximum point - tapering to the edge of the sketch to form a curve.

Aqua

I have no idea how this happened - happy accident!

Target

Trying to make the code repeat, any ideas?

First Attempt at Digital Coding... :)

Created with the pattern maker... Great but don't know how I did it - such trial and error!!

DSDN142 - Exercise 1 Final

Final concept

Final concept (top view)

Final composition

Code:

(U = 2cm)

1U →

Bend by 50˚ ↓

Rotate 50˚ clockwise around z axis

Rotate 90˚ clockwise around y axis

1U←

Bend by 55˚ ↑

Rotate 55˚ clockwise around z axis

Rotate 90˚ clockwise around y axis

Repeat x2

Repeat x3 where U = 2U

Repeat x3 where U = 3U

-------

Repeat all x2 → and rotate each time by 180˚ around y axis

-------

Repeat all x3 ↓ and rotate each time by 180˚ around y axis

DSDN142 Exercise 1 - Developments

Have chosen this concept to develop - I really like the fluidity in the flow of each peak, and the 3D quality. This concept increases the length of the sizes each peak and is relatively compact.

Development 1 - Playing with an extra peak - 4 in each round rather than just 3. Increasing the size between every bend in the wire.  Creates an interesting effect, but a little too abstract and not what I'm looking for.

Development 2 - Similar to development 1 but only increasing the size between each bend in the wire after a completion of a round of four peaks.  Creates a really nice almost lotus shaped effect which I really like.

Development 3 - Experimentation with four peaks and returning to increase the length between each bend - didn't work out as well as hoped - don't like the effect here, but worth trying.

Development 4 - Trying 2 peaks - I like the effect (each peak has equal length of sides, but increases on each one), but don't like how it sits quite flat on the table.

Development 5 - Trying a mirror effect and also a different material that doesn't kink so badly and holds the shape better. Quite like this.

Development 6 - Turns out after a bit of experimentation I like the original 3 peaks, but instead of increasing the size of each peak as in the original concept, have kept each set of peaks the same size, just increasing the size by 2cm each round. I like how this is more spread out, almost like flower petals. 

DSDN142 Exercise 1 - Initial Concepts

1 - Quite an intricate design, but too many long sections in the same direction
2 - I like how this is balancing on the tips of the triangle shapes, but the design needs to be a little more interesting
3 - Too geometrical but like the repetition
4 - Really nice simplistic design, probably 3rd favourite
5 - A little flat, needs more interest
6 - Looks like a fancy toast rack, but like the peaks
7 - Really like this but potentially a little too intricate
8 - Don't like this, too boring
9 - Don't like this one either, resembles joined cubes too much
10 - Really like this one, probably my favourite so far, intricate and eye catching design and good strong repetition
11 - 2nd favourite, a play on 4 with alternated direction of peaks