Search the Community

The object of this game is to deflect all the balls into the hole before time runs out. This is done by dragging the blue walls onto the playing grid from the top of the screen and positioning them in such a way so all balls are sunk. Complete all 40 levels. Overcome obstacles as each level progresses. Each level may have more than one solution and trial and error is sometimes required. This game is playable best on desktop computer but will work on mobile as well... Here is the link to the HTML5 game: http://www.atksolutions.com/games/balldeflector.html

Hi all, I'm playing around with PIXI and using what I know of autonomous agents in Processing to help me along the way. I used Processing extensively about 2 years ago and integrated a lot of Craig Reynolds' work into my projects (ie autonomous agents, steering, boids etc). To learn that I used the wonderful book The Nature Of Code by Daniel Shiffman. Chapter 6 of this book is on autonomous agents and moves from steering into a boids algorithm using Processing. The section related to my question is "Example 6.1: Seeking a target" (if you can visit the page for Chapter 6 - Autonomous Agents and look at Example 6.1 as it has an embedded applet showing the intended results of what I'm trying to achieve. Note how nicely the triangle just turns to be facing the direction it is moving). I've been able to rewrite most of that example in JS/PIXI but I'm having trouble with the vehicle rotating to face the mouse. The relevant section from the full Vehicle Class code is: // Draw a triangle rotated in the direction of velocityfloat theta = velocity.heading2D() + PI/2; //this line in particularfill(127);stroke(0);strokeWeight(1);pushMatrix();translate(location.x,location.y);rotate(theta); //the Vehicle is rotated by the angle calculated by heading2D() abovebeginShape();vertex(0, -r*2);vertex(-r, r*2);vertex(r, r*2);endShape(CLOSE);popMatrix();What I cannot figure out is how to translate the float theta = velocity.heading2D( ) + PI/2; line into something usable by PIXI and then correctly rotate the triangle primitive I have drawn with PIXI.Graphics( ). My 'Vehicle' is also an object that draws the triangle and moves towards the mouse and does everything expected except rotate to always the direction it is travelling. My current line of code to attempt to replace the PVector.heading2d( ) method from Processing is this.heading = Math.atan2(this.velocity.x, this.velocity.y);Which is followed up elsewhere with graphics.rotation = this.heading;I'll admit it's a reasonably blind attempt at hoping to stumble upon a working result as I don't truly understand how to rotate a primitive (filled triangle in my case) by the angle derived from the direction it is travelling. What happens when I run my steering example with the above two lines included is exceptionally erratic rotating - alternating between two rotations so fast in fact that it gives the appearance of there being two triangles. Is someone able to help me understand how to rotate a triangle primitive to be facing the direction it travels as seen in the quoted Processing code line? float theta = velocity.heading2D() + PI/2;I need to implement whatever calculation PVector.heading2D( ) does, but that is what I can't figure out. Many thanks!