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.