Viewing Program

Program Data

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

Title	Rotate this!
ID	6375407836200960
Created	11 years ago, 1393470615045
Updated	4 years ago, 1621531241977
Code	/* * Render a rectangle rotated by theta. This assumes the * KA default of rectMode(CORNER). The function returns * the point of rotation. / var rotateRect = function(x, y, w, h, rnd, theta) { if (arguments.length < 6) { theta = rnd; rnd = undefined; } pushMatrix(); / get ready to make a mess / var cx = x + w/2; var cy = y + h/2; translate(cx, cy); / move origin to point of rotation / rotate(theta); rect(-w/2, -h/2, w, h, rnd); popMatrix(); / clean up after yourself / return { x: cx, y: cy }; }; / * Render an image rotated by theta. This assumes the * KA default of imageMode(CORNER). The function returns * the point of rotation. / var rotateImage = function(img, x, y, theta, w, h) { w = (w === undefined) ? img.width : w; h = (h === undefined) ? img.height : h; pushMatrix(); / get ready to make a mess / var cx = x + w/2; var cy = y + h/2; translate(cx, cy); / move origin to point of rotation / rotate(theta); image(img, -w/2, -h/2, w, h); popMatrix(); / clean up after yourself / return { x: cx, y: cy }; }; / * Render an ellipse rotated by theta. This assumes the * KA default of ellipsetMode(CENTER). The function returns * the point of rotation. / var rotateEllipse = function(x, y, w, h, theta) { pushMatrix(); / get ready to make a mess / translate(x, y); / move origin to point of rotation / rotate(theta); ellipse(0, 0, w, h); / NOTE the x & y arguments are the origin. / popMatrix(); / clean up after yourself / return { x: x, y: y }; }; / * Render a line rotated by theta. The function returns * the point of rotation. / var rotateLine = function(x1, y1, x2, y2, theta) { pushMatrix(); / get ready to make a mess / var w2 = (x2 - x1) / 2; / half the "width" / var h2 = (y2 - y1) / 2; / half the "heigth" / var cx = x1 + w2; var cy = y1 + h2; translate(cx, cy); / move origin to point of rotation / rotate(theta); line(-w2, -h2, w2, h2); popMatrix(); / clean up after yourself / return { x: cx, y: cy }; }; / * Find the "incenter" of triangle abc. See * https://www.khanacademy.org/math/geometry/triangle-properties/angle_bisectors/v/incenter-and-incircles-of-a-triangle * and http://en.wikipedia.org/wiki/Incircle_and_excircles_of_a_triangle / var incenter = function(ax, ay, bx, by, cx, cy) { var A = dist(bx, by, cx, cy); var B = dist(ax, ay, cx, cy); var C = dist(bx, by, ax, ay); var P = A + B + C; var S = P/2; return { x: (Aax + Bbx + Ccx) / P, y: (Aay + Bby + Ccy) / P, r: sqrt((S - A)(S - B)(S - C)/S), / inradius / }; }; / Render a triangle rotated by theta / var rotateTriangle = function(ax, ay, bx, by, cx, cy, theta) { var i = incenter(ax, ay, bx, by, cx, cy); pushMatrix(); / get ready to make a mess / translate(i.x, i.y); / move origin to point of rotation / rotate(theta); / rotate by theta / / All vertice coordinates must be re-nomralized to the new origin / triangle(ax - i.x, ay - i.y, bx - i.x, by - i.y, cx - i.x, cy - i.y); popMatrix(); / clean up after yourself / return i; / return the triangle's incenter / }; / * Find the "area centroid" of a quadrilateral. See * http://en.wikipedia.org/wiki/Quadrilateral / var quadCentroid = function(x1, y1, x2, y2, x3, y3, x4, y4) { var triangleCentroid = function(ax, ay, bx, by, cx, cy) { return { x: (ax + bx + cx) / 3, y: (ay + by + cy) / 3 }; }; var c1 = triangleCentroid(x1, y1, x2, y2, x3, y3); var c2 = triangleCentroid(x3, y3, x4, y4, x1, y1); var c3 = triangleCentroid(x4, y4, x1, y1, x2, y2); var c4 = triangleCentroid(x2, y2, x3, y3, x4, y4); var m1 = (c1.y - c2.y) / (c1.x - c2.x); / slope of 1st segment / var b1 = c1.y - m1c1.x; /* Y intercept of 1st equation / var m2 = (c3.y - c4.y) / (c3.x - c4.x); / slope of 2nd segment / var b2 = c3.y - m2c3.x; /* Y intercept of 2nd equation / var cx = (b1 - b2) / (m2 - m1); return { x: cx, y: m1cx + b1 }; }; /* * Render a quadrilateral rotated by theta. The * function returns the point of rotation. / var rotateQuad = function(x1, y1, x2, y2, x3, y3, x4, y4, theta) { var c = quadCentroid(x1, y1, x2, y2, x3, y3, x4, y4); pushMatrix(); / get ready to make a mess / translate(c.x, c.y); / move origin to point of rotation / rotate(theta); / All vertice coordinates must be re-nomralized to the new origin / quad(x1-c.x, y1-c.y, x2-c.x, y2-c.y, x3-c.x, y3-c.y, x4-c.x, y4-c.y); popMatrix(); / clean up after yourself / return c; }; / * Render a Bezier curve rotated by theta. The * function returns the point of rotation. / var rotateBezier = function(x1, y1, cx1, cy1, cx2, cy2, x2, y2, theta) { / Normalize all X coordinates to the X midpoint / var mx = bezierPoint(x1, cx1, cx2, x2, 0.5); x1 -= mx; x2 -= mx; cx1 -= mx; cx2 -= mx; / Normalize all Y coordinates to the Y midpoint / var my = bezierPoint(y1, cy1, cy2, y2, 0.5); y1 -= my; y2 -= my; cy1 -= my; cy2 -= my; / Now, do it / pushMatrix(); / get ready to make a mess / translate(mx, my); / move origin to point of rotation / rotate(theta); bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2); popMatrix(); / clean up after yourself / return { x: mx, y: my }; }; / * Rotate text t at the point (x, y) by angle theta. * We assume (x, y) is the central point of rotation. / var rotateText = function(t, x, y, theta) { pushStyle(); / get ready to make a mess / pushMatrix(); translate(x, y); / move origin to point of rotation / rotate(theta); textAlign(CENTER, CENTER); text(t, 0, 0); popMatrix(); / clean up after yourself / popStyle(); return { x: x, y: y }; }; var boy = getImage("avatars/robot_female_1"); var theta = 0, dt = 1; draw = function() { var c; background(255, 255, 255); / * Alas, KA often does not center the visible * bits inside of the image's bounding box, so * the roatation still appears off kilter. * Hand tuning is the only solution... / c = rotateImage(boy, 270, 250, -theta); stroke(255, 0, 0); point(c.x, c.y); strokeWeight(2); stroke(0, 0, 0); fill(0, 255, 0, 128); c = rotateQuad(50, 25, 180, 120, 100, 180, 30, 120, -1.7theta); point(c.x, c.y); fill(255, 0, 0, 128); c = rotateRect(20, 250, 200, 100, 1.1theta); point(c.x, c.y); fill(255, 255, 0, 128); c = rotateEllipse(320, 90, 80, 130, -1.3theta); point(c.x, c.y); fill(0, 0, 255, 128); c = rotateTriangle(100, 100, 300, 100, 200, 300, 0.85theta); point(c.x, c.y); stroke(0, 173, 0); strokeWeight(4); c = rotateLine(350, 200, 100, 310, PItheta); stroke(0, 0, 0); point(c.x, c.y); var x1 = 306; var y1 = 356; var cx1 = 262; var cy1 = 138; var cx2 = 100; var cy2 = 287; var x2 = 62; var y2 = 30; noFill(); stroke(0, 94, 255); c = rotateBezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2, -0.9theta); stroke(0, 0, 0); point(c.x, c.y); textSize(30); fill(191, 0, 255); c = rotateText("Rotated text", 300, 220, -1.4theta); point(c.x, c.y); theta += dt; }; mouseClicked = function() { dt = -dt; }; // I am honored any time anybody uses my code for any purpose. // Copy freely! All my programs are at // https://www.khanacademy.org/profile/BobLyon/programs
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgID75MypCww
Votes	288
Spin-Offs	29
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"4912430865973248","title":"Scaling a Bézier Curve","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bob Lyon
Author Name	BobLyon
Author ID	kaid_1116520053705160540512971
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739457179228
Updated	4 months ago, 1744844999216
Source Deleted	unknown