40:null 41:["$","title",null,{"children":"Intro to Computer Graphics #2 | ronichester | Observable"}] 47:T2252,{ const canvas = document.getElementById('drawing1'); //reference to canvas by name const ctx = canvas.getContext("2d"); //define 2D context for the canvas //initializing variables const radius = 6; //radius of the points on the drawing let prevMouse = null; //previous mouse position //rectangle A let pointsA = [[150, 200], //center point [200, 210]]; //midside 1 point (right of center) //[midside2], //midside 2 point (above center) //[opposite1], //opposite 1 point (in front of ms1) //[opposite2]]; //opposite 2 point (in front of ms2) pointsA = pointsA.concat([calcMidSide2(pointsA[0], pointsA[1])]); //midside 2 point let opposite = opposPoints(pointsA[0], pointsA[1], pointsA[2]); //opposite points 1 and 2 pointsA = pointsA.concat([opposite[0]], [opposite[1]]) //concat all points together //rectangle B let pointsB = [[400, 450], //center point [400, 420]]; //midside 1 point (above center) pointsB = pointsB.concat([calcMidSide2(pointsB[0], pointsB[1], 3)]); //midside 2 point let oppositeB = opposPoints(pointsB[0], pointsB[1], pointsB[2]); //opposite points 1 and 2 pointsB = pointsB.concat([oppositeB[0]], [oppositeB[1]]) //concat all points together //define update function: clear drawing, draw the points and rectangles const update = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); //clear drawing let verticesA = rectVertices(...pointsA.slice(0,3)); //get vertices of rectangle A let verticesB = rectVertices(...pointsB.slice(0,3)); //get vertices of rectangle B let intersect = checkIntersect(verticesA, verticesB); //check intersection between rectangles A and B let centerAinRectB = util2d.pointInConvexPoly(pointsA[0], verticesB) //check if centerA inside rectB let centerBinRectA = util2d.pointInConvexPoly(pointsB[0], verticesA) //check if centerB inside rectA ctx.fillStyle = ctx.strokeStyle = (intersect || centerAinRectB || centerBinRectA) ? "red" //color style = red : "black"; //color style = black //drawing the points for (let p of pointsA.concat(pointsB)) { //iterate through all the points ctx.beginPath(); drawCircle(ctx, p, radius); //draw a circle around the point ctx.fill(); //filled circle } //drawing the rectangles for (let pts of [pointsA, pointsB]) { ctx.beginPath(); //draw lines between vertices of rectA for (let p of rectVertices(...pts.slice(0,3))) ctx.lineTo(...p); ctx.closePath(); ctx.stroke(); } } //end update function //function for dragging the center point const dragCenter = (e, i) => { let mouse = [e.offsetX, e.offsetY]; //mouse position x,y let delta = vec2.sub([], mouse, prevMouse); //distance travelled by mouse drag prevMouse = mouse; //update previous mouse position let pts = (i === 0) ? pointsA : pointsB //i=0 means rect A, i=5 means rect B let [center, midside1, midside2, oppo1, oppo2] = pts; //naming the points let u = vec2.sub([], midside1, center); //vector(center -> midside1) let v = vec2.sub([], midside2, center); //vector(center -> midside2) //update points vec2.add(center, center, delta); //update center position vec2.add(midside1, center, u); //update midside1 position vec2.add(midside2, center, v); //update midside2 position vec2.sub(oppo1, center, u); //update oppo1 position vec2.sub(oppo2, center, v); //update oppo2 position } //end dragCenter function //function for dragging one of the side points const dragSide = (e, i) => { let mouse = [e.offsetX, e.offsetY]; //mouse position x,y let delta = vec2.sub([], mouse, prevMouse); //distance travelled by mouse drag prevMouse = mouse; //update previous mouse position let pts = (i === 1 || i === 2 || i === 3 || i === 4) ? pointsA //if i in [1,2,3,4] => rect A : pointsB //if i in [6,7,8,9] => rect B let [center, midside1, midside2, oppo1, oppo2] = pts; //naming the points let u = vec2.sub([], midside1, center) //vector u before update (center -> midside1) let v = vec2.sub([], midside2, center); //vector v before update (center -> midside2) //update points and vectors u, v if (i === 1 || i === 6) { //midside1 selected vec2.add(midside1, midside1, delta) //update midside1 vec2.sub(oppo1, oppo1, delta) //update oppo1 vec2.sub(u, midside1, center) //update vector u vec2.scale(v, vec2.normalize([], [u[1], -u[0]]), vec2.len(v)) //update v = |v| * v'_norm vec2.add(midside2, center, v) //update midside2 vec2.sub(oppo2, center, v) //update oppo2 } else if (i === 2 || i === 7) { //midside2 selected vec2.add(midside2, midside2, delta) //update midside2 vec2.sub(oppo2, oppo2, delta) //update oppo2 vec2.sub(v, midside2, center) //update vector v vec2.scale(u, vec2.normalize([], [-v[1], v[0]]), vec2.len(u)) //update u = |u| * u'_norm vec2.add(midside1, center, u) //update midside1 vec2.sub(oppo1, center, u) //update oppo1 } else if (i === 3 || i === 8) { //oppo1 selected vec2.add(oppo1, oppo1, delta) //update oppo1 vec2.sub(midside1, midside1, delta) //update midside1 vec2.sub(u, midside1, center) //update vector u vec2.scale(v, vec2.normalize([], [u[1], -u[0]]), vec2.len(v)) //update v = |v| * v'_norm vec2.add(midside2, center, v) //update midside2 vec2.sub(oppo2, center, v) //update oppo2 } else if (i === 4 || i === 9) { //oppo2 selected vec2.add(oppo2, oppo2, delta) //update oppo2 vec2.sub(midside2, midside2, delta) //update midside2 vec2.sub(v, midside2, center) //update vector v vec2.scale(u, vec2.normalize([], [-v[1], v[0]]), vec2.len(u)) //update u = |u| * u'_norm vec2.add(midside1, center, u) //update midside1 vec2.sub(oppo1, center, u) //update oppo1 } } //end dragSide function //function for pressing and holding mouse button canvas.onmousedown = (e) => { const mouse = [e.offsetX, e.offsetY]; //mouse click position x, y prevMouse = mouse; //update previous mouse position canvas.onmousemove = null; //always initialize with no movement for (let i = 0; i < 10; i++) { //for each point, check if click was on it let p = pointsA.concat(pointsB)[i]; let d = vec2.distance(mouse, p); //measure distance between mouse click and point if (d <= radius) { //if dist < point radius: clicked on a point canvas.onmousemove = (i===0 || i===5) //conditional function: if i=0 or i=5 ? (e) => { //onmousemove means dragCenter(e, i); //drag center point rectA (i=0) or rectB (i=5) update(); //update drawing } : (e) => { //else (i in [1,2,3,4,6,7,8,9]) onmousemove means dragSide(e, i); //drag side point i update(); //update drawing } } //end if } //end for } //end mousedown function //function for releasing or not pressing mouse button canvas.onmouseup = () => canvas.onmousemove = null; //calling update function => draw the points and rectangle update(); return "click to open source code" }48:T2288,{ const canvas = document.getElementById('drawing2'); //reference to canvas by name const ctx = canvas.getContext("2d"); //define 2D context for the canvas //initializing variables const radius = 6; //radius of the points on the drawing let circleRadius = 90 //circle radius let circleCenter = [180, 180] //circle center let circleEdge = vec2.add([], circleCenter, [circleRadius, 0]) //point defined on the circle edge let prevMouse = null; //previous mouse position let points = [[400, 400], //rectangle center point [450, 400]]; //rectangle midside 1 point (right of center) points = points.concat([calcMidSide2(points[0], points[1])]); //midside 2 point let opposite = opposPoints(points[0], points[1], points[2]); //opposite points 1 and 2 points = points.concat([opposite[0]], [opposite[1]]) //concat all rectangle points together //define update function: clear drawing, draw the points, rectangle and circle const update = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); //clear drawing let vertices = rectVertices(...points.slice(0,3)); //get rectangle vertices let intersect = intersectCircle (circleCenter, circleRadius, vertices); //check intersection let ccenterInRectangle = util2d.pointInConvexPoly(circleCenter, vertices) //check if circle center inside rectangle ctx.fillStyle = ctx.strokeStyle = (intersect || ccenterInRectangle) //if intersect OR ccenterInRectangle ? "red" //color style = red : "black"; //else color style = black //drawing the points for (let p of points.concat([circleCenter], [circleEdge])) { //iterate through all the points ctx.beginPath(); drawCircle(ctx, p, radius); //draw a circle around the point ctx.fill(); //filled circle } //drawing the circle ctx.beginPath(); drawCircle(ctx, circleCenter, circleRadius); //draw the circle around its center ctx.stroke(); //outlined circle //drawing the rectangle ctx.beginPath(); //draw lines between vertices of rectA for (let p of rectVertices(...points.slice(0,3))) ctx.lineTo(...p); ctx.closePath(); ctx.stroke(); } //end update function //function for dragging the center point const dragCenter = (e, i) => { let mouse = [e.offsetX, e.offsetY]; //mouse position x,y let delta = vec2.sub([], mouse, prevMouse); //distance travelled by mouse drag prevMouse = mouse; //update previous mouse position let [center, midside1, midside2, oppo1, oppo2] = points; //naming rect points let u = vec2.sub([], midside1, center); //vector(center -> midside1) let v = vec2.sub([], midside2, center); //vector(center -> midside2) let [ccenter, cedge] = [circleCenter, circleEdge]; //naming circle points let r = vec2.sub([], cedge, ccenter); //vector "radius"(ccenter -> cedge) if (i === 0) { //update rectangle points vec2.add(center, center, delta); //update center position vec2.add(midside1, center, u); //update midside1 position vec2.add(midside2, center, v); //update midside2 position vec2.sub(oppo1, center, u); //update oppo1 position vec2.sub(oppo2, center, v); //update oppo2 position } else { //update circle points (i=5) vec2.add(ccenter, ccenter, delta); //update ccenter position vec2.add(cedge, ccenter, r); //update cedge position } } //end dragCenter function //function for dragging one of the side points const dragSide = (e, i) => { let mouse = [e.offsetX, e.offsetY]; //mouse position x,y let delta = vec2.sub([], mouse, prevMouse); //distance travelled by mouse drag prevMouse = mouse; //update previous mouse position let [center, midside1, midside2, oppo1, oppo2] = points; //naming the points let u = vec2.sub([], midside1, center) //vector u before update (center -> midside1) let v = vec2.sub([], midside2, center); //vector v before update (center -> midside2) let [ccenter, cedge] = [circleCenter, circleEdge]; //naming circle points let r = vec2.sub([], cedge, ccenter); //vector "radius"(ccenter -> cedge) if (i === 1) { //midside1 selected vec2.add(midside1, midside1, delta) //update midside1 vec2.sub(oppo1, oppo1, delta) //update oppo1 vec2.sub(u, midside1, center) //update vector u vec2.scale(v, vec2.normalize([], [u[1], -u[0]]), vec2.len(v)) //update v = |v| * v'_norm vec2.add(midside2, center, v) //update midside2 vec2.sub(oppo2, center, v) //update oppo2 } else if (i === 2) { //midside2 selected vec2.add(midside2, midside2, delta) //update midside2 vec2.sub(oppo2, oppo2, delta) //update oppo2 vec2.sub(v, midside2, center) //update vector v vec2.scale(u, vec2.normalize([], [-v[1], v[0]]), vec2.len(u)) //update u = |u| * u'_norm vec2.add(midside1, center, u) //update midside1 vec2.sub(oppo1, center, u) //update oppo1 } else if (i === 3) { //oppo1 selected vec2.add(oppo1, oppo1, delta) //update oppo1 vec2.sub(midside1, midside1, delta) //update midside1 vec2.sub(u, midside1, center) //update vector u vec2.scale(v, vec2.normalize([], [u[1], -u[0]]), vec2.len(v)) //update v = |v| * v'_norm vec2.add(midside2, center, v) //update midside2 vec2.sub(oppo2, center, v) //update oppo2 } else if (i === 4) { //oppo2 selected vec2.add(oppo2, oppo2, delta) //update oppo2 vec2.sub(midside2, midside2, delta) //update midside2 vec2.sub(v, midside2, center) //update vector v vec2.scale(u, vec2.normalize([], [-v[1], v[0]]), vec2.len(u)) //update u = |u| * u'_norm vec2.add(midside1, center, u) //update midside1 vec2.sub(oppo1, center, u) //update oppo1 } else if (i === 6) { //circleEdge selected vec2.add(r, r, delta) //update vector r vec2.add(cedge, ccenter, r) //update circleEdge circleRadius = vec2.len(r) //update circleRadius } } //end dragSide function //function for pressing and holding mouse button canvas.onmousedown = (e) => { const mouse = [e.offsetX, e.offsetY]; //mouse click position x, y prevMouse = mouse; //update previous mouse position canvas.onmousemove = null; //always initialize with no movement for (let i = 0; i < 7; i++) { //for each point, check if click was on it let p = points.concat([circleCenter], [circleEdge])[i]; let d = vec2.distance(mouse, p); //measure distance between mouse click and point if (d <= radius) { //if dist < point radius: clicked on a point canvas.onmousemove = (i===0 || i===5) //conditional function: if i=0 or i=5 ? (e) => { //onmousemove means dragCenter(e, i); //drag center point rectangle (i=0) or circle (i=5) update(); //update drawing } : (e) => { //else (i in [1,2,3,4,6]) onmousemove means dragSide(e, i); //drag side point i update(); //update drawing } } //end if } //end for } //end mousedown function //function for releasing or not pressing mouse button canvas.onmouseup = () => canvas.onmousemove = null; //calling update function => draw the points and rectangle update(); return "click to open source code" }49:[] 45:{"id":"1a2f437c9c5e8d0a","slug":null,"title":"Intro to Computer Graphics #2","thumbnail":"56d3c2b1947db2e706ca56de6c562f2d952b5ef91c398cbeb21652578f32fc8c","access_level":"public","create_time":"$D2022-04-26T15:33:36.268Z","update_time":"$D2022-11-16T14:07:15.236Z","view_time":null,"first_public_time":"$D2022-11-16T14:07:28.511Z","has_unpublished_edits":null,"fork":{"id":"69f6638c88e5dc0a","slug":"configurando-um-triangulo-isosceles","title":"Configurando um triângulo isósceles","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b94c5ea97a12134f","login":"ronichester","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e6a7fd3f71019b52dd5b0c6f24ad0abd83dbe940b3c56b187cd4d29d8bcf53ff","tier":"starter_2024","bio":"","following":false},"version":1062,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c738c8a2cffc3d3","login":"ronichester","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e6a7fd3f71019b52dd5b0c6f24ad0abd83dbe940b3c56b187cd4d29d8bcf53ff","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0c738c8a2cffc3d3","login":"ronichester","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e6a7fd3f71019b52dd5b0c6f24ad0abd83dbe940b3c56b187cd4d29d8bcf53ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Intro to Computer Graphics #2","cells":[{"id":76,"value":"# Intro to Computer Graphics #2\n## Author: Schechter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"## Drawing Test 1:\n### Intersection between 2 rectangles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"## Aux Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"function calcMidSide2(center, midside1, fact=2) {\n /* \n Given a center point and a point in mid-side 1 of a rectangle (right of center), \n calculates the point in mid-side 2 (above center). A factor is used to define\n the length of the other side of the rectangle. \n */\n let u = vec2.sub([], midside1, center) //vector u(ctr -> ms1)\n let v = vec2.scale([], [u[1], -u[0]], fact) //v = factor * u_rotated_90_deg_ccwise\n return vec2.add([], center, v) //midside2\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function opposPoints(center, midside1, midside2) {\n /* Returns the 2 opposite points of midside1 and midside2 on a rectangle */\n const u = vec2.sub([], midside1, center); //vector u = midside1 - center\n const v = vec2.sub([], midside2, center); //vector v = midside2 - center \n const op1 = vec2.sub([], center, u) //opposite point 1 = center - u\n const op2 = vec2.sub([], center, v) //opposite point 2 = center - v\n return [op1, op2];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"function rectVertices(center, midside1, midside2) {\n /* \n Returns the 4 vertices of a rectangle defined by the center point and\n two other points: one to the right and one above the center point,\n the mid-sides of the legs parallel to axis y and x respectively \n */\n const u = vec2.sub([], midside1, center); //vector u = midside1 - center\n const v = vec2.sub([], midside2, center); //vector v = midside2 - center \n const A = vec2.add([], midside1, v); //vertex A = midside1 + v \n const B = vec2.sub([], midside2, u); //vertex B = midside2 - u\n const C = vec2.sub([], vec2.sub([], center, u), v); //vertex C = oppo1 - v = (center - u) - v\n const D = vec2.sub([], midside1, v); //vertex D = midside1 - v\n return [A, B, C, D];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"//defining a function to draw a circle inside a draw path command in CANVAS\ndrawCircle = (context, point, radius) => context.arc(...point, radius, 0, 2 * Math.PI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"function checkIntersect(vertsA, vertsB) {\n /* \n Check intersection between the line segments of 2 rectangles. Input parameters vertsA and vertsB\n are the arrays for rectangles A and B respectively, each containing four 2D vertices. \n Returns a boolean flag: if intersection found => true; else => false. \n */\n let flag = false; //intersection flag initialized as false\n for (let i = 0; i < 4; i++) { \n for (let j = 0; j < 4; j++) {\n flag = util2d.segmentsIntersect(vertsA[i], vertsA[(i+1) % 4], vertsB[j], vertsB[(j+1) % 4]);\n if (flag) break; //if intersection found no need to check other segments\n }\n if (flag) break; //if intersection found no need to check other segments\n }\n return flag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"function intersectCircle (cCenter, cRadius, rVertices) {\n /* \n Given a circle center, a circle radius and four rectangle vertices, returns true\n if circle intercepts the rectangle, false otherwise. \n */\n let flag = false;\n for (let i = 0; i < 4; i++) { //calculate distance from circle center to rectangle sides\n let distance = util2d.distToSegment(cCenter, rVertices[i], rVertices[(i+1) % 4]);\n flag = (distance <= cRadius); //if distance <= circle radius means there is an intersection\n if (flag) break; //if intersection found no need to check other segments\n }\n return flag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"import { vec2, mat3, util2d } from \"@esperanc/funcoes-2d-uteis\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"