融入动画技术的交互应用
桌面台球
作业要求完成情况
- 向量:桌面台球系统的台球运动与球杆撞击计算均采用向量方式
- 物理函数库:利用Java-Box2D实现物理仿真
- 力:利用物理公式与摩擦力计算台球的运动状态与最终停留状态
以上实现了《代码本色》中的三个要求,接下来是代码详解与效果截图。
代码详解
引用情况
import shiffman.box2d.*;
import org.jbox2d.collision.shapes.*;
import org.jbox2d.common.*;
import org.jbox2d.dynamics.*;
import org.jbox2d.dynamics.contacts.*;
Processing、Box2D初始化与update
void setup() {
// Initialize our box2d world (and our table)
initWorld();
// Load cursor for writing text
cursor = new Cursor();
}
void initWorld() {
// Initialize box2d physics and create the world
box2d = new Box2DProcessing(this);
box2d.createWorld();
// We are setting a custom gravity (no gravity)
box2d.setGravity(0, 0);
// Turn on collision listening
box2d.listenForCollisions();
// Initialize table and players (those floats are sizes)
table = new PoolTable(0.6);
playerManager = new PlayerManager(0.3, 0.13);
}
void update() {
box2d.step();
table.update();
}
void draw() {
smooth();
background(255, 210, 240);
update();
table.display();
playerManager.display();
fill(0);
cursor.locate(10, height - 20);
cursor.setTextSize(12);
cursor.typePrevLine("Press ‘R’ to restart");
if (!table.areBallsStill()) {
cursor.typePrevLine("Press ‘T’ to skip");
}
}
台球运动函数(1/2)
class Ball {
Body body;
float radius;
boolean isDying;
float minSpeed = 0.5;
int number;
PImage ballGraphics;
Ball(float x, float y, float _radius, int _number) {
radius = _radius;
number = _number;
// Create the graphics
ballGraphics = loadImage("img/ball_" + number + ".png");
ballGraphics.resize(int(radius * 2), int(radius * 2)); // Resize once to avoid scaling on display()
// Add th box to the box2d world
makeBody(new Vec2(x, y), radius);
}
Vec2 getLocation() {
return box2d.getBodyPixelCoord(body);
}
void setVelocity(Vec2 velocity) {
body.setLinearVelocity(box2d.vectorPixelsToWorld(velocity));
}
boolean kill() {
boolean wasDying = isDying;
isDying = true; // Mark the ball as dying for it to be animated
return !wasDying; // Return true if it was alive
}
// Determines whether the ball is dead yet or not
boolean isDead() {
return radius < 0.5;
}
// Determines whether the ball is still (stopped) or not
boolean isStill() {
return isDead() || (!isDying && body.getLinearVelocity().length() < minSpeed);
}
void update() {
// If the ball is dying, shrink it
if (isDying) {
radius = lerp(radius, 0, 0.1); // values = from, to, speed
body.setLinearVelocity(body.getLinearVelocity().mul(0.80)); // slow down the body
Fixture f = body.getFixtureList();
CircleShape cs = (CircleShape) f.getShape();
cs.m_radius = box2d.scalarPixelsToWorld(radius);
if (isDead()) { // If the ball radius reached its limit
// Remove it from the box2d world
box2d.destroyBody(body);
}
}
else if (body.getLinearVelocity().length() < minSpeed) {
body.setLinearVelocity(body.getLinearVelocity().mul(0.75));
}
}
// Drawing the ball
void display() {
Vec2 pos = getLocation();
float a = body.getAngle();
pushMatrix();
translate(pos.x, pos.y);
rotate(-a);
imageMode(CENTER);
image(ballGraphics, 0, 0, radius * 2, radius * 2);
popMatrix();
}
private float getDensity(float radius, float mass) {
float area = PI * sq(radius);
return mass / area;
}
// This function adds the ball to the box2d world
void makeBody(Vec2 center, float radius) {
// Define the circle shape
CircleShape sd = new CircleShape();
sd.m_radius = box2d.scalarPixelsToWorld(radius);
......
body.setUserData(this);
}
}
球台管理函数(2/2)
class PoolTable {
// Location and size
Area area;
PImage tableGraphics;
ArrayList<TableBoundary> boundaries; // Track table
ArrayList<Hole> holes;
ArrayList<Ball> balls;
boolean playing;
boolean wasPlaying;
PoolTable(float relativeWidth) {
// Set table size and location
setArea(relativeWidth);
// Create the graphics
tableGraphics = loadImage("img/table.png");
tableGraphics.resize(int(area.w), int(area.h)); // Resize once to avoid scaling on display()
// Create ArrayLists
boundaries = new ArrayList<TableBoundary>();
holes = new ArrayList<Hole>();
balls = new ArrayList<Ball>();
// Determine some values
float holeRadius = getHoleRadius();
float tableBevel = holeRadius; // Use holeRadius as tableBevel for dimensions to fit
float triangleY = height / 2;
float triangleX = area.x + area.w * 0.70; // The triangle will be at the 70% X of the table
// Place table boundaries
placeTableBoundaries(tableBevel);
// Place holes
placeHoles(holeRadius, tableBevel);
// Place the balls triangle
placeBallsTriangle(getBallRadius(), triangleX, triangleY);
}
void setArea(float relativeWidth) {
......
}
// The bevel acts as boundary thickness, hence it becomes is a 45º bevel
void placeTableBoundaries(float bevel) {
......
}
void placeHoles(float holeRadius, float tableBevel) {
......
}
void placeBallsTriangle(float ballRadius, float x, float y) {
......
}
// Sets the real radius that the balls will use
float getBallRadius() {
return area.w * 0.02;
}
float getHoleRadius() {
getBallRadius() * 2f;
}
void update() {
for (Hole hole : holes) {
for (int i = balls.size() - 1; i >= 0; i--) {
Ball ball = balls.get(i);
if (hole.containsBall(ball)) {
if (ball.kill()) { // If we killed the ball, pot it!
playerManager.potBall(ball.number);
}
}
}
}
// Update all the balls
for (int i = balls.size() - 1; i >= 0; i--) {
Ball ball = balls.get(i);
ball.update();
// If a ball is now dead, remove it from our list
if (ball.isDead()) {
balls.remove(i);
}
}
playing = !areBallsStill();
// Toggle the player turns if necessary
if (shouldChangeTurn()) {
playerManager.toggleTurns();
}
}
Ball getCueBall() {
......
return ball;
}
void display() {
imageMode(CORNER);
image(tableGraphics, area.x, area.y);
// Display all the holes
for (Hole hole : holes) {
hole.display();
}
// Display all the boundaries
for (TableBoundary boundary : boundaries) {
boundary.display();
}
// Display all the balls
for (Ball b : balls) {
b.display();
}
}
boolean areBallsStill() {
......
}
boolean cueBallAlive() {
......
}
}
实验效果截图
玩法:放置小球,按住鼠标左键并拖动设置击球力的大小即可~
实验感悟
本交互应用由两人合作完成,参考 代码本色 中的相关动画技术,其中包括第一章的向量,第二章的力,以及第五章的物理函数库。
正如 代码本色 第一章第一节就以“没有向量”的弹球程序为开头引入正文,我们实现了一个“有向量”的弹球程序,即桌面台球,一款非常经典的交互游戏,涉及了最基本的元素——力与运动。其中台球运动与球杆撞击计算均采用向量方式,并使用物理函数库实现物理仿真,利用物理公式与摩擦力计算台球的运动状态与最终停留状态,包括牛顿运动定律与群体运动的内容。