topical media & game development
#javascript-processing-example-basic-math-graphing2dequation.htm / htm
<!DOCTYPE html>
<html><head>
<script src="javascript-processing-example-processing.js"></script>
<script src="javascript-processing-example-init.js"></script>
<link rel="stylesheet" href="javascript-processing-example-style.css">
</head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Graphing2DEquation</h2>
<p>by Daniel Shiffman.
Graphics the following equation:
sin(n*cos(r) + 5*theta)
where n is a function of horizontal mouse location.</p>
<p><a href="http://processing.org/learning/basics/graphing2dequation.html"><b>Original Processing.org Example:</b> Graphing2DEquation</a><br>
<script type="application/processing">
void setup() {
size(50,50);
frameRate(30);
}
void draw() {
loadPixels();
float n = (mouseX * 10.0) / width;
float w = 16.0; // 2D space width
float h = 16.0; // 2D space height
float dx = w / width; // Increment x this amount per pixel
float dy = h / height; // Increment y this amount per pixel
float x = -w/2; // Start x at -1 * width / 2
for (int i = 0; i < width; i++) {
float y = -h/2; // Start y at -1 * height / 2
for (int j = 0; j < height; j++) {
float r = sqrt((x*x) + (y*y)); // Convert cartesian to polar
float theta = atan2(y,x); // Convert cartesian to polar
// Compute 2D polar coordinate function
float val = sin(n*cos(r) + 5 * theta); // Results in a value between -1 and 1
//float val = cos(r); // Another simple function
//float val = sin(theta); // Another simple function
// Map resulting vale to grayscale value
pixels[i+j*width] = color((val + 1.0) * 255.0/2.0); // Scale to between 0 and 255
y += dy; // Increment y
}
x += dx; // Increment x
}
updatePixels();
}
</script><canvas width="50" height="50"></canvas></p>
<div style="overflow: hidden; height: 0px; width: 0px;"></div>
<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
void setup() {
size(200,200);
frameRate(30);
}
void draw() {
loadPixels();
float n = (mouseX * 10.0) / width;
float w = 16.0; // 2D space width
float h = 16.0; // 2D space height
float dx = w / width; // Increment x this amount per pixel
float dy = h / height; // Increment y this amount per pixel
float x = -w/2; // Start x at -1 * width / 2
for (int i = 0; i < width; i++) {
float y = -h/2; // Start y at -1 * height / 2
for (int j = 0; j < height; j++) {
float r = sqrt((x*x) + (y*y)); // Convert cartesian to polar
float theta = atan2(y,x); // Convert cartesian to polar
// Compute 2D polar coordinate function
float val = sin(n*cos(r) + 5 * theta); // Results in a value between -1 and 1
//float val = cos(r); // Another simple function
//float val = sin(theta); // Another simple function
// Map resulting vale to grayscale value
pixels[i+j*width] = color((val + 1.0) * 255.0/2.0); // Scale to between 0 and 255
y += dy; // Increment y
}
x += dx; // Increment x
}
updatePixels();
}</pre>
</body></html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
