どんな理由があって分散したのか

Question

下記のソースは、canvasのパーティクルを動かすソースです。

処理をdrawにぶちこんだもの

//①canvas要素の取得
var canvas = document.getElementById("canvas");

//②canvas要素から描画コンテキストの取得
var ctx = canvas.getContext("2d");

window.requestAnimationFrame =
    window.requestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(cb) {setTimeout(cb,17);};

var x =5;
var y =5;

//1.図形を描画する。(描画サイクルの開始)
draw();

function draw() {
	//2.一度図形を消去する
	ctx.clearRect(0,0,500,500);
	
	//3.位置をずらす
	x +=5;
	y +=5;

	//.4再度図形を描画する。
	
	//パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。
    ctx.beginPath();

    //塗りつぶす色を指定。
    ctx.fillStyle =　"#99ff66";//緑色

    //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。
    ctx.rect(this.x,this.y,10,20);//rectは、rectangel(長方形、矩形)の略である。

    //fillで長方形を塗りつぶす。何も指定しないと黒色となる。
    ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();
	
	//5.一定時間を置く
	requestAnimationFrame(render);
}

処理をいくつかの関数に分けたもの

//①canvas要素の取得
var canvas = document.getElementById("canvas");

//②canvas要素から描画コンテキストの取得
var ctx = canvas.getContext("2d");

window.requestAnimationFrame =
    window.requestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(cb) {setTimeout(cb,17);};

var x =5;
var y =5;

//1.図形を描画する。(描画サイクルの開始)
render();

function render() {
	//2.一度図形を消去する
	ctx.clearRect(0,0,500,500);
	
	updatePosition();
	draw(x.y);
	
	//5.一定時間を置く
	requestAnimationFrame(render);
}
function updatePosition() {
	//3.位置をずらす
	x +=5;
	y +=5;
}
function draw(posx,posy) {
	//.4再度図形を描画する。
	
	//パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。
    ctx.beginPath();

    //塗りつぶす色を指定。
    ctx.fillStyle =　"#99ff66";//緑色

    //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。
    ctx.rect(this.x,this.y,10,20);//rectは、rectangel(長方形、矩形)の略である。

    //fillで長方形を塗りつぶす。何も指定しないと黒色となる。
    ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。

    //最後にbeginPathで開始したパスを閉じる。
    ctx.closePath();
}

drawにぶちこんだ処理をわけるさい、描画する位置をずらす処理をupdatePositionに、描画する処理をdraw、それらをまとめたもの？をrenderに分けましたが、なぜこのような分け方になったのでしょうか。
またこのようにわけるとブレイクスルーjavascriptの72頁によれば再利用性(使いまわしやすさ？)が向上するそうですが、なぜ分けると向上するのでしょうか。

Answer 1

GameEngineの一つであるUnityでは
https://docs.unity3d.com/ja/current/Manual/ExecutionOrder.html
こんな感じに分かれてます。

歴史的な経緯はわからないので例をあげます

3次元空間に立方体が２つあったとして、描画する順は基本的に奥にある方から書くとうまく描画できますが、
そのためには位置が決まってからじゃないと判断できないので、update関数で位置を決め、draw関数で決まった位置をもとに描画順を決めていくって決めておけば間違いないよねっていう感じですね。
(Zバッファとかでそんなルールなくてもいいとかはありますが、それは今回はないものとして)

また、updateを2回呼び出してからdrawを呼ぶだけで倍速になったりしたりして便利です

ハード的にも例はあるんですが、これに関しては難しいので割愛