ICM Algorithm and Button: Color Stream

· · · · · · | Intro to Computational Media

For this project I worked with the amazing: Jasmine Soltani

 

Our inspirations:

buttons


particles inspiration


GRADIENT


Our Process:

making a button:

taking a lot of time out to design it’s usability and aesthetic.

Screen Shot 2015-09-20 at 5.10.20 PM


Screen Shot 2015-09-20 at 5.04.33 PM


Jasmine had designed a gradient stream by moving a ellipse across the while adjusting it’s color and leaving the background slightly transparent.


After looking at our inspirations we decided that we could move forward with the work she had already done.


We started by getting the “color stream” to replicate and populate itself down the canvas (using for()).


Screen Shot 2015-09-20 at 5.02.53 PM


and realized we could adjust the gradients by creating variables for the start and end colors of our ‘color streams’. Then adding a 3rd variable that allowed us to add red into those streams.


Screen Shot 2015-09-20 at 5.02.49 PM


We also worked to get the streams to appear to continually loop across the screen.


Screen Shot 2015-09-20 at 5.00.18 PM


We created then we created a second series of streams running in the opposite direction.


2 streams


We tried to use the button to control the direction of our streams/ the movement of our ellipses but were having trouble because we used the wrong code. We put our click command within the draw loop. Very confusing for the comp.


Screen Shot 2015-09-20 at 5.31.46 PM (1)


We finally figured it out and moved our code for the mouse click into it’s own loop.


here’s the final product: http://blog.annekgoodfriend.com/icm/algorithm%20FINAL/


CLICK, CLICK, CLICK! HAVE FUN!!!


No Comments

Comments are closed.