GHA
Well-Known Member
This is very much me just playing around to see what javascript /Raphael graphics library can do, but I thought it might be worth sharing.
The black rectangle is a boat, drag it around, the straight line should be a catenary in real life.
http://www.moondogmoving.co.uk/js/testcat.html?
The force at the top should be the force required to just lift all the chain off the seabed, other bits hopefully self explanatory.
Calculated by force =chainweight (kg per metre) X chain length squared / 2 x depth
Look right to anyone who actually does know what they're talking about
Lots more buttons and a grid might help, but on just a tablet with no keyboard it's a bit slow...
Bit reluctant to share the code as it's such a mess....
Oh why not
The black rectangle is a boat, drag it around, the straight line should be a catenary in real life.
http://www.moondogmoving.co.uk/js/testcat.html?
The force at the top should be the force required to just lift all the chain off the seabed, other bits hopefully self explanatory.
Calculated by force =chainweight (kg per metre) X chain length squared / 2 x depth
Look right to anyone who actually does know what they're talking about
Lots more buttons and a grid might help, but on just a tablet with no keyboard it's a bit slow...
Bit reluctant to share the code as it's such a mess....
Oh why not
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>horizontal force </title>
<script type="text/javascript" src="raphael-min.js"></script>
</head>
<body>
<div id="my-canvas" class="canvas"></div>
<form name="example">
<input type="radio" name="test">
</form>
<script type="text/javascript">
Raphael('my-canvas', 800, 400, function() {
var paper = this;
var border= paper.rect(0,100,800,300);
var square = paper.rect(300, 200, 100, 30).attr('fill', '#000');
square.data('chain_length', 50);
square.data('chain_weight', 2);
square.data('water_depth',10);
var force=square.data('chain_weight') *square.data('chain_length') * square.data('chain_length') /(2*square.data('water_depth') );
var text_length = paper.text(100,55,'length of chain=' + square.data('chain_length')+'m');
var text_force= paper.text(100,10,force +'Kg');
var text_depth= paper.text(100,30,'Depth of water ='+square.data('water_depth'));
var chain= paper.path();
var text_weight= paper.text(200,30,'chainweight='+square.data('chain_weight'));
var scope
update();
function update(){
force=(square.data('chain_weight') *square.data('chain_length') * square.data('chain_length')) /(2*square.data('water_depth') );
text_length.remove();
scope=Math.round(square.data('chain_length')/square.data('water_depth')*10)/10;
text_length = paper.text(100,55,'length of chain=' + square.data('chain_length')+'m'+' 1:'+ scope);
text_force.remove();
text_force= paper.text(100,10,'Force ='+Math.round(force) +'Kg');
text_depth.remove();
text_depth= paper.text(100,30,'Depth of water ='+square.data('water_depth'));
text_weight.remove();
text_weight= paper.text(200,30,'chainweight='+square.data('chain_weight'));
//document.example.test
}
var startX, startY;
function onstart() {
startX = this.attr('x');
startY = this.attr('y');
this.attr('fill', 'pink'); }
function onend() {
this.attr('fill', '#000');
chain.animate({
path: [
'M', 0, 400,
'L', xx, yy
]
}, 500, 'bounce');
update ();
// input.force
// square.data('chain_length', 6);
}
function onmove(dx, dy) {
if (startX + dx <700 && startX +dx >=0 && startY +dy >99 && startY + dy <385)
{
this.attr({
x: startX + dx,
y: startY + dy});
square.data('chain_length', Math.round(Math.sqrt((startX+dx)*(startX+dx)+(400-(startY+dy+15) )*(400-(startY+dy+15) )) /10)) ;
square.data('water_depth', (400-(startY + dy+15) ) /10);
xx= startX + dx
yy=startY + dy+15
// update();
}
}
square.drag(onmove, onstart, onend);
});
</script>
</body>
</html>
Last edited:
