Skip to content

Instantly share code, notes, and snippets.

@shinaisan

shinaisan/index.html

Created April 15, 2012 06:06
Show Gist options
  • Save shinaisan/2390346 to your computer and use it in GitHub Desktop.
Save shinaisan/2390346 to your computer and use it in GitHub Desktop.
Download ZIP
Processing.js sample: dragging a circle(ellipse) using mousePressed/mouseReleased.
Raw
index.html
<html>
<head>
<title>My first processing.js sample</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Sample: Dragging the ball</h1>
<script type="application/processing" src="test.processing"></script><canvas></canvas>
<br/>
Useless:)
</body>
</html>
Raw
test.processing
/* -*- mode: java -*- */
Ball ball = null;
void setup() {
size(400, 300);
frameRate(16);
stroke(#008800);
fill(#0000ff);
ball = new Ball(width / 2, height / 2);
}
void draw() {
background(#ddeeff);
ball.move();
ball.draw();
}
void mousePressed() {
if (ball.mouseOver(mouseX, mouseY)) {
ball.mousePressed();
}
}
void mouseReleased() {
ball.mouseReleased();
}
class Ball {
int x, y;
int radius;
Ball(int x, int y) {
this.x = x;
this.y = y;
this.radius = 32;
}
boolean moving = false;
void mousePressed() {
moving = true;
}
void mouseReleased() {
moving = false;
}
boolean mouseOver(int mx, int my) {
return ((x - mx)*(x - mx) + (y - my)*(y - my)) <= radius*radius;
}
void move() {
if (moving) {
this.x = mouseX;
this.y = mouseY;
}
}
void draw() {
if (moving) {
fill(#ffff00);
} else {
fill(#0000ff);
}
ellipse(x, y, radius, radius);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment