1. 復習：３種類の図形を円形に並べる

今回は以下のプログラムを修正して使用します。

osg-simple-script-demo2-2024-05-14--15 20.study.json

Zip

osg-simple-script-demo2-2024-05-14--15 20.study.json.zip

上記の方法で保存できない場合のヒント

デモのプログラムがダウンロードできない

Scripts 部分は以下のようになっています。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;
var rand_loc = this.random.shuffle([0,1,2,3,4,5,6,7]);

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  for(i=0; i<8; i++){
    xloc = Math.cos(angle[rand_loc[i]]*(Math.PI/180))*radius; // x座標
    yloc = Math.sin(angle[rand_loc[i]]*(Math.PI/180))*radius; // y座標
    
    if(i==0){
      yu_strokeRect(ctx, xloc, yloc)
    }else if(i==1){
      yu_arc_red(ctx, xloc, yloc)
    }else{
      yu_arc(ctx, xloc, yloc)
    }
  }
}

// 以下に関数化-------------------------------
// ひし形
function yu_strokeRect(ctx, xloc, yloc){
      ctx.save();// この状態の設定を保存
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 回転させる
      ctx.translate(xloc, yloc); //座標を各図形の中心に移動
      ctx.rotate(Math.PI / 180 * 45); //45度回転
      ctx.translate(-xloc, -yloc); //座標を元に戻す
      // 四角形を描画
      ctx.strokeRect(xloc-50,yloc-50,100,100)
      ctx.stroke();
      ctx.restore();// 設定を戻す 
}
// 円
function yu_arc(ctx, xloc, yloc){
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(xloc,yloc,50,0,2 * Math.PI)
      ctx.stroke();  
}
// 赤い円
function yu_arc_red(ctx, xloc, yloc){
      // 色と線の幅を指定
      ctx.strokeStyle = "red";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(xloc,yloc,50,0,2 * Math.PI)
      ctx.stroke();  
}

以下のような図形の中に回転させた線分を表示します。

2. 図形内に直線を描画する

図形内に直線を描画します。直線は，「fllRect」コマンドを使います。

「yu_fillLine」という関数を新しく作り，その関数内で塗りつぶした長方形を描画します。

長方形の色は「黒」，大きさは縦50px，横5pxにします。