Changing Y-axis of spritesheet with click to move - animation

I'm new here and to programming. I have been searching for a while, though I can't find anything to help with the problem.
I'm trying to make my spritesheet cycle through the different walking frames of my spritesheet, I have done it easily with IsKeyDown but when it comes to using the mouse to walk somewhere it took me a while to nut out a 'bad' solution:
if (destination.X > position.X)
currentFrame.Y = 6;
if (destination.X > position.X && destination.Y >= position.Y + 35)
currentFrame.Y = 7;
if (destination.X > position.X && destination.Y <= position.Y - 35)
currentFrame.Y = 5;
It sort of works, but was wondering if there was a better work-around for this.
What I want is to be able to click on the game-screen and the appropriate sprite row be selected, relative to sprites current position and destination, to make it animate the proper way.
Sorry if this has been asked before, but I have searched around for a few hours before posting this and found nothing.

I am a bit unclear as to exactly what you are doing. Do you only have 2 sprites, one for left and one for right? Thats all i can see in your current code, but you are referring to animating. I am going to assume that you have a full set of sprites to animate walking, in which case I think this tutorial will cover what you need:
http://coderplex.blogspot.ca/2010/04/2d-animation-part-1-basics.html
(more specifically, part 4 of the tutorial: http://coderplex.blogspot.ca/2010/04/2d-animation-part-4-sprite-animation.html )
Basically, you are going to need to set timers to control the sprite animation, as with this type of mouse movement there is no more input (related to moving) between the time you click the mouse and the time the object gets to the destination. So you need to use a timer to determine when the next sprite in the walking animation should be called.
Alternatively, you could further elaborate on your if statements (if currentFrame = 1 then currentFrame = 2, if currentFrame = 2 then currentFrame = 3, etc), but it would be messy and pretty difficult to maintain if you ever make changes to the graphic or the way the sprite is pulled from the spritesheet. It also would most likely animate too fast, and you'd have to use timers to slow it down anyway.

Figured it out I think. Here's my code (hoping it's formatted correctly. Sorry if I'm not meant to answer my own question, thought this might be helpful to someone else):
public Vector2 position = new Vector2(200, 200);
Point frameSize = new Point(48, 92);
Point currentFrame = new Point(0, 0);
Point sheetSize = new Point(9, 8);
float speed = 10;
Vector2 direction;
Vector2 destination;
bool mousePressed = false;
float difference;
KeyboardState currentState;
KeyboardState theKeyboardState;
KeyboardState oldKeyboardState;
enum State
{
Walking
}
State mcurrentState = State.Walking;
TimeSpan nextFrameInterval =
TimeSpan.FromSeconds((float)1 / 16);
TimeSpan nextFrame;
MouseState mouseState;
MouseState oldState;
public void Move()
{
direction = destination - position;
direction.Normalize();
position += direction * speed;
float Xdistance = destination.X - position.X;
float Ydistance = destination.Y - position.Y;
difference = (float)Math.Atan2(Ydistance, Xdistance);
float differ;
differ = MathHelper.ToDegrees(difference);
if (destination.X >= position.X || destination.X <= position.X)
{
currentFrame.X++;
if (currentFrame.X >= 9)
currentFrame.X = 0;
//down = 90dg
if (differ >= 67.6 && differ <= 112.5)
currentFrame.Y = 0;
if (differ >= 112.6 && differ <= 157.5)
currentFrame.Y = 1;
if (differ >= 157.6 && differ <= 180 || differ >= -180 && differ <= -157.5)
currentFrame.Y = 2;
if (differ >= -157.4 && differ <= -112.5)
currentFrame.Y = 3;
if (differ >= -112.4 && differ <= -67.5)
currentFrame.Y = 4;
if (differ >= -67.4 && differ <= -22.5)
currentFrame.Y = 5;
if (differ >= -22.4 && differ <= 22.5)
currentFrame.Y = 6;
if (differ >= 22.6 && differ <= 67.5)
currentFrame.Y = 7;
}
}
public void Update()
{
mouseState = Mouse.GetState();
currentState = Keyboard.GetState();
theKeyboardState = Keyboard.GetState();
if (mousePressed == true)
{
if (Vector2.DistanceSquared(destination, position) >= speed * speed)
{
Move();
}
}
if (mouseState.LeftButton == ButtonState.Pressed && oldState.LeftButton == ButtonState.Released)
{
int mouseY = mouseState.Y;
int mouseX = mouseState.X;
destination = new Vector2(mouseX, mouseY);
mousePressed = true;
}
oldState = mouseState;
if (mcurrentState == State.Walking)
{
#region KB animation
if (currentState.IsKeyDown(Keys.Down))
{
mousePressed = false;
currentFrame.X++;
currentFrame.Y = 0;
if (currentFrame.X >= 9)
currentFrame.X = 0;
position.Y += speed;
}
if (currentState.IsKeyDown(Keys.Up))
{
mousePressed = false;
currentFrame.X++;
currentFrame.Y = 4;
if (currentFrame.X >= 9)
currentFrame.X = 0;
position.Y -= speed;
}
if (currentState.IsKeyDown(Keys.Right))
{
mousePressed = false;
currentFrame.X++;
currentFrame.Y = 6;
if (currentState.IsKeyDown(Keys.Down))
currentFrame.Y = 7;
if (currentState.IsKeyDown(Keys.Up))
currentFrame.Y = 5;
if (currentFrame.X >= 9)
currentFrame.X = 0;
position.X += speed;
}
if (currentState.IsKeyDown(Keys.Left))
{
mousePressed = false;
currentFrame.X++;
currentFrame.Y = 2;
if (currentState.IsKeyDown(Keys.Down))
currentFrame.Y = 1;
if (currentState.IsKeyDown(Keys.Up))
currentFrame.Y = 3;
if (currentFrame.X >= 9)
currentFrame.X = 0;
position.X -= speed;
}
}
oldKeyboardState = theKeyboardState;
#endregion
}
public void Draw(SpriteBatch spriteBatch, Texture2D character)
{
spriteBatch.Begin();
spriteBatch.Draw(character, position, new Rectangle(frameSize.X * currentFrame.X,
frameSize.Y * currentFrame.Y, frameSize.X, frameSize.Y), Color.White, 0, new Vector2(frameSize.X / 2, frameSize.Y / 2), 1, SpriteEffects.None, 0);
spriteBatch.End();
}

Related

How to simplify shapes for triangulation with three.js and jsclipper

I try to display geometry which is constructed by constructpath commands like moveto lineto beziercurveto in Three.js.
Therefore I create a THREE.ShapePath(); and execute the command toShapes(isClockwise).
After this I use THREE.ExtrudeBufferGeometry to create the 3D shape.
Unfortunately the shapes are sometimes really complex and are not created correctly which means they are distorted.
Using libtess as triangulation library solves some issues. But I have still distorted geometry.
Now I want to use jsclipper to simplify the shapes prior triangulation.
I modified three.js in such way:
in the method addShape in ExtrudeBufferGeometry I have added:
$.each(vertices, function(index, item) {
vertices[index]['X'] = vertices[index]['x'];
vertices[index]['Y'] = vertices[index]['y'];
delete vertices[index]['x'];
delete vertices[index]['y'];
});
if (holes[0]) {
for (i = 0; i < holes.length; i++ ) {
$.each(holes[i], function(index, item) {
holes[i][index]['X'] = holes[i][index]['x'];
holes[i][index]['Y'] = holes[i][index]['y'];
delete holes[i][index]['x'];
delete holes[i][index]['y'];
});
}
}
var scale = 100;
ClipperLib.JS.ScaleUpPaths([vertices], scale);
if (holes[0]) {
ClipperLib.JS.ScaleUpPaths(holes, scale);
}
vertices = ClipperLib.Clipper.SimplifyPolygons([vertices], ClipperLib.PolyFillType.pftNonZero);
// or ClipperLib.PolyFillType.pftEvenOdd
if (holes[0]) {
holes = ClipperLib.Clipper.SimplifyPolygons(holes, ClipperLib.PolyFillType.pftNonZero);
// or ClipperLib.PolyFillType.pftEvenOdd
}
// var cleandelta = 0.1; // 0.1 should be the appropriate delta in different cases
// vertices = ClipperLib.Clipper.CleanPolygons([vertices], cleandelta * scale);
// if (holes[0]) {
// holes = ClipperLib.Clipper.CleanPolygons(holes, cleandelta * scale);
// }
ClipperLib.JS.ScaleDownPaths(vertices, scale);
if (holes[0]) {
ClipperLib.JS.ScaleDownPaths(holes, scale);
}
for (i = 0; i < vertices.length; i++ ) {
$.each(vertices[i], function(index, item) {
vertices[i][index]['x'] = vertices[i][index]['X'];
vertices[i][index]['y'] = vertices[i][index]['Y'];
delete vertices[i][index]['X'];
delete vertices[i][index]['Y'];
});
}
if (holes[0]) {
for (i = 0; i < holes.length; i++ ) {
$.each(holes[i], function(index, item) {
holes[i][index]['x'] = holes[i][index]['X'];
holes[i][index]['y'] = holes[i][index]['Y'];
delete holes[i][index]['X'];
delete holes[i][index]['Y'];
});
}
}
Now I can see that the vertices are "reduced".
But var faces = ShapeUtils.triangulateShape( vertices, holes ); doesn't generate faces for some examples anymore.
Please can one help how to simplify the shapes correctly?
A bit hard to figure out what the problem is actually. Clipper (also when using SimplifyPolygons or SimplifyPolygon) can only produce weakly-simple polygons, which means that there can be pseudo-duplicate points: although sequential coordinates are quaranteed to be not indentical, some of the next points can share the same coordinate. Also a coordinate can be on the line between two points.
After simplifying (or any other boolean operation) you could make a cleaning step using Offsetting with a small negative value: https://sourceforge.net/p/jsclipper/wiki/documentation/#clipperlibclipperoffsetexecute.
This possibly removes all of the pseudo-duplicate points.
I have made also a float version of Clipper (http://jsclipper.sourceforge.net/6.4.2.2_fpoint/). It is extensively tested, but because Angus Johnson, the author of the original C# Clipper (of which JS-version is ported from), has thought that using floats causes robustness problems although according to my tests the are no such, the original C# float version does not exists. The float version is simpler to use and you can try there a small negative offset: eg. -0.001 or -0.01.
You could also give a try to PolyTree or ExPolygons (https://sourceforge.net/p/jsclipper/wiki/ExPolygons%20and%20PolyTree%206/). ExPolygons can be used to get holes and contours and PolyTree can be used to get the full parent-child-relationship of holes and contours.
The last resort is a broken-pen-nib -function. It detects all pseudo-duplicate points and make a broken-pen-nib -effect to them, so that the result is free of any duplicates. The attached images shows what this effect means using large nib-effect-value to make the effect meaning clearer. Three.js polygon triangulation fails in pseudo duplicate points. There are a discussion https://github.com/mrdoob/three.js/issues/3386 of this subject.
// Make polygons to simple by making "a broken pen tip" effect on each semi-adjacent (duplicate) vertex
// ORIGPOLY can be a contour
// or exPolygon structure
function BreakPenNibs(ORIGPOLY, dist, scale)
{
if (!dist || dist < 0) return;
var sqrt = Math.sqrt;
var allpoints = {}, point = {};
var key = "";
var currX = 0.0,
currY = 0.0;
var prevX = 0.0,
prevY = 0.0;
var nextX = 0.0,
nextY;
var x = 0.0,
y = 0.0,
length = 0.0,
i = 0,
duplcount = 0,
j = 0;
var prev_i = 0,
next_i = 0,
last_i;
var extra_vertices = new Array(100),
moved_vertices = new Array(100);
// Get first all duplicates
var duplicates = new Array(100),
indexi = "",
indexstr = "",
arraystr = "",
polys, outer, holes;
if (ORIGPOLY instanceof Array)
{
outer = ORIGPOLY;
}
else if (ORIGPOLY.outer instanceof Array)
{
outer = ORIGPOLY.outer;
}
else return;
if (ORIGPOLY.holes instanceof Array) holes = ORIGPOLY.holes;
else holes = [];
polys = [outer].concat(holes);
var polys_length = polys.length;
// Get first max lenght of arrays
var max_index_len = 0;
var arr_len;
i = polys_length;
while (i--)
{
arr_len = polys[i].length;
if (arr_len > max_index_len) max_index_len = arr_len;
}
max_index_len = max_index_len.toString().length;
var max_polys_length = polys_length.toString().length;
var poly;
j = polys_length;
var scaling = scale/10;
while (j--)
{
poly = polys[j];
ilen = poly.length;
i = ilen;
while (i--)
{
point = poly[i];
//key = Math.round(point.X) + ":" + Math.round(point.Y);
key = (Math.round(point.X / scaling) * scaling)
+ ":" + (Math.round(point.Y / scaling) * scaling);
indexi = allpoints[key];
if (typeof (indexi) != "undefined")
{
// first found duplicate
duplicates[duplcount] = indexi;
duplcount++;
arraystr = j.toString();
while (arraystr.length < max_polys_length) arraystr = "0" + arraystr;
indexstr = i.toString();
while (indexstr.length < max_index_len) indexstr = "0" + indexstr;
duplicates[duplcount] = arraystr + "." + indexstr;
duplcount++;
}
arraystr = j.toString();
while (arraystr.length < max_polys_length) arraystr = "0" + arraystr;
indexstr = i.toString();
while (indexstr.length < max_index_len) indexstr = "0" + indexstr;
allpoints[key] = arraystr + "." + indexstr;
}
}
if (!duplcount) return;
duplicates.length = duplcount;
duplicates.sort();
//console.log(JSON.stringify(duplicates));
var splitted, poly_index = 0,
nth_dupl = 0;
var prev_poly_index = -1;
poly_index = 0;
for (j = 0; j < duplcount; j++)
{
splitted = duplicates[j].split(".");
poly_index = parseInt(splitted[0], 10);
if (poly_index != prev_poly_index) nth_dupl = 0;
else nth_dupl++;
i = parseInt(splitted[1], 10);
poly = polys[poly_index];
len = poly.length;
if (poly[0].X === poly[len - 1].X &&
poly[0].Y === poly[len - 1].Y)
{
last_i = len - 2;
}
else
{
last_i = len - 1;
}
point = poly[i];
// Calculate "broken pen tip" effect
// for current point by finding
// a coordinate at a distance dist
// along the edge between current and
// previous point
// This is inlined to maximize speed
currX = point.X;
currY = point.Y;
if (i === 0) prev_i = last_i; // last element in array
else prev_i = i - 1;
prevX = poly[prev_i].X;
prevY = poly[prev_i].Y;
x=0;y=0;
if (!point.Collinear)
{
length = sqrt((-currX + prevX) * (-currX + prevX) + (currY - prevY) * (currY - prevY));
//console.log(length);
x = currX - (dist * (currX - prevX)) / length;
y = currY - (dist * (currY - prevY)) / length;
}
// save the found (calculated) point
moved_vertices[j] = {
X: x,
Y: y,
Collinear:point.Collinear,
index: i,
poly_index: poly_index
};
// "broken nib effect" for next point also
if (i == len - 1) next_i = 0;
else next_i = i + 1;
nextX = poly[next_i].X;
nextY = poly[next_i].Y;
x=0;y=0;
if (!point.Collinear)
{
length = sqrt((-currX + nextX) * (-currX + nextX) + (currY - nextY) * (currY - nextY));
x = currX - (dist * (currX - nextX)) / length;
y = currY - (dist * (currY - nextY)) / length;
}
// save the found (calculated) point
extra_vertices[j] = {
X: x,
Y: y,
Collinear:point.Collinear,
index: i + nth_dupl,
poly_index: poly_index
};
prev_poly_index = poly_index;
}
moved_vertices.length = extra_vertices.length = duplcount;
//console.log("MOVED:" + JSON.stringify(moved_vertices));
//console.log("EXTRA:" + JSON.stringify(extra_vertices));
// Update moved coordinates
i = duplcount;
var point2;
while (i--)
{
point = moved_vertices[i];
x = point.X;
y = point.Y;
// Faster than isNaN: http://jsperf.com/isnan-alternatives
if (x != x || x == Infinity || x == -Infinity) continue;
if (y != y || y == Infinity || y == -Infinity) continue;
point2 = polys[point.poly_index][point.index];
point2.X = point.X;
point2.Y = point.Y;
point2.Collinear = point.Collinear;
}
// Add an extra vertex
// This is needed to remain the angle of the next edge
for (i = 0; i < duplcount; i++)
{
point = extra_vertices[i];
x = point.X;
y = point.Y;
// Faster than isNaN: http://jsperf.com/isnan-alternatives
if (x != x || x == Infinity || x == -Infinity) continue;
if (y != y || y == Infinity || y == -Infinity) continue;
polys[point.poly_index].splice(point.index + 1, 0,
{
X: point.X,
Y: point.Y,
Collinear: point.Collinear
});
}
// Remove collinear points
// and for some reason coming
// sequential duplicates
// TODO: check why seq. duplicates becomes
j = polys.length;
var prev_point = null;
while (j--)
{
poly = polys[j];
ilen = poly.length;
i = ilen;
while (i--)
{
point = poly[i];
if(prev_point!=null && point.X == prev_point.X && point.Y == prev_point.Y) poly.splice(i, 1);
else
if(point.Collinear) poly.splice(i, 1);
prev_point = point;
}
}
//console.log(JSON.stringify(polys));
// because original array is modified, no need to return anything
}
var BreakPenNipsOfExPolygons = function (exPolygons, dist, scale)
{
var i = 0,
j = 0,
ilen = exPolygons.length,
jlen = 0;
for (; i < ilen; i++)
{
//if(i!=4) continue;
BreakPenNibs(exPolygons[i], dist, scale);
}
};

I made a processing program that generates a mandelbrot set but don't know how to effectively implement a zoom method

I'm not sure if it is possible in processing but I would like to be able to zoom in on the fractal without it being extremely laggy and buggy. What I currently have is:
int maxIter = 100;
float zoom = 1;
float x0 = width/2;
float y0 = height/2;
void setup(){
size(500,300);
noStroke();
smooth();
}
void draw(){
translate(x0, y0);
scale(zoom);
for(float Py = 0; Py < height; Py++){
for(float Px = 0; Px < width; Px++){
// scale pixel coordinates to Mandelbrot scale
float w = width;
float h = height;
float xScaled = (Px * (3.5/w)) - 2.5;
float yScaled = (Py * (2/h)) - 1;
float x = 0;
float y = 0;
int iter = 0;
while( x*x + y*y < 2*2 && iter < maxIter){
float tempX = x*x - y*y + xScaled;
y = 2*x*y + yScaled;
x = tempX;
iter += 1;
}
// color pixels
color c;
c = pickColor(iter);
rect(Px, Py,1,1);
fill(c);
}
}
}
// pick color based on time pixel took to escape (number of iterations through loop)
color pickColor(int iters){
color b = color(0,0,0);
if(iters == maxIter) return b;
int l = 1;
color[] colors = new color[maxIter];
for(int i = 0; i < colors.length; i++){
switch(l){
case 1 : colors[i] = color(255,0,0); break;
case 2 : colors[i] = color(0,0,255); break;
case 3 : colors[i] = color(0,255,0); break;
}
if(l == 1 || l == 2) l++;
else if(l == 3) l = 1;
else l--;
}
return colors[iters];
}
// allow zooming in and out
void mouseWheel(MouseEvent event){
float direction = event.getCount();
if(direction < 0) zoom += .02;
if(direction > 0) zoom -= .02;
}
// allow dragging back and forth to change view
void mouseDragged(){
x0+= mouseX-pmouseX;
y0+= mouseY-pmouseY;
}
but it doesn't work very well. It works alright at the size and max iteration I have it set to now (but still not well) and is completely unusable at larger sizes or higher maximum iterations.
The G4P library has an example that does exactly this. Download the library and go to the G4P_MandelBrot example. The example can be found online here.
Hope this helps!

Which linear "movement strategy" is better in a canvas?

I've seen 2 moving strategies:
Using time:
point = function(x) {
this.x = x;
this.moveTo = function(x, originalX, speed, startTime) {
var direction = x > originalX ? 1 : (x < originalX ? -1 : 0);
if(direction == 0) return;
// speed is px/seconds, so divide time by 1k
var dt = (new Date().getTime() - startTime) / 1000;
var speedX = speed * direction;
var newX = originalX + speedX * dt;
if (direction == 1 && newX => x || direction == -1 && newX <= x) {
// we went past, stay put and finish this
this.x = x;
return;
}
requestAnimationFrame(function(){
this.moveTo(x, originalX, speed, startTime);
});
}
}
Or using percentages per frame?
point = function(x) {
this.x = x;
this.moveTo = function(x, originalX, percentagePerFrame, p) {
if (p >= 1) return;
var dx = (x - originalX) * p;
this.x = x + dx;
requestAnimationFrame(function(){
this.moveTo(x, originalX, percentagePerFrame, p + percentagePerFrame);
});
}
}
Is it irrelevant? I can tell that using time&speed is slower, but... does it matter? is there a better way?
Just some thoughts:
requestAnimationFrame ("RAF") will skip frames if the system is busy.
So if you need the animation to adjust for the skipped frames, then use elapsed time as in your first example.
If you just want an object to move with every frame and the "jitter" caused by missed frames don't impact your design, then your second example is just fine.
Note that RAF in modern browsers will feed you the elapsed time so you don't need the manual variables and calculations that you've done in the first example.

Severely Laggy Bounding Box Detection

I have a bounding box collision detection system for a basic game. Each time I spawn in an entity a bounding box is paired with it. The collision system it self works; however it is extremely laggy even for just two entities. My code is listed below, I know it is definitively not the most efficient way to do this, but I don't really know how to do it any other way.
bbX, bbY,and bbZ are the position of the AABB's in the world.
float radX1,radX2;
float radY1,radY2;
float radZ1,radZ2;
float arr[12];
radX1 = (bb->maxX - bb->minX) / 2;
radX2 = (this->maxX - this->minX) / 2;
radY1 = (bb->maxY - bb->minY) / 2;
radY2 = (this->maxY - this->minY) / 2;
radZ1 = (bb->maxZ - bb->minZ) / 2;
radZ2 = (this->maxZ - this->minZ) / 2;
arr[1] = bb->bbX - 0.5f - radX1;
arr[2] = bb->bbX - 0.5f + radX1;
arr[3] = bb->bbY - 0.5f - radY1;
arr[4] = bb->bbY - 0.5f + radY1;
arr[5] = bb->bbZ - 0.5f - radZ1;
arr[6] = bb->bbZ - 0.5f + radZ1;
//this coords
arr[7] = this->bbX - 0.5f - radX2;
arr[8] = this->bbX - 0.5f + radX2;
arr[9] = this->bbY - 0.5f - radY2;
arr[10] = this->bbY - 0.5f + radY2;
arr[11] = this->bbZ - 0.5f - radZ2;
arr[12] = this->bbZ - 0.5f + radZ2;
if(arr[2] >= arr[7] && arr[1] <= arr[8])
{
if(arr[4] >= arr[9] && arr[3] <= arr[10])
{
if(arr[6] >= arr[11] && arr[5] <= arr[12])
{
this->collided = TRUE;
OutputDebugStringA("Collided!\n");
return TRUE;
}
}
}
This function is called on a timer approximately every 15ms, but increasing the iterations didn't help much either.
The function that does the work of comparing existing bounding boxes:
aabbPool is a list that stores all the AABB's currently loaded.
for(auto i = this->aabbPool.begin();i < this->aabbPool.end();++i)
{
OutputDebugStringA("Called!\n");
if(*i == NULL) ;
else
{
exe = *i;
for(auto k = this->aabbPool.begin();k < this->aabbPool.end();++k)
{
comp = *k;
if(exe->id == comp->id) ;
else
{
if(exe->isCollidedWith(comp)) OutputDebugStringA("Collided!\n");
}
}
}
}

Finding a Tangent Line at a Point on a Randomized Slope

I have a piece of processing code that I was given, which appears to be setting up a randomized Fourier series. Unfortunately, despite my efforts to improve my mathematical skills, I have no idea what it is doing and the articles I have found are not much help.
I'm trying to extend this code so that I can draw a line tangent to a point on the slope created by the code bellow. The closest I can find to answering this is in the mathematics forum. Unfortunately, I don't really understand what is being discussed or if it really is relevant to my situation.
Any assistance on how I would go about calculating a tangent line at a particular point on this curve would be much appreciated.
UPDATE As of 06/17/13
I've been trying to play around with this, but without much success. This is the best I can do, and I doubt that I'm applying the derivative correctly to find the tangent (or even if I have found the derivative at the point correctly). Also, I'm beginning to worry that I'm not drawing the line correctly even if I have everything else correct. If anyone can provide input on this I'd appreciate it.
final int w = 800;
final int h = 480;
double[] skyline;
PImage img;
int numOfDeriv = 800;
int derivModBy = 1; //Determines how many points will be checked
int time;
int timeDelay = 1000;
int iter;
double[] derivatives;
void setup() {
noStroke();
size(w, h);
fill(0,128,255);
rect(0,0,w,h);
int t[] = terrain(w,h);
fill(77,0,0);
for(int i=0; i < w; i++){
rect(i, h, 1, -1*t[i]);
}
time = millis();
timeDelay = 100;
iter =0;
img = get();
}
void draw() {
int dnum = 0; //Current position of derivatives
if(iter == numOfDeriv) iter = 0;
if (millis() > time + timeDelay){
image(img, 0, 0, width, height);
strokeWeight(4);
stroke(255,0,0);
point((float)iter*derivModBy, height-(float)skyline[iter*derivModBy]);
strokeWeight(1);
stroke(255,255,0);
print("At x = ");
print(iter);
print(", y = ");
print(skyline[iter]);
print(", derivative = ");
print((float)derivatives[iter]);
print('\n');
lineAngle(iter, (int)(height-skyline[iter]), (float)derivatives[iter], 100);
lineAngle(iter, (int)(height-skyline[iter]), (float)derivatives[iter], -100);
stroke(126);
time = millis();
iter += 1;
}
}
void lineAngle(int x, int y, float angle, float length)
{
line(x, y, x+cos(angle)*length, y-sin(angle)*length);
}
int[] terrain(int w, int h){
width = w;
height = h;
//min and max bracket the freq's of the sin/cos series
//The higher the max the hillier the environment
int min = 1, max = 6;
//allocating horizon for screen width
int[] horizon = new int[width];
skyline = new double[width];
derivatives = new double[numOfDeriv];
//ratio of amplitude of screen height to landscape variation
double r = (int) 2.0/5.0;
//number of terms to be used in sine/cosine series
int n = 4;
int[] f = new int[n*2];
//calculating omegas for sine series
for(int i = 0; i < n*2 ; i ++){
f[i] = (int) random(max - min + 1) + min;
}
//amp is the amplitude of the series
int amp = (int) (r*height);
int dnum = 0; //Current number of derivatives
for(int i = 0 ; i < width; i ++){
skyline[i] = 0;
double derivative = 0.0;
for(int j = 0; j < n; j++){
if(i % derivModBy == 0){
derivative += ( cos( (f[j]*PI*i/height) * f[j]*PI/height) -
sin(f[j+n]*PI*i/height) * f[j+n]*PI/height);
}
skyline[i] += ( sin( (f[j]*PI*i/height) ) + cos(f[j+n]*PI*i/height) );
}
skyline[i] *= amp/(n*2);
skyline[i] += (height/2);
skyline[i] = (int)skyline[i];
horizon[i] = (int)skyline[i];
derivative *= amp/(n*2);
if(i % derivModBy == 0){
derivatives[dnum++] = derivative;
derivative = 0;
}
}
return horizon;
}
void reset() {
time = millis();
}
Well it seems in this particular case that you don't need to understand much about the Fourier Series, just that it has the form:
A0 + A1*cos(x) + A2*cos(2*x) + A3*cos(3*x) +... + B1*sin(x) + B2*sin(x) +...
Normally you're given a function f(x) and you need to find the values of An and Bn such that the Fourier series converges to your function (as you add more terms) for some interval [a, b].
In this case however they want a random function that just looks like different lumps and pits (or hills and valleys as the context might suggest) so they choose random terms from the Fourier Series between min and max and set their coefficients to 1 (and conceptually 0 otherwise). They also satisfy themselves with a Fourier series of 4 sine terms and 4 cosine terms (which is certainly easier to manage than an infinite number of terms). This means that their Fourier Series ends up looking like different sine and cosine functions of different frequencies added together (and all have the same amplitude).
Finding the derivative of this is easy if you recall that:
sin(n*x)' = n * cos(x)
cos(n*x)' = -n * sin(x)
(f(x) + g(x))' = f'(x) + g'(x)
So the loop to calculate the the derivative would look like:
for(int j = 0; j < n; j++){
derivative += ( cos( (f[j]*PI*i/height) * f[j]*PI/height) - \
sin(f[j+n]*PI*i/height) * f[j+n]*PI/height);
}
At some point i (Note the derivative is being taken with respect to i since that is the variable that represents our x position here).
Hopefully with this you should be able to calculate the equation of the tangent line at a point i.
UPDATE
At the point where you do skyline[i] *= amp/(n*2); you must also adjust your derivative accordingly derivative *= amp/(n*2); however your derivative does not need adjusting when you do skyline[i] += height/2;
I received an answer to this problem via "quarks" on processing.org form. Essentially the problem is that I was taking the derivative of each term of the series instead of taking the derivative of the sum of the entire series. Also, I wasn't applying my result correctly anyway.
Here is the code that quarks provided that definitively solves this problem.
final int w = 800;
final int h = 480;
float[] skyline;
PImage img;
int numOfDeriv = 800;
int derivModBy = 1; //Determines how many points will be checked
int time;
int timeDelay = 1000;
int iter;
float[] tangents;
public void setup() {
noStroke();
size(w, h);
fill(0, 128, 255);
rect(0, 0, w, h);
terrain(w, h);
fill(77, 0, 0);
for (int i=0; i < w; i++) {
rect(i, h, 1, -1*(int)skyline[i]);
}
time = millis();
timeDelay = 100;
iter =0;
img = get();
}
public void draw() {
if (iter == numOfDeriv) iter = 0;
if (millis() > time + timeDelay) {
image(img, 0, 0, width, height);
strokeWeight(4);
stroke(255, 0, 0);
point((float)iter*derivModBy, height-(float)skyline[iter*derivModBy]);
strokeWeight(1);
stroke(255, 255, 0);
print("At x = ");
print(iter);
print(", y = ");
print(skyline[iter]);
print(", derivative = ");
print((float)tangents[iter]);
print('\n');
lineAngle(iter, (int)(height-skyline[iter]), (float)tangents[iter], 100);
lineAngle(iter, (int)(height-skyline[iter]), (float)tangents[iter], -100);
stroke(126);
time = millis();
iter += 1;
}
}
public void lineAngle(int x, int y, float angle, float length) {
line(x, y, x+cos(angle)*length, y-sin(angle)*length);
}
public void terrain(int w, int h) {
//min and max bracket the freq's of the sin/cos series
//The higher the max the hillier the environment
int min = 1, max = 6;
skyline = new float[w];
tangents = new float[w];
//ratio of amplitude of screen height to landscape variation
double r = (int) 2.0/5.0;
//number of terms to be used in sine/cosine series
int n = 4;
int[] f = new int[n*2];
//calculating omegas for sine series
for (int i = 0; i < n*2 ; i ++) {
f[i] = (int) random(max - min + 1) + min;
}
//amp is the amplitude of the series
int amp = (int) (r*h);
for (int i = 0 ; i < w; i ++) {
skyline[i] = 0;
for (int j = 0; j < n; j++) {
skyline[i] += ( sin( (f[j]*PI*i/h) ) + cos(f[j+n]*PI*i/h) );
}
skyline[i] *= amp/(n*2);
skyline[i] += (h/2);
}
for (int i = 1 ; i < w - 1; i ++) {
tangents[i] = atan2(skyline[i+1] - skyline[i-1], 2);
}
tangents[0] = atan2(skyline[1] - skyline[0], 1);
tangents[w-1] = atan2(skyline[w-2] - skyline[w-1], 1);
}
void reset() {
time = millis();
}

Resources