Last updated: 2015 -2014. Kajiyama                    [ 目次に戻る ]

詩文をキャンバスに表示する 



Processingリファレンス - テキスト変数・テキスト描画・フォント

  1. キャンバスの2次元座標系

    ・キャンバスの二次元の表示画面には,

     それぞれのピクセル(画素)の位置にXY座標が与えられている.

    ・この座標系は,算数や数学で習ったものとは,

     Y軸の向きが違うので,注意が必要である.


    ・文字の左下の位置が,座標で指定した位置にくる.


  2. text( )で画面に座標を指定して一行ずつ文章を描く

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //text()で日本語文章を描く
    
    void setup() {
      // キャンバス(実行画面)の設定
      size(500, 500); // キャンバスの大きさ
      background(255);// キャンバスの背景色 白
    
      // 日本語フォントを選択指定する呪文
      PFont font = createFont("MS Gothic",48,true);
      textFont(font);// 選択したフォントを使用する
      textSize(24);  // フォントの表示サイズ
      fill(255,0,0);// フォントの色 赤
    }
    
    void draw() {
      //文章を描く
      text("「空に真赤な」 北原白秋 邪宗門",50,30);
      text("",50,60);
      text("空に真赤な雲のいろ。",50,90);
      text("玻璃に真赤な酒の色。",50,120);
      text("なんでこの身が悲しかろ。",50,150);
      text("空に真赤な雲のいろ。",50,180);
    
    //save("text_01a.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果



  3. テキストを文字列としてString型の変数で扱う

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //文章をString変数で扱う
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(1500, 300); //キャンバスの大きさ
      background(255);//キャンバスの背景色 白
      // 日本語フォントを選択指定する呪文
      PFont font = createFont("MS Gothic",48,true);
      textFont(font);  //選択したフォントを使用する
      textSize(24);    //フォントの表示サイズ
      fill(255,0,0);// フォントの色 赤
    }
    
    //文章をString変数に入れる
    String hakushu01 = "「空に真赤な」 北原白秋 邪宗門  空に真赤な雲のいろ。玻璃に真赤な酒の色。なんでこの身が悲しかろ。空に真赤な雲のいろ。";
    
    void draw() {
      text(hakushu01, 50, 50);//文章を描く
    
    //save("text_01b.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    

    実行結果



  4. 文字列は間に「 " + " 」コードを入れ,「 + " 」の前で改行すれば, 複数行で入力しても,これを1行に解釈してくれる.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //文章をString変数で扱う
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(1500, 300); //キャンバスの大きさ
      background(255);//キャンバスの背景色 白
      // 日本語フォントを選択指定する呪文
      PFont font = createFont("MS Gothic",48,true);
      textFont(font);  //選択したフォントを使用する
      textSize(24);    //フォントの表示サイズ
      fill(255,0,0);// フォントの色 赤
    }
    
    //文章をString変数に入れる
    String hakushu01 = "「空に真赤な」 北原白秋 邪宗門  空に真赤な雲のいろ。"
    + "玻璃に真赤な酒の色。なんでこの身が悲しかろ。空に真赤な雲のいろ。";
    
    void draw() {
      text(hakushu01, 50, 50);//文章を描く
    
    //save("text_01b2.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    

    実行結果




  5. 改行マーク「 \ n 」でテキストを整形する. Windowsではキーボード右上隅の [ (バックスラッシュ) ]で表示される.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //文章を改行マーク「\n」で整形する
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //キャンバスの大きさ
      background(255);//キャンバスの背景色 白
      // 日本語フォントを選択指定する呪文
      PFont font = createFont("MS Gothic",48,true);
      textFont(font);  //選択したフォントを使用する
      textSize(24);    //フォントの表示サイズ
      fill(255,0,0);// フォントの色 赤
    }
    
    //文章をString変数に入れる
    String hakushu01 = "「空に真赤な」 北原白秋 邪宗"
    +"門\n\n空に真赤な雲のいろ。\n玻璃に真赤な酒の色。"
    +"\nなんでこの身が悲しかろ。\n空に真赤な雲のいろ。";
    
    void draw() {
      text(hakushu01, 50, 50);//文章を描く
    
    //save("text_01c.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果

[ 目次に戻る ]