Skip to content

Instantly share code, notes, and snippets.

@yurydelendik
Created July 31, 2012 18:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yurydelendik/3219490 to your computer and use it in GitHub Desktop.
Save yurydelendik/3219490 to your computer and use it in GitHub Desktop.
Processing.js snippets
// ------ simple sketch
line(10, 10, 90, 90);
// ------ eye
void setup()
{
size(200, 200);
smooth();
}
void draw()
{
background(0, 0, 255);
fill(255, 255, 255);
ellipse(100, 100, 80, 120);
fill(0, 0, 0);
ellipse(90, 90, 40, 40);
}
// ----- eyes (PDE)
void setup()
{
size(200, 200);
smooth();
}
void draw()
{
background(#0000FF);
drawEye(50, 100);
drawEye(150, 100);
}
final float RX = 40, RY = 60, RC = 20;
void drawEye(int cx, int cy)
{
noStroke();
fill(255, 255, 255);
ellipseMode(CENTER);
ellipse(cx, cy, 2 * RX, 2 * RY);
float angle = atan2((mouseY - cy) / RY, (mouseX - cx) / RX);
float r = min(1, sqrt(sq(mouseY - cy) / sq(RY) + sq(mouseX - cx) / sq(RX)));
float dx = r * cos(angle) * (RX - RC), dy = r * sin(angle) * (RY - RC);
fill(0, 0, 0);
ellipse(cx + dx, cy + dy, 2 * RC, 2 * RC);
}
// ------ crazy eyes
float angle = radians(frameCount * 10 % 360);
float r = noise(1);
float dx = r * cos(angle) * (RX - RC), dy = r * sin(angle) * (RY - RC);
// ------ simple pjs
<script src="http://processingjs.org/js/processing.min.js"></script>
<canvas data-processing-sources="eyes.pde"></canvas>
// ------ IE9 friendly pjs
<!doctype html>
<html>
<head>
<script src="http://processingjs.org/js/processing.min.js" type="text/javascript"></script>
<!-- <script src="http://localhost/~yury/Work/processing-js/release/processing.js" type="text/javascript"></script> -->
</head>
<body>
<canvas id="sketch" data-processing-sources="eyes.pde"></canvas>
</body>
</html>
// ---------- for processing-helper
class A
{
public int x;
public void method() {}
}
class B extends A
{
public int y;
}
class C extends B
{
public void method() {}
}
// ---------- javascript eyes w/with
<!doctype html>
<html>
<head>
<script src="http://processingjs.org/js/processing.min.js" type="text/javascript"></script>
<!-- <script src="http://localhost/~yury/Work/processing-js/release/processing.js" type="text/javascript"></script> -->
</head>
<body>
<canvas id="sketch"></canvas>
<script>
var sketch = new Processing('sketch', function(p) {
with(p) {
var setup = p.setup = function setup()
{
size(200, 200);
smooth();
}
var draw = p.draw = function draw()
{
background(0xFF0000FF);
drawEye(50, 100);
drawEye(150, 100);
}
var RX = 40, RY = 60, RC = 20;
var drawEye = p.drawEye = function drawEye(cx, cy)
{
noStroke();
fill(0xFFFFFFFF);
ellipseMode(CENTER);
ellipse(cx, cy, 2 * RX, 2 * RY);
var angle = atan2((mouseY - cy) / RY, (mouseX - cx) / RX);
var r = min(1, sqrt(sq(mouseY - cy) / sq(RY) + sq(mouseX - cx) / sq(RX)));
var dx = r * cos(angle) * (RX - RC), dy = r * sin(angle) * (RY - RC);
fill(0xFF000000);
ellipse(cx + dx, cy + dy, 2 * RC, 2 * RC);
}
}
});
</script>
</body>
</html>
// ---------- javascript eyes
<!doctype html>
<html>
<head>
<script src="http://processingjs.org/js/processing.min.js" type="text/javascript"></script>
<!-- <script src="http://localhost/~yury/Work/processing-js/release/processing.js" type="text/javascript"></script> -->
</head>
<body>
<canvas id="sketch"></canvas>
<script>
var sketch = new Processing('sketch2', function($p) {
$p.setup = (function setup()
{
$p.size(200, 200);
$p.smooth();
});
$p.draw = (function draw()
{
$p.background(0xFF0000FF);
drawEye(50, 100);
drawEye(150, 100);
});
var RX = 40, RY = 60, RC = 20;
function drawEye(cx, cy)
{
$p.noStroke();
$p.fill(0xFFFFFFFF);
$p.ellipseMode($p.CENTER);
$p.ellipse(cx, cy, 2 * RX, 2 * RY);
var angle = Math.atan2(($p.mouseY - cy) / RY, ($p.mouseX - cx) / RX);
var r = Math.min(1, Math.sqrt($p.sq($p.mouseY - cy) / $p.sq(RY) + $p.sq($p.mouseX - cx) / $p.sq(RX)));
var dx = r * Math.cos(angle) * (RX - RC), dy = r * Math.sin(angle) * (RY - RC);
$p.fill(0xFF000000);
$p.ellipse(cx + dx, cy + dy, 2 * RC, 2 * RC);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment