30:Tfe3,{ const p2 = plotter( {width: Math.min(width, 800), height: Math.min(width, 600), yDomain: [8, -2], xDomain:[-4,8]}); let vecFontSize = 12 let vecFontWeight = 600 let totalForcePoints = [] for (let a = 10; a<120 ;a+=10){ let point = {} point["x"] = totalForceFunc(a)[0]; point["y"] = totalForceFunc(a)[1]; if(a<30){ p2.text(a, totalForceFunc(a)[0]-.2, totalForceFunc(a)[1]+.2, { size: 12, anchor: 'end', baseline: 'middle'}); p2.line_segment(totalForceFunc(a)[0]-.2, totalForceFunc(a)[1]+.2, totalForceFunc(a)[0], totalForceFunc(a)[1], {width:1}); } else if(a==30){ p2.text(a, totalForceFunc(a)[0], totalForceFunc(a)[1]+.2, { size: 12, anchor: 'middle', baseline: 'bottom'}); p2.line_segment(totalForceFunc(a)[0], totalForceFunc(a)[1]+.2, totalForceFunc(a)[0], totalForceFunc(a)[1], {width:1}); } else{ p2.text(a, totalForceFunc(a)[0]+.2, totalForceFunc(a)[1]+.2, { size: 12, anchor: 'start', baseline: 'middle'}); p2.line_segment(totalForceFunc(a)[0]+.2, totalForceFunc(a)[1]+.2, totalForceFunc(a)[0], totalForceFunc(a)[1], {width:1}); } totalForcePoints.push(point); } p2.polyline(totalForcePoints, { stroke: 'blue', width: 2, curve: true }); p2.text('Apparent wind', -4, .5, { size: 12, anchor: 'start', baseline: 'middle', weight: vecFontWeight}); p2.arrow(-4,.2,-2,.2,{stroke:'skyblue',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true,dash:'5'}); p2.arrow(-4,0,-2,0,{stroke:'skyblue',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true,dash:'5'}); p2.arrow(-4,-.2,-2,-.2,{stroke:'skyblue',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true,dash:'5'}); p2.line_segment(bowX, bowY, sternX, sternY, {stroke:'brown',width: 20, opacity: .5}); p2.polyline([ {x:-.5, y:0}, {x:-.2, y:My/8}, {x:0, y:0}, {x:Sx, y:Sy} ], { stroke: 'black', width: 3, curve: true }); p2.text('Attack Angle', Mx, My+.3, { size: 12, anchor: 'end', baseline: 'middle', weight: vecFontWeight}); p2.arrow(-.5,0,Mx,My,{stroke:'black',width:'2',interactive:false,uiDisableMove:true,uiDisableP1:true, dash:'2.2'}); p2.point(-.5,0,{stroke:'black',width:'1',interactive:false,uiDisableMove:true,uiDisableP1:true}); p2.line_segment(-.5,0,Sx,Sy,{stroke:'black',width:'2',interactive:false,uiDisableMove:true,uiDisableP1:true, dash:'2.2'}); p2.text('Lift', Lx-.3, Ly+.3, { size: 12, anchor: 'middle', baseline: 'middle', weight: vecFontWeight}); p2.arrow(0,0,Lx,Ly,{stroke:'red',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true}); p2.text('Drag', Dx, Dy+.3, { size: 12, anchor: 'start', baseline: 'middle', weight: vecFontWeight}); p2.arrow(0,0,Dx,Dy,{stroke:'red',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true}); p2.text('Forward', drivingForceVecX, drivingForceVecY+.3, { size: 12, anchor: 'end', baseline: 'middle', weight: vecFontWeight}); p2.arrow(0,0,drivingForceVecX,drivingForceVecY,{stroke:'black',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true}); p2.text('Lateral', lateralForceVecX, lateralForceVecY+.3, { size: 12, anchor: 'start', baseline: 'middle', weight: vecFontWeight}); p2.arrow(0,0,lateralForceVecX,lateralForceVecY,{stroke:'black',width:'3',interactive:false,uiDisableMove:true,uiDisableP1:true}); p2.text('total force', Lx+Dx,Ly+Dy+.3, { size: 12, anchor: 'middle', baseline: 'middle', weight: vecFontWeight}); p2.arrow(0,0,Lx+Dx,Ly+Dy,{stroke:'black', width: '3', interactive:false,uiDisableMove:true,uiDisableP1:true}); // p2.arrow(0,0,drivingForceVecX+lateralForceVecX,drivingForceVecY+lateralForceVecY,{stroke:'blue', width: '1', interactive:false,uiDisableMove:true,uiDisableP1:true}); p2.line_segment(Lx,Ly, Lx+Dx,Ly+Dy, {width:1, dash:'2.2'}) p2.line_segment(Dx,Dy, Lx+Dx,Ly+Dy, {width:1, dash:'2.2'}) p2.line_segment(drivingForceVecX,drivingForceVecY, Lx+Dx,Ly+Dy, {width:1, dash:'2.2'}) p2.line_segment(lateralForceVecX,lateralForceVecY, Lx+Dx,Ly+Dy, {width:1, dash:'2.2'}) return p2.node }31:[] 2e:{"title":"Forces on sails","cells":[{"id":0,"value":"md`# Forces on sails\n- Interactive visualization of ${html`\n\n\nForces on sails `}\n\n- play with ***Attack Angle*** and ***Angle of boat heading*** to see how lift and drag are applied on sail\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof attackAngle = Inputs.range([10, 120], {label: \"Attack Angle\", step: 1, value: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof boatHeading = Inputs.range([0, 180], {label: \"Angle of boat heading\", step: 1, value: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"md`## variable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"Lx = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"Ly = liftSclr","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"Dx = dragSclr","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"Dy = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"attackAngleRad = attackAngle * Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"Mx = Math.cos(Math.PI - attackAngleRad) - .5","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"My = Math.sin(Math.PI - attackAngleRad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"Sx = 2 * Math.cos(-attackAngleRad) - .5","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"Sy = 2 * Math.sin(-attackAngleRad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"bowX = Math.cos(boatHeadingRad) / 2 - .5","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"bowY = Math.sin(boatHeadingRad)/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"sternX = Math.cos(boatHeadingRad - Math.PI) - .5","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"sternY = Math.sin(boatHeadingRad - Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"totalForce = liftSclr + dragSclr","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"liftCoeffi = calcLiftCoeffi(attackAngle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"dragCoeffi = calcDragCoeffi(attackAngle)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"liftSclr = rho * apparentWindSclr * apparentWindSclr * area * liftCoeffi / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"dragSclr = rho * apparentWindSclr * apparentWindSclr * area * dragCoeffi / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"boatHeadingRad = Math.PI * boatHeading / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"drivingForceSclr = Dx * Math.cos(boatHeadingRad) + Ly * Math.sin(boatHeadingRad) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"lateralForceSclr = - Ly * Math.cos(boatHeadingRad) + Dx * Math.sin(boatHeadingRad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"drivingForceVecX = drivingForceSclr * Math.cos(boatHeadingRad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"drivingForceVecY = drivingForceSclr * Math.sin(boatHeadingRad)","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"lateralForceVecX = lateralForceSclr * Math.cos(boatHeadingRad-Math.PI/2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"lateralForceVecY = lateralForceSclr * Math.sin(boatHeadingRad-Math.PI/2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof rho = Inputs.range([1,5], {label: 'rho', step: 1, value:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof area = Inputs.range([1,5], {label: 'area', step: 1, value:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof apparentWindSclr = Inputs.range([1, 5], {label: 'apparent wind velocity', step: 1, value:3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"function calcLiftCoeffi(attackAngle){\n if (attackAngle <= 8.75){return 0;}\n else if(attackAngle <= 15){return .16 * attackAngle - 1.4;} // (10, .2), (15, 1.) \n else if (attackAngle <= 18){return .1 * attackAngle - .5;} // (15, 1.), (18, 1.3)\n else if (attackAngle <= 28){return .02 * attackAngle + .94;} // (18, 1.3), (28, 1.5)\n else if (attackAngle <= 32){return 1.5;} // (28, 1.5), (32, 1.5)\n else if (attackAngle <= 42){return -.01 * attackAngle + 1.82;} // (32, 1.5), (42, 1.4)\n else if (attackAngle <= 48){return -attackAngle/60 +2.1;} // (42, 1.4), (48, 1.3)\n else if (attackAngle <= 58){return -.04 * attackAngle + 3.22;} // (48, 1.3), (58, .9)\n else if (attackAngle <= 62){return -attackAngle/40 + 2.35;} // (58, .9), (62, .8)\n else if (attackAngle <= 72){return -.02 * attackAngle + 2.04;} // (62, .8), (72, .6)\n else if (attackAngle <= 80){return -attackAngle/40 + 2.4;} // (72, .6), (80, .4)\n else if (attackAngle <= 120){return -.01 * attackAngle + 1.2;} // (80, .4), (90, .3)\n else{return 0;}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"function calcDragCoeffi(attackAngle){\n let base1 = Math.pow(1.05, 1/10)\n let base2 = Math.pow(1.7, 1/50)\n if (attackAngle <= 8.75){return 0.144;}\n else if (attackAngle <= 50){return base1 ** attackAngle - .9;}\n else if (attackAngle <= 100){return base2 ** attackAngle - 1.33;}\n else{return 1.56;}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"function totalForceFunc(a){\n return [rho * apparentWindSclr * apparentWindSclr * area * calcDragCoeffi(a) / 2, rho * apparentWindSclr * apparentWindSclr * area * calcLiftCoeffi(a) / 2]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`## import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"import { plotter } from '@kjerandp/plotter'","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(\n () => window['MathJax']\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}