How to draw a triangle in a math graph? - actionscript-2

Question

How to draw a triangle in a math graph which displays X and Y axis.

Answer 1

To draw shapes using ActionScript2, you can use the moveTo() and lineTo() methods of the MovieClip object. You can specify line colour and thickness with lineStyle(), or make a solid shape using beginFill() and endFill().
So to draw your graph and triangle you could do the following steps:
Make a movieClip named "graph"
Define how big your graph should be (using the flash.geom.Rectangle object)
Draw a grey background using graph.beginFill(grey) and then moveTo() and lineTo()
Draw some blue lines at regular intervals for a grid
Draw the X and Y axes on the side and bottom of your grid
Make a second movieClip named "shape"
Pick 3 random points: moveTo(point1), lineTo(point2), lineTo(point3), lineTo(point1)
Here's how the code might look:
import flash.geom.Point;
import flash.geom.Rectangle;
function drawGraph(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the graph
//draw the background
mc.beginFill(0xF8F8F8);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.lineTo(rect.right, rect.top);
mc.lineTo(rect.right, rect.bottom);
mc.lineTo(rect.left, rect.bottom);
mc.endFill();
//draw a grid
var unit:Number = 20;
mc.lineStyle(1, 0x0000FF, 20, true, "none", "round", "round");
var i:Number=rect.x;
do {
i=i+unit;
mc.moveTo(i, rect.bottom);
mc.lineTo(i, rect.top);
} while (i<rect.right);
i=rect.bottom;
do {
i=i-unit;
mc.moveTo(rect.left, i);
mc.lineTo(rect.right,i);
} while (i>rect.top);
//draw the axes
mc.lineStyle(2, 0x808080, 100, true, "none", "round", "round");
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.right, rect.bottom);
}
function randomPoint(rect:Rectangle):Point {
//this is a function which returns a random point within rect
var p:Point = new Point(rect.x+Math.random()*rect.width, rect.y+Math.random()*rect.height);
return p;
}
function drawTriangle(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the triangle
// pick 3 random points within rect
var p1:Point = randomPoint(rect);
var p2:Point = randomPoint(rect);
var p3:Point = randomPoint(rect);
//connect the points to make a triangle
mc.lineStyle(3, 0xFF0000, 100, true, "none", "round", "round");
mc.moveTo(p1.x, p1.y);
mc.lineTo(p2.x, p2.y);
mc.lineTo(p3.x, p3.y);
mc.lineTo(p1.x, p1.y);
}
//make the 'graph' clip:
var myGraph:MovieClip = this.createEmptyMovieClip("myGraph", this.getNextHighestDepth());
//define the graph size:
var myRect:Rectangle = new Rectangle(50,50,300,300);
drawGraph(myGraph,myRect);//draw the graph
var myShape:MovieClip = this.createEmptyMovieClip("myShape", this.getNextHighestDepth());//make the 'shape' clip
drawTriangle(myShape,myRect);//draw a random triangle
//add a function to draw a new triangle when the graph is clicked:
myGraph.onRelease = function() {
myShape.clear();//erase the old triangle
drawTriangle(myShape,myRect);//draw a new one
}
You can click the graph to generate a new random triangle.
(source: webfactional.com)

Answer 2

It sounds like you need to know how the drawing API works in Flash. Your question is kind of vague, but this might help to get you started - google "Flash Drawing API" for more information.
var point1:Point = new Point (0, 0);
var point2:Point = new Point (25, -50);
var point3:Point = new Point (50, 0);
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, 0xff0000);
s.graphics.beginFill(0x000000);
s.graphics.moveTo(point1.x, point1.y);
s.graphics.lineTo(point2.x, point2.y);
s.graphics.lineTo(point3.x, point3.y);
s.graphics.lineTo(point1.x, point1.y);
s.graphics.endFill();
s.graphics.lineStyle(0);
s.x = (stage.stageWidth - s.width) / 2;
s.y = ((stage.stageHeight - s.height) / 2) + 50;
addChild(s);
I hope that helps, let me know if you have any questions.
NOTE: This solution is using ActionScript 3. If you need AS2 this won't work, and off the top of my head I don't know how to help but you might just try googling "AS2 Drawing API" or something to that effect.