Viewing Program

Program Data

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

Title	Linear transformation playground
ID	6529344656195584
Created	5 years ago, 1593790034774
Updated	5 years ago, 1594169013555
Code	// Playground for linear transformations (i.e. matrices). // Drag the vectors to see what happens when you move them around. // // // // // INIT CODE // // // // translate(200, 200); // Available colors var GRAY_A = [227, 229, 230]; var GRAY_C = [227, 229, 230]; var BLUE_D = [17 , 172, 205]; var BLUE_E = [12 , 127, 153]; var MAROON_D = [202, 51 , 124]; var MAROON_E = [158, 3 , 78 ]; var BLACK = [0 , 0 , 0 ]; // // // // // FUNCTIONS TO CHECK OFF-SCREEN // // // // var linelineCollision = function(x1, y1, x2, y2, x3, y3, x4, y4) { // from http://www.jeffreythompson.org/collision-detection/line-rect.php var denominator = (y4-y3)(x2-x1) - (x4-x3)(y2-y1); var uA = ((x4-x3)(y1-y3) - (y4-y3)(x1-x3)) / denominator; var uB = ((x2-x1)(y1-y3) - (y2-y1)(x1-x3)) / denominator; if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) { var intersectionX = x1 + (uA * (x2-x1)); var intersectionY = y1 + (uA * (y2-y1)); return [intersectionX, intersectionY]; } return false; }; var boundInScreen = function(point1, point2) { // Check if a line from point1 to point2 is in the screen. // True if (1) both points are inside the canvas rectangle // or if (2) the line intersects any edge of the canvas rectangle. // Remember to account for the (200, 200) translation. var x1 = point1[0] + 200; var y1 = point1[1] + 200; var x2 = point2[0] + 200; var y2 = point2[1] + 200; // Check (1). if ((x1 > 0 && x1 < 400 && y1 > 0 && y1 < 400) && (x2 > 0 && x2 < 400 && y2 > 0 && y2 < 400)) { return [point1, point2]; } // Check (2). var possibleIntersections = [ linelineCollision(x1,y1,x2,y2, -1 , 0 , 401, 0 ), // top linelineCollision(x1,y1,x2,y2, 0 , -1 , 0 , 401), // left linelineCollision(x1,y1,x2,y2, -1 , 400, 401, 400), // bottom linelineCollision(x1,y1,x2,y2, 400, -1 , 400, 401) // right ]; var intersections = []; for (var i = 0; i < possibleIntersections.length; i++) { if (possibleIntersections[i] !== false) { intersections.push(possibleIntersections[i]); } } if (intersections.length === 0) { return false; } else if (intersections.length === 1) { // One point is inside the canvas rectangle. if (x1 > 0 && x1 < 400 && y1 > 0 && y1 < 400) { return [[intersections[0][0]-200, intersections[0][1]-200], point1]; } else if (x2 > 0 && x2 < 400 && y2 > 0 && y2 < 400) { return [[intersections[0][0]-200, intersections[0][1]-200], point2]; } else { // Sometimes a line only intersects once with a corner due to numerical precision. If it has no point inside the canvas, we want to skip drawing it. return false; } } else if (intersections.length >= 2) { // Find the two distinct intersection points var intersection1 = intersections[0]; var intersection2 = null; for (var i = 1; i < intersections.length; i++) { // If the two intersection points are different enough, accept them. if (Math.abs(intersections[i][0] - intersection1[0]) > 5 \|\| Math.abs(intersections[i][1] - intersection1[1]) > 5) { intersection2 = intersections[i]; break; } } if (intersection2 === null) { return false; // All intersections equal -- this should never happen. } return [[intersection1[0]-200, intersection1[1]-200], [intersection2[0]-200, intersection2[1]-200]]; } }; // // // // // NEW DRAWING FUNCTIONS // // // // // special line: added options dict and changed point input var sline = function(point1, point2, options) { var bounded = boundInScreen(point1, point2); if (bounded === false) { return; } point1 = bounded[0]; point2 = bounded[1]; var r = options.stroke[0]; var g = options.stroke[1]; var b = options.stroke[2]; stroke(r, g, b); strokeWeight(options.strokeWidth); line(point1[0], point1[1], point2[0], point2[1]); }; var arrow = function(point1, point2, options) { sline(point1, point2, options); var middle = [(point1[0] + point2[0])/2, (point1[1] + point2[1])/2]; var direction = [point2[0] - point1[0], point2[1] - point1[1]]; var perpVector = [-direction[1], direction[0]]; var arrowTightness = 5; perpVector = [perpVector[0] / arrowTightness, perpVector[1] / arrowTightness]; var arrowBase = [middle[0] + direction[0] / arrowTightness, middle[1] + direction[1] / arrowTightness]; sline([arrowBase[0] + perpVector[0], arrowBase[1] + perpVector[1]], point2, options); sline([arrowBase[0] - perpVector[0], arrowBase[1] - perpVector[1]], point2, options); }; // special text: added options dict and changed point input var stext = function(position, str, options) { var r = options.color[0]; var g = options.color[1]; var b = options.color[2]; fill(r, g, b); textSize(18); text(str, position[0], position[1]); }; // // // // // GRID CODE // // // // var SCALE = 50; var scaleToKA = function(coord) { // Scale by factor of 100 and flip y coordinates return [coord[0]SCALE, -coord[1]SCALE]; }; var transform = function(coords, iHat, jHat) { var x = coords[0]; var y = coords[1]; return scaleToKA([xiHat[0] + yjHat[0], xiHat[1] + yjHat[1]]); }; // Draw background grid after a linear transformation var drawGrid = function(iHat, jHat) { // iHat and jHat are length 2 arrays of coordinates; unitVectors is boolean var bound = 10; // Big number that will be out of screen as start/end of grid lines background(255, 255, 255); // First, draw background grid lines for (var x = -4; x <= 4; x++) { for (var y = -4; y <= 4; y++) { // Background grid lines unchanged by transformation sline(scaleToKA([-4,y]), scaleToKA([4,y]), {stroke: GRAY_A, strokeWidth: 0.1}); sline(scaleToKA([x,-4]), scaleToKA([x,4]), {stroke: GRAY_A, strokeWidth: 0.1}); } } // // Second, draw transformed grid lines for (var x = -bound; x <= bound; x++) { for (var y = -bound; y <= bound; y++) { sline(transform([-bound,y], iHat, jHat), transform([bound,y], iHat, jHat), {stroke: GRAY_C, strokeWidth: 2}); sline(transform([x,-bound], iHat, jHat), transform([x,bound], iHat, jHat), {stroke: GRAY_C, strokeWidth: 2}); } } // Next, draw axes sline(transform([-bound,0], iHat, jHat), transform([bound,0], iHat, jHat), {stroke: BLACK, strokeWidth: 2}); sline(transform([0,-bound], iHat, jHat), transform([0,bound], iHat, jHat), {stroke: BLACK, strokeWidth: 2}); // Finally, draw unit vectors // unit vectors stext(transform([0.5, -0.5], iHat, jHat), "i", {color: BLUE_E}); arrow([0,0], scaleToKA(iHat), {stroke: BLUE_D, strokeWidth: 3}); stext(transform([0.25, 0.35], iHat, jHat), "j", {color: MAROON_E}); arrow([0,0], scaleToKA(jHat), {stroke: MAROON_D, strokeWidth: 3}); }; // // // // // DRAGABLE BALL CODE // // // // var Ball = function(x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.held = false; this.draw = function() { strokeWeight(1); stroke(0, 0, 0, 120); fill(255, 220, 100); var coords = scaleToKA([this.x, this.y]); ellipse(coords[0], coords[1], this.radius2, this.radius2); }; this.selected = function() { this.held = dist(mouseX, mouseY, this.xSCALE+200, -this.ySCALE+200) < this.radius; }; this.drag = function() { if (this.held) { this.x = (constrain(mouseX, 0, 400) - 200)/SCALE; this.y = -(constrain(mouseY, 0, 400) - 200)/SCALE; return true; } }; this.coords = function() { return [this.x, this.y]; }; }; var iHatBall = new Ball(1, 0, 8); var jHatBall = new Ball(0, 1, 8); var displayCoords = function() { // background box noStroke(); fill(200, 200, 200, 100); rect(-200, -200, 100, 80); // matrix entries textSize(14); fill(0, 0, 0); text("Matrix:", -190, -180); fill(BLUE_E[0], BLUE_E[1], BLUE_E[2]); text(iHatBall.x.toFixed(1), -175, -155); text(iHatBall.y.toFixed(1), -175, -135); fill(MAROON_E[0], MAROON_E[1], MAROON_E[2]); text(jHatBall.x.toFixed(1), -145, -155); text(jHatBall.y.toFixed(1), -145, -135); // text(iHatBall.x.toFixed(1) + " " + jHatBall.x.toFixed(1), -175, -155); // text(iHatBall.y.toFixed(1) + " " + jHatBall.y.toFixed(1), -175, -135); // matrix brackets strokeWeight(2); stroke(0, 0, 0); line(-185, -170, -185, -130); // left line(-185, -170, -180, -170); line(-185, -130, -180, -130); line(-115, -170, -115, -130); // right line(-115, -170, -120, -170); line(-115, -130, -120, -130); }; var display = function() { drawGrid(iHatBall.coords(), jHatBall.coords()); iHatBall.draw(); jHatBall.draw(); displayCoords(); }; // // // // // EVENT HANDLING // // // // mousePressed = function() { iHatBall.selected(); jHatBall.selected(); }; mouseReleased = function() { iHatBall.held = false; jHatBall.held = false; }; mouseOut = function() { mouseReleased(); }; mouseDragged = function() { iHatBall.drag(); jHatBall.drag(); display(); }; // // // // // INIT GRID FOR THE FIRST TIME // // // // display();
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOWm-MzMCww
Votes	270
Spin-Offs	12
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	lakern
Author Name	kaid_967682051437597768372854
Author ID	kaid_967682051437597768372854
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739458918500
Updated	4 months ago, 1744845366726
Source Deleted	unknown