Viewing Program

Program Data

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

Title	Polygon Drawing Tool
ID	1326837815
Created	12 years ago, 1359330018967
Updated	12 years ago, 1368959283658
Code	// Allows you drag handles and copy code for // drawing a regular polygon. // Press x to constrain to the x axis, or // press y to constrain to the y axis. // If you make a mistake while dragging one of the vertices, right click. You can also undo by pressing the left cursor key while the canvas is focused. // Number of vertices in a polygon var num = 16; // How large the polygon should be between the center and one of the vertices. var radius = 100; var centerOffset = 0; var offsetX = 0; var offsetY = 0; offsetX += centerOffset; offsetY += centerOffset; var lineThickness = 2; translate(offsetX, offsetY); rotate(0); var nodes = []; var drawScreen = null; var which = 0; var xConstraint = false; var yConstraint = false; var polygon = null; var working_vertex = [0, 0]; var lock_keyboard = false; var vertices_history = []; var regularPolygon = function(cx, cy, r, n) { this.cx = cx; this.cy = cy; this.r = r; this.n = n; // Define x and y coordinates var x, y; var a, b; this.vertices = []; this.update = function () { // Rotate polygon to the apparent 0 degrees a = 90 * (this.n - 2) / this.n; b = 360/this.n; this.vertices = []; for (var i = 0; i < this.n; i++) { // Get x and y coordinates for current vertex x = this.cx + this.r * cos(a + i * b); y = this.cy + this.r * sin(a + i * b); // Append x and y coordinates to vertices array this.vertices[i] = [round(x), round(y)]; } }; this.update(); // Begin drawing the polygon this.draw = function() { beginShape(); for (var i = 0; i < this.vertices.length; i++) { vertex(this.vertices[i][0], this.vertices[i][1]); } // Done drawing, now close it endShape(CLOSE); }; }; // When function is called, "push" a new Array entry var createCircle = function(cX,cY){ nodes.push({ x:cX, y:cY, mouseOver: false, circleSize: 12 }); }; var drawNodes = function(){ strokeWeight(1); // Cycle through the Array and draw a Circle for each entry for (var i = 0; i < nodes.length; i++){ if(dist(nodes[i].x, nodes[i].y, mouseX-offsetX, mouseY-offsetY) < nodes[i].circleSize/1.5 ){ fill (128, 0, 255, 120); } else { noFill(); } ellipse( nodes[i].x, nodes[i].y, nodes[i].circleSize, nodes[i].circleSize ); } }; var coordinates = "(0, 0)"; // Draws coordinates mouseMoved = function() { fill(255, 255, 255); noStroke(); rect(334, 382, 400, 400); coordinates = "(" + mouseX + ", " + mouseY + ")"; fill(0, 0, 0); text(coordinates, 370, 392); }; mouseDragged = function(){ if(which) { // Move Circle to current Mouse Position nodes[which - 1].x = mouseX-offsetX; nodes[which - 1].y = mouseY-offsetY; if(xConstraint) { nodes[which - 1].y = working_vertex[1]; } else if(yConstraint) { nodes[which - 1].x = working_vertex[0]; } coordinates = "(" + nodes[which - 1].x + ", " + nodes[which - 1].y + ")"; polygon.vertices[which-1][0] = nodes[which-1].x; polygon.vertices[which-1][1] = nodes[which-1].y; drawScreen(); println("Changing... " + coordinates + " " + (xConstraint ? "(x)" : (yConstraint ? "(y)" : "")) + "\n\n\n\n" ); } }; mousePressed = function() { // Reverse the current change if the right button is clicked if(mouseButton === RIGHT) { nodes[which - 1].x = working_vertex[0]; nodes[which - 1].y = working_vertex[1]; which = 0; polygon.vertices[which - 1][0] = nodes[which - 1].x; polygon.vertices[which - 1][1] = nodes[which - 1].y; polygon.draw(); } else if(!which) { // Cycle through the Array for (var i = 0; i < nodes.length; i++){ // If Radius Collision Detected... if (dist(nodes[i].x, nodes[i].y, mouseX-offsetX, mouseY-offsetY) < nodes[i].circleSize/1.5 ){ which = i + 1; working_vertex[0] = nodes[i].x; working_vertex[1] = nodes[i].y; break; } } } drawScreen(); }; var displayToConsole = function() { var s = "------------------------------------------------\n\n" + "beginShape();\n"; for(var j = 0; j < num; j++) { s += "vertex("+nodes[j].x+ ", " + nodes[j].y+");\n"; } s += "endShape(CLOSE);\n\n^ Copy text above :)\n\n"; println(s); }; mouseReleased = function() { if(which) { vertices_history[vertices_history.length] = { vertex: which-1, x: working_vertex[0], y: working_vertex[1] }; which = 0; working_vertex = [0, 0]; xConstraint = false; yConstraint = false; drawScreen(); displayToConsole(); } }; var displayText = function(){ textAlign(LEFT, CENTER); textSize(12); fill(0); // X Axis textAlign(CENTER, CENTER); text("X", 50, 15); // Y Axis textAlign(LEFT, CENTER); text(" Y", 5, 50); // Display Numbers for(var i = 100; i < 351; i+=50) { noStroke(); textAlign(LEFT, CENTER); text(i, 5, i); textAlign(CENTER, CENTER); text(i, i, 15); } stroke(0); // Restore stroke to normal }; var drawGrid = function(){ strokeWeight(1); // Line Thickness stroke(0, 0, 0, 75); // Draw Black Crosshair Lines at 0,0 line(0, 0, 0, 400); // Y Axis Line line(0, 0, 400, 0); // X Axis Line // Draw Blue Grid for(var i = 0; i < 400 ; i += 10){ if(i % 50 === 0) { stroke(0, 100, 255, 50); // Opaque Blue } else { stroke(0, 100, 255, 15); // Light Blue } line(i, 0, i, 400); line(0, i, 400, i); } }; polygon = new regularPolygon(200, 200, radius, num); for(var i = 0; i < num; i++) { createCircle( polygon.vertices[i][0], polygon.vertices[i][1] ); } drawScreen = function(){ background(255); // Clear the Screen White drawGrid(); displayText(); drawNodes(); fill(0, 0, 255, 60); strokeWeight(lineThickness); polygon.draw(); }; drawScreen(); var pop = function(array) { var newArray = []; for(var i = 0; i < array.length-1; i++) { newArray[i] = array[i]; } return newArray; }; var current_vertex = null; keyPressed = function() { debug(vertices_history); if(keyCode === 37 && !lock_keyboard && vertices_history.length > 0) { current_vertex = vertices_history[vertices_history.length-1]; nodes[current_vertex.vertex].x = current_vertex.x; nodes[current_vertex.vertex].y = current_vertex.y; vertices_history = pop(vertices_history); for(var k = 0; k < num; k++) { polygon.vertices[k] = []; polygon.vertices[k][0] = nodes[k].x; polygon.vertices[k][1] = nodes[k].y; } drawScreen(); displayToConsole(); } if(keyCode === 88 && !lock_keyboard) { xConstraint = !xConstraint; if(yConstraint) { yConstraint = false; } lock_keyboard = true; } else if(keyCode === 89 && !lock_keyboard) { yConstraint = !yConstraint; if(xConstraint) { xConstraint = false; } } }; keyReleased = function() { lock_keyboard = false; }; /* Tutorials in plain English by Dillinger © 2012. Clone created by sauj123 © 2013 (I do not endorse the original author and I am not affiliated with him). All code is owned by its respective author and made available under an MIT license (link is at the bottom of the page) */
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBi34Nf4BAw
Votes	408
Spin-Offs	110
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"1248607003","title":"Triangle Drawing Tool","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	sauj123
Author Name	sauj123khanacademy
Author ID	kaid_1001959293899649736925392
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739281427684
Updated	8 months ago, 1744828443944
Source Deleted	unknown