March 14, 2008 at 6:51 pm · 3,954 views · Filed under portfolio, tutorial
I have been thinking of different interactions that are possible with objects. If you’ve read this blog at all you’ll know that I’ve played with physics and gravity and throwing balls and bouncing balls and all sorts. But I hadn’t wrapped my head around an interactive spinner. I know it’d be easy to make a slider or something that would apply a spin to an object, but this just isn’t interactive enough for me.
Circle with slider to rotate and button for random spin:
This attempt at spinning is ok. I mean, it spins the object and it even glides to a stop if you press the button for a random spin… But it’s just not intuitive and not fun. But if you want this, here’s how I did it.
I want to grab it and spin it though. I want to apply the same principles from physics, like acceleration and friction as forces to the object, so I can grab to spin and release to watch it glide gracefully to a stop. I’ve been thinking about this and how I’d have to use trigonometry and stuff to do it. One day I finally had the time and tried it out. It took me a minute but I figured out that what I needed was arctangent. So (with pointers from jbum, thanks Jim!) I came up with this:
Interactive grab-able circle to spin and twirl:
This one is much more interactive and intuitive. I really think this is because there are no sliders or buttons, no controls, just an object to interact with. It’s much more like real life!
Steps:
In order to make a grab and spin object
1. You have to know where you grab. The user clicks on the shape (knob) and you must figure out what degree or rotation point they have started at. (atan2)
2. As the knob is clicked and the mouse moves (dragging), calculate new rotation by mouse position
3. When mouse is released figure out the current speed of rotation and apply it to the knob with friction, so it can be thrown and spun in that way. (Of course this is optional, if you just want to spin it when the mouse is down you’re done at step 2)
Actionscript:
damp = .96; //friction
r = 0; //rotation
accr = 0; //speed of rotation
knob.onPress = function(){
dragging = true;
//find mouse y coordinate in relation to knob origin
a = _root._ymouse - knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse - knob._x;
//using arctangent find the spot of rotation (in degrees)
//find mouse y coordinate in relation to knob origin
a = _root._ymouse-knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse-knob._x;
//using arctangent find the spot of rotation (in degrees)
r = Math.atan2(a,b)*180/Math.PI;
//use current rotation and previous rotation
//to find acceleration
//averages the acceleration with the
//previous acceleration for smoother spins
accr = ((r - oldr) + accr)/2;
//apply the acceleration to the rotation
knob._rotation += accr;
//remember current rotation as old rotation
oldr = r;
feedbacka.text = a;
feedbackb.text = b;
}
else{
knob._rotation += accr;
//apply friction to acceleration force
//and if acceleration gets tiny, just set it to zero
if(Math.pow(accr, 2) > .0001){
accr *= damp;
}
else{
accr = 0;
}
}
//spit out feedback continuosly
feedbackr.text = knob._rotation;
feedbackaccr.text = accr;
}
I commented the code to explain what is happening, if you need more just post a comment. Let me know if you find this useful and what you end up making with it.
January 23, 2008 at 5:51 pm · 416 views · Filed under portfolio
Just added a poll plug-in to the site!
I’m polling readers to see what they want next, in regards to posts.
I have so many post drafts and even more post ideas and instead of letting them roll out in my usual leisurely fashion, I figured I’d let you prioritize them for me…
So vote in the poll to let me know what you want!
Feel free to contact me if you have any ideas that I haven’t listed yet. I enjoy knowing I’m writing for someone who is interested!
This poll is closed, and I’m working on the winning post! Integrating Google Analytics with Flash!
So keep posted, or subscribe to the RSS for immediate automatic free update.
I’ll keep a running poll in the side bar of the site so keep voting and suggesting your Most Wanted Posts!
December 18, 2007 at 7:37 pm · 271 views · Filed under portfolio
Here’s the new circlecube logo! I’ve had it for a while, but hadn’t uploaded it.
I still have to update my theme to incorporate it. I like the green transparent circlecube graphic in the header now but it’s gotta go… and plus it’s a little too green.
Circle Cube . com
Toggle the help window with ‘h’.
Click the pogs to explore each piece, if applicaple click the ‘open window’ link.
Pog options are aligned across the top of the bay window, use them to adjust the properties within the bay area. Mix and match until you find your fit. Tag buttons are across the bottom, click to specify the genre of art to display.
Gravity:
Toggle the force of gravity acting on the pogs. Pogs with gravity on will be pulled down and bounce according to mass.
White is on. Black is off.
Spring:
Toggle the spring or elasticity option. Pogs will hinge to a point and orbit that point.
White is on. Black is off.
Grid:
Toggle the grid option. The pogs can either form into an array of pogs or move aimlessly in the space.
White is on. Black is off.
Friction:
Toggle the force of friction acting on the pogs. Pogs with friction will slow down and over time eventually stop.
White is on. Black is off.
Tags:
Click these tag button descriptors to see only that style of work in the portfolio.
Select all work, video, new media, animation, or drawing.
March 21, 2007 at 7:03 pm · 146 views · Filed under portfolio
Circle cube graphic pushing colors. Thinking of the design as shapes in a stained glass window.
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.
Loading ...
