Home Contact RSS

Men Circles | Interactive Experiment

February 20, 2008 at 7:01 pm · 497 views · Filed under portfolio

Here’s a graphic of a circle of men. You may recognize the outline from any public restroom. They’re standing in a corny circle holding hands, like an all over the world theme., let’s just hope they all washed their hands…

I made the graphic a while ago, and have been wanting to interactive-ize it. I’ve really been wanting to play with elasticity, throwing things and snapping to a point… Although I’m still thinking about a version where I’d spin the objects rather than just throw them, I figured I’d put it up for any feedback that comes.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

The different pieces all rotate differently and it changes if you are dragging or ‘holding’ them. Then you can press the anchor (gray) button to toggle the snap. The objects will all center around the anchor and spring into place (elasticity applied to position and rotation). And then the interactivity changes and rather than dragging and dropping them, you push and bump or throw them. It almost turns into a game…

Here’s some of the actionscript

  1. _root.tr = 0;
  2. _root.k = 0.2;
  3. _root.damp = .9;
  4. _root.margin = 150;
  5. _root.heads.ax = 0;
  6. _root.heads.vx = 0;
  7. _root.heads.ay = 0;
  8. _root.heads.vy = 0;
  9. _root.heads.ar = 0;
  10. _root.heads.vr = 0;
  11. _root.heads._x = (Math.random() * (Stage.width + _root.heads._width)) - _root.margin;
  12. _root.heads._y = (Math.random() * (Stage.height + _root.heads._height)) - _root.margin;
  13.  
  14. //Heads
  15. _root.heads.dragging = false;
  16. _root.heads.onEnterFrame = function() {
  17. if (!_root.center.dragging){
  18. if (_root.heads.dragging){
  19. this._rotation += 1.2;
  20. }
  21. else {
  22. rot = this._rotation + Math.random();
  23. xmouse = _root._xmouse/Stage.width;
  24. this._rotation += rot + xmouse;
  25. }
  26.  
  27. this._x+=Math.random()*2 - 1;
  28. this._y+=Math.random()*2 - 1;
  29.  
  30. }
  31. else {
  32. //_root.heads._x = _root.center._x;
  33. //_root.heads._y = _root.center._y;
  34. _root.heads.ax = (_root.center._x - _root.heads._x) * _root.k;
  35. _root.heads.vx += _root.heads.ax;
  36. _root.heads.vx *= _root.damp;
  37. _root.heads._x += _root.heads.vx;
  38.  
  39. _root.heads.ay = (_root.center._y - _root.heads._y) * _root.k;
  40. _root.heads.vy += _root.heads.ay;
  41. _root.heads.vy *= _root.damp;
  42. _root.heads._y += _root.heads.vy;
  43.  
  44. _root.heads.ar = (_root.tr - _root.heads._rotation) * _root.k;
  45. _root.heads.vr += _root.heads.ar;
  46. _root.heads.vr *= _root.damp;
  47. _root.heads._rotation+=_root.heads.vr;
  48. }
  49. this.onPress = function() {
  50. startDrag(this, false);
  51. _root.heads.dragging = true;
  52. }
  53. this.onRelease = this.onReleaseOutside = function() {
  54. stopDrag();
  55. _root.heads.dragging = false;
  56. }
  57. this.onRollOver = function() {
  58. if(_root.center.dragging){
  59. startDrag(this, false);
  60. _root.heads.dragging = true;
  61. }
  62. }
  63. this.onRollOut = function() {
  64. if(_root.center.dragging) {
  65. stopDrag();
  66. _root.heads.dragging = false;
  67. }
  68. }
  69. }
  70.  
  71. //Button
  72. _root.center.dragging = false;
  73. _root.center.onEnterFrame = function() {
  74. this.onPress = function() {
  75. startDrag(_root.center, false);
  76. _root.center.dragging = !_root.center.dragging;
  77. if (_root.center.dragging) {
  78. this.gotoAndStop("on");
  79. }
  80. else {
  81. this.gotoAndStop("off");
  82. }
  83.  
  84. //var vr:Number = 0;
  85. }
  86. this.onRelease = this.onReleaseOutside = function () {
  87. stopDrag();
  88. //_root.center.dragging = false;
  89. }
  90. }

Tags: , , , , , ,

Comments

Rollover elastic bounce rezise

July 26, 2007 at 1:57 pm · 1,010 views · Filed under portfolio

Flash experiment that could be used for navigation. Rollover each area and watch them all resize themself to accomodate the growing box. It’s pretty fun to play with.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
I’m sure there is a way to simplify the code, but this worked so there was no need.
Actionscript:

  1. import mx.transitions.easing.*;
  2. import mx.transitions.Tween;
  3. var normWidth:Number = mc_1._width;
  4. mc1x = mc_1._x;
  5. mc2x = mc_2._x;
  6. mc3x = mc_3._x;
  7. mc4x = mc_4._x;
  8. mc_1.onRollOver = function ():Void  {
  9. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  10. //Double in size
  11. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  12. mc_1.gotoAndPlay("over");
  13. //Shrink by 33% and move 66% along using width
  14. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  15. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
  16. //Shrink by 33% and move 33% along using width
  17. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  18. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
  19. //Shrink by 33%, no need to move as already in position
  20. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  21. //trace("rollOver 1");
  22. };
  23. mc_1.onRollOut = function ():Void  {
  24. //Return to normal width
  25. var mc1Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  26. mc_1.gotoAndStop("up");
  27. //Return to normal width and use mc_1 as basis for x
  28. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  29. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
  30. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  31. //Return to normal width and use mc_4 as basis for x
  32. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  33. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
  34. //Return to normal width
  35. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  36. //trace("rollOut 1");
  37. };
  38. mc_2.onRollOver = function ():Void  {
  39. //Double in size and move left 33%
  40. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  41. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
  42. mc_2.gotoAndPlay("over");
  43. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  44. //shrink by 33% mc1
  45. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  46. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
  47. //Shrink by 33% and move 33% along using width
  48. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  49. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
  50. //Shrink by 33%, no need to move as already in position
  51. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  52. //trace("rollOver 2");
  53. };
  54. mc_2.onRollOut = function ():Void  {
  55. //Return to normal width and position
  56. var mc2Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  57. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
  58. mc_2.gotoAndStop("up");
  59. //Return to normal width and use mc_1 as basis for x
  60. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  61. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  62. //Return to normal width and use mc_4 as basis for x
  63. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  64. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
  65. //Return to normal width
  66. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut,normWidth * 2 / 3, normWidth, 1, true);
  67. //trace("rollOut 2");
  68. };
  69. mc_3.onRollOver = function ():Void  {
  70. //Double in size and move left 33%
  71. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  72. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
  73. mc_3.gotoAndPlay("over");
  74. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  75. //shrink by 33% mc1
  76. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  77. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
  78. //Shrink by 33% and move 33% along using width
  79. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  80. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
  81. //Shrink by 33%, no need to move as already in position
  82. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  83. //trace("rollOver 3");
  84. };
  85. mc_3.onRollOut = function ():Void  {
  86. //Return to normal width and position
  87. var mc3Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  88. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
  89. mc_3.gotoAndStop("up");
  90. //Return to normal width and use mc_1 as basis for x
  91. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  92. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  93. //Return to normal width and use mc_4 as basis for x
  94. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  95. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
  96. //Return to normal width
  97. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  98. //trace("rollOut 3");
  99. };
  100. mc_4.onRollOver = function ():Void  {
  101. //shrink in size and move left 33%
  102. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2/3, 1, true);
  103. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * - 3 / 3), 1, true);
  104. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  105. //shrink by 33% mc1
  106. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  107. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
  108. //Shrink by 33% and move 33% along using width
  109. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  110. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
  111. //double in size, no need to move as already in position
  112. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  113. mc_4.gotoAndPlay("over");
  114. //trace("rollOver 4");
  115. };
  116. mc_4.onRollOut = function ():Void  {
  117. //Return to normal width and position
  118. var mc3Move:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2/3, normWidth, 1, true);
  119. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * - 3 / 3), mc3x, 1, true);
  120. //Return to normal width and use mc_1 as basis for x
  121. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  122. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  123. //Return to normal width and use mc_4 as basis for x
  124. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  125. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
  126. //Return to normal width
  127. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  128. mc_4.gotoAndStop("up");
  129. //trace("rollOut 4");
  130. };

Here is the source file for those who want.

Tags: , , , , , , , ,

Comments

Synesthesia | Installation- converting sound to shape and color

April 6, 2007 at 12:58 pm · 265 views · Filed under portfolio

synesthesia
1. A condition in which one type of stimulation evokes the sensation of another, as when the hearing of a sound produces the visualization of a color.

Installation. May 2005
I had a microphone feed into the computer and audio from the room changed the display. I displayed a circle related to the voice of the room (pitch relates to size, and volume relates to color). As the viewer/participant speaks or sings or yells they see their voice transformed into colorful movements of varying size. The louder the sound- the colors of these forms brightened. In the background I had a sweeping cascade of colored lines. These would take control if there was no noise in the space.
I plan on making the display available online using personal mics from viewers computers to animate it. Ideally I would want multiple users to be able to log on and effect the animation collectively. Each input will generate shapes.

Here is a captured video feed.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Tags: , , , , ,

Comments

Circle Cube

March 21, 2007 at 7:03 pm · 158 views · Filed under portfolio

Circle cube graphic pushing colors. Thinking of the design as shapes in a stained glass window.

circle cube mixed up

ARST4810 CAD Fab class exhibition.
My Shattered Little World
Slide, Circle cube

Published in the Flagpole, April 4th 2007:
Rhinoceros Makes Art: Students in Michael Oliveri’s Computer Aided Design and Fabrication class at UGA are exhibiting their work in the Thomas Street Gallery. Using the computer program Rhinoceros, the students have created a diverse set of images.J.B. Courson ’s “Alpha Hab and Worker Drones” could be plans for the set of a Star Wars movie. Caroline Covington’s “Closure” re-invents the kamikaze bomb, with essential accompanying text. Diana Gurley’s circular imagery hovers on the page like hot-air balloons. Matthew McDonald’s “Lupa Ad Nauseam,” as the Latin title states, is an image of a wolf vomiting. The drawing of the wolf appears to be taken from a realistically executed etching, while the vomit is discretely portrayed as a splatter of color. Edward Whelan’s abstract geometric piece looks back to the Italian Futurists, with a fresh new design. Evan Mullins and Louis Grabowski have both created images of realistic-looking objects of play. Works by Andy Anzardo, Alex Castellanos, Jason Maddox, Chris Merz, Winston Parker and John Powers are also included in the show, which runs through Apr. 5, so hurry! The Thomas Street Gallery is located in UGA’s Sculpture Annex just off Broad Street.

Tags: , , , , , ,

Comments

Circle Cube

March 21, 2007 at 7:01 pm · 154 views · Filed under portfolio

3D circle cube vector graphic.
circle cube green/purple/blue

Tags: , , , ,

Comments

Color Field

March 1, 2007 at 3:53 pm · 149 views · Filed under portfolio

Video Art made simply with colors.

Tags: , , , , ,

Comments

Self Portrait

February 23, 2007 at 9:15 am · 455 views · Filed under portfolio

Color oil pastel Self portrait.

Self Portrait (color)

Tags: , , ,

Comments

The End

February 23, 2007 at 9:10 am · 595 views · Filed under portfolio

The End, sequel to The Beginning. A drop-paper oil on water painting.

the end

Tags: , ,

Comments

Next entries »