Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Moving Triangles Tutorial
ID	5849594365345792
Created	9 years ago, 1449677913085
Updated	9 years ago, 1449891213392
Code	/** Project name: Moving Triangles Tutorial * Support for Hour of Code * trek * Date: 09 December 2015 * * Let's look at how to move a triangle to a different place. * * Suppose you originallly drew your triangle at these coordinates * * triangle(100, 300, 150, 300, 125, 375); * * This is the tan triangle. Then you realized that you really wanted * your triangle higher up on the canvas, where the green triangle is. * * We draw triangles by figuring out where the points lie on the canvas. * Using a piece of graph paper is a good way to do this. * * Each point has an x-value and a y-value. * * The x-value is how many pixels from the LEFT edge of the canvas. * The y-value is how many pixels from the TOP edge of the canvas. * * You do not want to change the overall shape of the tan triangle, * you just want to slide the triangle up and right. * * To move the triangle from where it was to where you want it, you need to * replace the x- and y-coordinate values. * * In this example, you need to add 100 to each of the x-values and * you also need to subtract 200 from each of the y-values. * * The green triangle is drawn with these coordinates: * * triangle(200, 100, 250, 100, 175, 175); * * The arrows on the canvas are just there to show how each vertex * on the tan triangle translates to its corresponding vertex on * the green triangle. / /* IGNORE THIS SECTION*** * housekeeping */ { textFont(createFont("Verdana"), 20); smooth(); fill(0, 0, 0); strokeWeight(2); var title = "Moving Triangles Tutorial"; text(title, 200 - textWidth(title) / 2, 30); } /* color coded labels for x- and y- coordinates */ textFont(createFont("Verdana"), 16); fill(255, 128, 0); // orange text("(200, 100)", 94, 106); text("(100, 300)", 5, 306); fill(128, 0, 255); // purple text("(250, 100)", 262, 106); text("(150, 300)", 175, 306); fill(255, 0, 128); // hot pink text("(175, 175)", 238, 181); text("(125, 375)", 138, 381); /* initial position of triangle */ fill(182, 166, 124); stroke(182, 166, 124); triangle(100, 300, 150, 300, 125, 375); /* final position of triangle */ fill(0, 200, 0); stroke(0, 200, 0); triangle(200, 100, 250, 100, 225, 175); /* color-coded vertices for triangle */ fill(255, 128, 0); // orange stroke(255, 128, 0); ellipse(200, 100, 6, 6); ellipse(100, 300, 6, 6); fill(128, 0, 255); // purple stroke(128, 0, 255); ellipse(250, 100, 6, 6); ellipse(150, 300, 6, 6); fill(255, 0, 128); // hot pink stroke(255, 0, 128); ellipse(225, 175, 6, 6); ellipse(125, 375, 6, 6); /* IGNORE THIS SECTION *** * more housekeeping * arrows connecting vertices */ { fill(255, 128, 0); // orange stroke(255, 128, 0, 128); line(100, 300, 200, 100); pushMatrix(); rotate(30); translate(23, -108); triangle(200, 100, 195, 110, 205, 110); popMatrix(); fill(128, 0, 255); // purple stroke(128, 0, 255, 128); line(150, 300, 250, 100); pushMatrix(); rotate(30); translate(17, -131); triangle(250, 100, 245, 110, 255, 110); popMatrix(); fill(255, 0, 128, 128); // hot pink stroke(255, 0, 128, 128); line(125, 375, 225, 175); pushMatrix(); rotate(30); translate(58, -131); triangle(225, 175, 220, 185, 230, 185); popMatrix(); } /* Example created by trek: http://khanacademy.org/profile/trek ***/
Folds	42,50,97,124
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOiRzYWyCgw
Votes	262
Spin-Offs	28
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	trek
Author Name	trekcelt
Author ID	kaid_851318081167234425922340
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739450033958
Updated	4 months ago, 1744845442887
Source Deleted	unknown