学習教材・研究資料

投稿日:

2023ウェブデザイン第３回

文字の表示について

前回までに作成したファイル「index.html」と「style.css」を，メモ帳で開きます。

ソースコード01_01

ファイル名：「index.html」

<!DOCTYPE html>
<html lang="ja">

<!-- ここからhead -->
<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトルを記述しましょう</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>
<!-- サイトの見出しとその説明 -->
<h1>サイトの見出し</h1>
<p>本文を記述します。</p>
<!-- addressには制作者の情報を入れる -->
<address>制作者：自分の名前（愛知淑徳大学創造表現学部メディアプロデュース専攻）</address>

</body>
<!-- bodyここまで -->
</html>

ソースコード01_02

ファイル名：「style.css」

@charset "utf-8";

/* ここからスタイルをはじめます */

body {
color: #444444;
}

h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

address {
font-size: 14px;
font-style: normal;
}

文字の表示変更
スタイルシート内の、文字の表示に関わる以下の設定を変更して文字の表示を変更してみましょう。

①文字のサイズ
font-size: 数値px;
サイズの値はピクセルです。数値を変えてサイズを変更してみましょう。

②文字の書体
font-family: font-familyの種類;
文字の書体を他の種類に変更してみましょう。
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

③文字の太さ
font-weight: font-weightの種類;
文字の太さを他の種類に変更してみましょう。
【font-weightの種類】※コンピュータ環境によって反映されない場合があります。
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

④文字のスタイル
font-style: font-styleの種類;
【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示

⑤文字の行間隔
line-height: 数値;
文字の行間隔を、数値を変えて変更してみましょう。

リンクの設定
リンク（クリックすると他のページに移動する）を作成します。

<a href="リンク先のページ.html">リンクを設定したい文字列</a>

上のように記述することで，そのリンクをクリックしたときにどのウェブページを表示するのかを指定します。

記載例）

<a href="about.html">このサイトについて</a>

リストの設定
今回のウェブサイトでは，リンクをリスト形式で記述し、リンクを４つ用意することにします。
リスト形式にしたい部分は以下のタグで囲みます。

<ul>〜</ul>

リストのひとつひとつの要素は以下のタグで囲みます。

<li>〜</li>

リスト形式の記述例は以下のようになります。

<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>

リンク先のウェブページを作成する
「index.html」をフォルダ内で複製します。複製して増やした方のファイルを，「about.html」というファイル名に変更します。
※名前を付けて保存しなおす場合は，文字コードの指定（「UTF-8」）を忘れないようにしましょう。

リンクの記述
以下のようにソースコード内にメニュー（リンク）のリストを挿入しましょう。

ソースコード02_01

ファイル名：「index.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>説明文</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ１</a></li>
<li><a href="class.html">コンテンツ２</a></li>
</ul>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>

</body>
<!-- bodyここまで -->

</html>

ソースコード02_02

ファイル名：「about.html」　※「index.html」を複製し，必要な部分だけ書き換えます。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトル</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>

<!-- サイトの見出しとその説明 -->
<h1>見出し</h1>
<p>解説</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ１</a></li>
<li><a href="class.html">コンテンツ２</a></li>
</ul>

<h2>中見出し</h2>
<p>説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<h3>小見出し</h3>
<p>説明<br>
説明</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>
</body>
<!-- bodyここまで -->

</html>

完成したら、リンクを設定した文字列をクリックして動作を確認してみましょう。

投稿日:

2023プログラミング準備編２:マテリアル設定とレンダリング

マテリアルの設定

3CCGで制作するオブジェクトの表面にマテリアルの設定を施すことで、よりリアルな表現が可能になります。

Blenderでは、以下の手順でオブジェクトにマテリアルを設定します。

1. シェーディングのモードを切り替える

3Dビューの右上にある、シェーディングモードの選択ボタンから、マテリアルプレビューモードのボタンをクリックしてシェーディングモードを切り替えます。

2. マテリアルプロパティの設定

プロパティからマテリアルプロパティを選択し、「新規」ボタンをクリックする。新しく作成された「マテリアル」の名称を変更する。（マテリアルと表記された箇所をダブルクリックする。）
マテリアルに各種設定を施す。

・ベースカラー
基本となる色のこと。
・メタリック
金属の性質を示す数値です。値が1に近いほど金属質になり、0に近いほど非金属質となります。
・スペキュラー
鏡面反射の度合いを示す数値です。値が1に近いほどハイライトが強くなり、0に近いほどハイライトが弱くなります。
・粗さ
表面の荒さを示す数値です。1に近いほど粗く、0だと平滑となり周囲の景色が強く映り込みます。
・伝播
透明度を示す数値です。1に近いほど透明度が高く、0は不透明となります。
・IOR
光の屈折率を示す数値です。伝播が0で不透明なオブジェクトには効果が表れません。

反射などのマテリアル属性を確認するには、レンダープロパティを選択し、スクリーンスペース反射にチェックを入れます。

作成したマテリアルを複数のオブジェクトに適用するには、アウトライナーから、対象とするマテリアルを選んで、３Dビューワー上のオブジェクトにドラッグ・アンド・ドロップして設定する。

カメラとライトの設定

1. 3Dビューの右上にある、シェーディングモードの選択ボタンから、レンダープレビューモードのボタンをクリックしてシェーディングモードを切り替えます。

2. アウトライナーからライト（Light）を選択し、適切な位置に配置します。

3. ナビゲートメニューからカメラをクリックしてカメラビューに切り替えます。

3Dビューの右端の三角ボタンをクリックするか、キーボードのNボタンを押してサイドメニューを呼び出し、ビューを選択しビューのロックから、カメラをビューにロックする項目にチェックを入れておきます。

カメラに対象のオブジェクトが適切に配置されるようにレイアウトします。

レンダリング

レンダリング（Rendering）とは、各種設定によって完成した３次元立体空間の画像または映像を出力することです。コンピューターの処理能力にもよりますが、レンダリングには非常に多くの処理時間が必要です。

トップバーのレンダーメニューから画像をレンダリングを選択すると、レンダリングが開始されます。

レンダリングが完成するとビューワーが開き、レンダリング後の画像が表示されます。ビューワーの画像メニューから、名前を付けて保存を選択すると、保存の設定画面が開きます。ファイルフォーマットから適切な画像データ形式を選択し、ファイル名を付けて保存先を指定して保存します。

データのエクスポート

Blenderで作成した3DCGモデルをUnityで使用できるように書き出してみましょう。トップバーのメニューから、ファイル＞エクスポート>FBXを選択します。（FBXはファイル形式の名称です。）
ファイルビューウィンドウが開くので、保存場所を指定し、ファイル名を指定し（XXX.fbxのXXXの部分を任意の名称にする）、オブジェクトタイプから、カメラとランプ以外の項目を選択して、エクスポートボタンをクリックします。

保存されたFBX形式のデータ（XXX.fbx）を、UnityのProjectウィンドウにドラッグ&ドロップすることで、Unityで使用できるようになります。

練習課題

Blenderで作成した動物モデルをレンダリングし、画像として出力して
提出してください。
・PNGデータで提出すること。
・提出場所：CS レポート掲示板　
  プログラミングI「動物モデルのレンダリング画像提出」スレッド
・締切：10月11日（水）まで
投稿日:

2023ウェブデザイン第２回

おさらい
前回の授業では、かんたんなソースコードを自分で書いてコンピュータ上に保存し，それをWebブラウザで開いて，Webページとして表示しました。ここまでの作業手順をもう一度、確認しておきましょう。

作業手順
① PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を，自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Internet Explorer」を選択する。
⑧ Internet Explorer（Webブラウザ）が起動し，今作成したファイルがウェブページとして表示されれば成功です。

ソースコード01

ファイル名：「学籍番号.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>

<body>
こんにちは！
</body>
</html>

 

ウェブサイトの制作
ソースコードを元に，新しい行を追加していきます。

作業手順
① 作成したファイル「学籍番号.html」を複製して，別のファイルをつくる。複製したファイルの名称を，「index.html」に変更する。
② 「index.html」を，メモ帳で開く。
③ どの行になにが書いてあるのかを自分で覚えておくために，コメントを記入する。
・タグの構造やページ構成をわかりやすくするため，ソースコードの中に覚え書きとして書いておくテキストを，「コメント」と呼んでいます。
・HTMLファイルにコメントを記入するときは， <!– と –> で囲います。
・<!– と –> で囲われた中身は，ブラウザで開いたときには表示されません。
④ 新しく制作するWebページの見出しと本文を記入する。
・ここでは，<h1> 〜 </h1>，<p> 〜 </p>というタグで中身を区切ります。
・このタグは，後で文字のサイズなどを指定するときに，目印として必要になります。
⑤ このWebページの制作者の情報を，ページの末尾に記入する。
・制作者情報は，<address> 〜 </address>というタグで区切るという決まりがあります。

ソースコード02_01

ファイル名：「index.html」

<!DOCTYPE html>
<html lang="ja">

<!-- ここからhead -->
<head>
<meta charset="UTF-8">

<!-- ページのタイトルをここに入れる -->
<title>タイトルを記述しましょう</title>

<!-- スタイルシートの場所を指定している -->
<link rel="stylesheet" href="style.css" type="text/css">

</head>
<!-- headここまで -->

<!-- ここからbody -->
<body>
<!-- サイトの見出しとその説明 -->
<h1>サイトの見出し</h1>
<p>本文を記述します。</p>
<!-- addressには制作者の情報を入れる -->
<address>制作者：自分の名前（愛知淑徳大学創造表現学部メディアプロデュース専攻）</address>

</body>
<!-- bodyここまで -->
</html>

⑥ 文字の大きさや色を指定するため，スタイルシートを作成し，HTMLファイルを関連づける。
・メモ帳で新規ファイルを作成し，そのファイルの中にスタイルを記述します。
・スタイルシートには，「style.css」というファイル名をつけて，「index.html」と同じフォルダに入れておきます。
・「index.html」のファイルとスタイルシート「style.css」を関連づけるためには，<link>というタグを<head>の中に記入します。
⑦ 作成したスタイルシートの中に，スタイルを書き込む。
・スタイルは，CSSというスタイル言語を使って指定します。
・スタイルシートでの色の指定は，「#○○○○○○」という英数字でおこないます。この英数字は，RGBの数値を16進数であらわしたものです。
・「#000000」は，赤・緑・青すべてが0（点灯しない）なので，画面の表示色は黒になります。「#ffffff」は，赤・緑・青すべてがf（もっとも明るい）なので，画面の表示色は白になります。
・どのような色になるのかを調べたい場合は，http://www.colordic.org/ などを参照。

ソースコード02_02

ファイル名：「style.css」

@charset "utf-8";

/* ここからスタイルをはじめます */

body {
color: #444444;
}

h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

address {
font-size: 14px;
font-style: normal;
}

【font-weightの種類】
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く

【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示

⑧ 以上の変更が反映されているかどうか，Webブラウザで開いて確認する。

投稿日:

2023ウェブデザイン第１回

このWEBページは、愛知淑徳大学創造表現学部メディアプロデュース専攻　ウェブデザイン第１回の授業資料になります。
この授業では、HTMLやCSSといった、基本的な言語＝コードを用いてウェブデザインの制作を進めていきます。
各自でテーマを選定し、調査や素材集めを進めたうえで、ウェブデザインのレイアウトを進め、HTMLとCSSを用いてコーディングを進めて完成させます。

完成したウェブサイトは、授業内でプレゼンテーションしてもらいます。

授業計画
第1回  ガイダンス、HTMLとは、ソースコードの記述
第2回  HTMLとCSSの基礎１：タグとは、CSSとは
第3回  HTMLとCSSの基礎２：スタイルの定義
第4回  HTMLとCSSの基礎３：リンクとナビゲーション
第5回  HTMLとCSSの基礎４：スタイルの調整
第6回  HTMLとCSSの基礎５：画像の配置、リストとテーブル
第7回  企画書作成
第8回〜第13回　課題制作
第14回・第15回　講評会

課題と評価
第１課題　練習用WEBページの制作：20％
企画書　独自制作のWEBページのための企画・計画：10％
第２課題　企画を元にしたWEBページの制作：30％
講評会*: 発表30％＋相互評価10%

*講評会は定期試験に準ずる扱いとします。

ソースコードの記述
かんたんなソースコードを自分で書いてコンピュータ上に保存し，それをWebブラウザで開いて，Webページとして表示されるかどうかを試します。

作業手順
① PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を，自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Google Chrome」などWebブラウザを選択する。
⑧ Google ChromeなどWebブラウザが起動し，今作成したファイルがウェブページとして表示されれば成功です。

ソースコード01

ファイル名：「学籍番号.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
</head>

<body>
こんにちは！
</body>
</html>

練習課題

ソースコードが完成したら、bodyタグで囲まれた箇所<body>〜</body>に、
文章を加えてみましょう。

加える文章：本授業への抱負
投稿日:

2021プログラミング７：乱数とジェネラティブな表現

生成される予測できない数列の要素を乱数と呼びます。Processingではrandom()関数を使って乱数を擬似的に生成することができます。

ランダムな線の描画
random()関数は呼び出すたびに異なる数値を返します。パラメータで値の上限あるいは値の範囲を指定することができます。たとえばrandom(10)とすると、0以上、10未満の乱数が生成されます。生成される数値は浮動小数点になるため、変数は float型を使います。
それでは、乱数を使って線を描画してみましょう。線の配色も乱数で生成しています。

function setup(){
   createCanvas(400, 400);
   background(255);
}

function draw(){
  for(let i = 0; i < 100; i++){
    stroke(random(255), random(255), random(255));
    line(random(width), random(height), random(width), random(height));
  }
}

ランダムな円の描画
次に円を乱数を使って描画してみましょう。

let speed = 5;
let x = 200;
let y = 200;

function setup(){
   createCanvas(400, 400);
   background(255);
}

function draw(){
    x += random(-speed, speed);
    y += random(-speed, speed);
    noStroke();
    fill(random(255), random(255), random(255));
    ellipse(x, y, 100, 100);
}

これらのグラフィックは、コードが実行されるたびに、その実行結果が異なることに気がついたでしょうか。
コードに規則を与えることで、予測は可能だが確定的ではないグラフィックスなどを生成することができます。

ジェネラティブなグラフィック表現
ここからは、参考書籍「ジェネラティブ・アート　Processingによる実践ガイド　マット・ピアソン著」を参考にジェネラティブ（生成的）なグラフィック表現に挑戦してみましょう。

円の描画
まずは、これまでどうりの方法で円を描いてみましょう。

let radius = 200;
let centerx = 400;
let centery = 400;

function setup(){
  createCanvas(800,800);
  background(255);
  strokeWeight(2);
  smooth();
}

function draw(){
  stroke(200, 200, 200);
  noFill();
  ellipse(centerx, centery, radius*2, radius*2);
}

円を描画する別の方法
次に三角関数を用いて点で円を描いてみましょう。

let radius = 200;
let centerx = 400;
let centery = 400;
let x, y;
let lastx = -999;
let lasty = -999;
let ang;
let rad; 

function setup(){
  createCanvas(800,800);
  background(255);
  strokeWeight(2);
  smooth();
}

function draw(){
  stroke(0, 0, 0);
  for(ang = 0; ang <= 360; ang += 2){
    rad = radians(ang);
    x = centerx + (radius * cos(rad));
    y = centery + (radius * sin(rad));
    point(x,y);
  }
}

円かららせんを描画する
円のコードをもとにして、らせんを描いてみましょう。

let radius = 10;
let centerx = 400;
let centery = 400;
let x, y;
let lastx = -999;
let lasty = -999;
let ang;
let rad; 

function setup(){
  createCanvas(800,800);
  background(255);
  strokeWeight(2);
  smooth();
}

function draw(){
  stroke(0, 0, 0);
  for(ang = 0; ang <= 1440; ang += 2){
    radius += 0.5;
    rad = radians(ang);
    x = centerx + (radius * cos(rad));
    y = centery + (radius * sin(rad));
    point(x,y);
  }
}

らせんを線で描画する
らせんを点ではなく線で描きましょう。

let radius = 10;
let centerx = 400;
let centery = 400;
let x, y;
let lastx = -999;
let lasty = -999;
let ang;
let rad; 

function setup(){
  createCanvas(800,800);
  background(255);
  strokeWeight(0.5);
  smooth();
}

function draw(){
  stroke(0, 0, 0);
  for(ang = 0; ang <= 1440; ang += 2){ radius += 0.5; rad = radians(ang); x = centerx + (radius * cos(rad)); y = centery + (radius * sin(rad)); if(lastx > -999){
      line(x, y, lastx, lasty);
    }
    lastx = x;
    lasty = y;
    lasty = y;
  }
}

らせんの線にノイズを加える
線にノイズを加えることで手書きの描線のようなゆらぎが現れます。

let radius = 10;
let centerx = 400;
let centery = 400;
let x, y;
let lastx = -999;
let lasty = -999;
let ang;
let rad; 
let radiusNoise;
let thisRadius;

function setup(){
  createCanvas(800,800);
  background(255);
  strokeWeight(0.5);
  smooth();
}

function draw(){
  stroke(0, 0, 0);
  radiusNoise = random(10);
  for(ang = 0; ang <= 1440; ang += 5){ radiusNoise += 0.05; radius += 0.5; thisRadius = radius + (noise(radiusNoise) * 200)-100; rad = radians(ang); x = centerx + (thisRadius * cos(rad)); y = centery + (thisRadius * sin(rad)); if(lastx > -999){
      line(x, y, lastx, lasty);
    }
    lastx = x;
    lasty = y;
  }
}

らせんに乱数を加え複数重ねて描画する
らせんの描線に乱数を加えながら複数のらせんを重ねて描いてみましょう。

let radius;
let centerx = 400;
let centery = 400;
let x, y;
let lastx;
let lasty;
let ang;
let rad; 
let radiusNoise;
let thisRadius;
let startangle;
let endangle;
let anglestep;

function setup(){
  createCanvas(800,800);
  background(255);
  strokeWeight(0.5);
  smooth();
}

function draw(){
  for(let i = 0; i < 100; i++){
    lastx=-999;
    lasty=-999;
    radius = 10;
    stroke(random(255), random(255), random(255),50);
    startangle = int(random(360));
    endangle = 1440 + int(random(1440));
    anglestep = 5 + int(random(3));
    radiusNoise = random(10);
    for(ang = startangle; ang <= endangle; ang += anglestep){ radiusNoise += 0.05; radius += 0.5; thisRadius = radius + (noise(radiusNoise) * 200)-100; rad = radians(ang); x = centerx + (thisRadius * cos(rad)); y = centery + (thisRadius * sin(rad)); if(lastx > -999){
        line(x, y, lastx, lasty);
      }
      lastx = x;
      lasty = y;
    }
  }
}

 

ジェネラティブ・アート
ジェネラティブ・アートと呼ばれる、数学的な手順（アルゴリズム）によって生成される芸術作品のジャンルが存在します。ジェネラティブ・アートを植物を例に解説していきます。植物は、同じ種類であれば、同じ葉や花のかたちで構成されますが、まったく同じではありません。陽の光や、水、土など生育環境からの要因によって、葉や花の大きさや、角度などが違って成長します。それらは、タネの段階では、どのように育つのかは確定的でなく、植えてから植物が育ってはじめて、その姿形が確認できます。また、常に成長している過程にあるので、その姿形は変化を続けています。このような植物の生育にも似た特徴を持つのが、ジェネラティブ・アートになります。

こうした、生成的な特徴を持つグラフィック作品を制作していきましょう。

課題：
乱数を用いてジェネラティブ・アートの概念をもったグラフィック作品を５点作成する。

ヒント：
繰り返し構文（for文）を使って、一定時間生成をし続けるような作品。
マウスボタンのクリックごとに新たな形態を生成させる作品。
音楽の音量にあわせて形態を無限に変化させ続ける作品。
など

締切：２０２２年１月２０日（木）の授業内で作品発表する

課題提出について
コードのシェア機能を使って作成した作品のコードをシェアするリンクをWordにコピーアンドペーストし、
作品のリンク集を作成してください。
授業名、学籍番号、氏名を明記し、各作品ごとにタイトルと２００字程度のコメントを付して、書類を完成させ、
PDF形式に変換してCSのデジタルコンテンツ実習Ⅵ(プログラミング)「プログラミング全課題提出」掲示板に
提出してください。

提出締切：２０２２年１月２７日（木）まで

コードのシェア
作成したコードをシェア（他者と共有）することができます。p5js Editorにログインし、Fileメニューから
Shareを選択すると、コードをシェアするためのウィンドウメニューが表示されます。メニューのEditの欄に
表示されている文字列をコピーしてWordなどにコピーすると、コーディングで作成した作品へのリンクができる
ようになります。
投稿日:

2021プログラミング６：サウンドのビジュアライズ

音量の視覚化（再掲）

サウンドの音量（ボリューム）とグラフィックスを関連づけてみましょう。

let sound, analyzer;

function preload() {
 sound = loadSound('test.mp3');
}

function setup() {
  createCanvas(400, 200);
  analyzer = new p5.Amplitude();
  sound.pause();
  sound.loop();
  analyzer.setInput(sound);
}

function draw() {
    background(0);
    let rms = analyzer.getLevel();
    fill(255,0,0);
    ellipse(width/2, height/2, 10+rms*200, 10+rms*200);
}
総合課題２：
上記のサウンド再生ソフトを改良し独自のデザインにする。
ただし以下の機能は全て必ず実装すること。
画面のサイズや画像の配置は自由とする。
・サウンドデータを３種類以上使用する。
・外部から取得した画像（JPEGデータや、PNGデータ）を１種類以上（背景含む）使用する。
・サウンドの音量で独自に用意した２種類以上の画像を変形させる。
・背景画像を用意し配置する。

課題発表：１２月１６日（木）授業内で発表してもらいます

 

投稿日:

2021プログラミング５：お絵かきアプリのインターフェース

インターフェイスデザイン

インターフェース（interface）とは英語で境界や界面を表す言葉です。この講座では、ユーザーインターフェースと呼ばれる、人間と機械の境界を取り扱います。お絵かきソフトのインターフェースデザインを通して、プログラミングの過程を学んでいきましょう。

まず、はじめに作成するお絵かきソフトの画面サイズを決めます。ここでは400ピクセルx400ピクセルの画面で作成することにします。また背景色を白に設定します。

function setup(){
  createCanvas(400,400);
　background(255);
}

function draw(){
  
}

次に、幅20ピクセル・高さ20ピクセルの黒色の円がマウスの動きに付いてくるようにします。

let penX = 0;//円のX座標
let penY = 0;//円のY座標
let penSize = 20;//円の直径

function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;//円のX座標にマウスのX座標を代入
  penY = mouseY;//円のY座標にマウスのY座標を代入
  fill(0);//円の塗りを黒色にする
  noStroke();//円の輪郭線の描画を無効にする
  ellipse(penX,penY,penSize,penSize);//円の描画
}

円のサイズを変えるためのアイコンを配置します。アイコンが描線で隠れてしまわないようにアイコンの背景として長方形を配置します。

let penX = 0;
let penY = 0;
let penSize = 20;

function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(0);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);//アイコンの背景
  fill(0);
  ellipse(50,350,20,20);//細い描線のアイコン
  ellipse(100,350,40,40);//太い描線のアイコン 
}

アイコンの上にマウスが重なると描線の太さが変わるように設定します。

let penX = 0;
let penY = 0;
let penSize = 20;

function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(0);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40); 
  if(penX<60 && penY>340){ //小さい円のアイコンの座標にマウスが重なった場合
    penSize=20;
  }
  if(penX>60 && penX<120 && penY>340){ //太い円のアイコンの座標にマウスが重なった場合
    penSize=40;
  }
}

同じ手法を使って描線の色を変えてみましょう。

let penX = 0;
let penY = 0;
let penSize = 20;
let penR = 0;//描線の色・赤
let penG = 0;//描線の色・緑
let penB = 0;//描線の色・青


function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(penR,penG,penB);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){ //アイコンに描線が重なったら描線の色を赤色に変更する
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){ //アイコンに描線が重なったら描線の色を緑色に変更する
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){ //アイコンに描線が重なったら描線の色を青色に変更する
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

更に描線をline()関数を使用してスムーズにつなげてみましょう。１フレーム前のX座標、Y座標を格納するpmouseX、pmouseYという変数を使用します。

let penX = 0;
let penY = 0;
let penPX = 0;//pmouseXの値を格納する変数
let penPY = 0;//pmouseYの値を格納する変数
let penSize = 20;
let penR = 0;
let penG = 0;
let penB = 0;


function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX; //１フレーム前のX座標を代入
  penPY = pmouseY; //１フレーム前のY座標を代入
  stroke(penR,penG,penB); //線の色を設定
  strokeWeight(penSize); //線の太さを設定
  line(penX,penY,penPX,penPY); //線を描画
  noStroke(); //以下のオブジェには線を描画しないよう設定
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

次にマウスボタンが押されているときだけ、描線が描画されるように改良しましょう。

let penX = 0;
let penY = 0;
let penPX = 0;
let penPY = 0;
let penSize = 20;
let penR = 0;
let penG = 0;
let penB = 0;


function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mouseIsPressed){ //マウスボタンが押されている間だけコードが実行される
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

最後に、キーボードの特定のボタンを押すと描線がリセットされるようにしましょう。isKeyPressedおよびkeyという関数を用いることで、キーボードが押されているかどうか、また、どのキーが押されているかをif文で判定するコードを書き加えます。以下のコードでは、キーボードのDボタンが押されると、画面をリセット（白色の四角形を最前面に描画）するようにしています。

let penX = 0;
let penY = 0;
let penPX = 0;
let penPY = 0;
let penSize = 20;
let penR = 0;
let penG = 0;
let penB = 0;

function setup(){
  createCanvas(400,400);
  background(255);
}

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mouseIsPressed){
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
  if ((isKeyPressed == true) && ((key == 'd') ||  (key == 'D'))) {
    fill(255);
    noStroke();
    rect(0,0,400,300);
  }
}

課題
上記のお絵かきアプリを改良し独自のインターフェースデザインにリデザインする。 
ただし以下の機能は全て必ず実装すること。画面のサイズやアイコンの配置は自由とする。
・３段階以上の太さの描線で描画できるようにする。
・４色以上の色で描画できるようにする。
・消しゴム機能を追加する。（ヒント：白色の描線を描くことで代用できる）
その他、余裕のある学生は画像をアイコンにして、画像を円の代わりに配置し、
画像で絵を描く機能を実装するなどしても構わない。音声を追加するなどしても良い。

締め切り：
11月25日（木）の授業内で講評会を実施します。
投稿日:

2021ウェブデザイン第６回

企画書制作の準備
ウェブデザインを進めていくための企画書を制作していきます。ワークシートに沿って、企画書を制作していきましょう。
以下にワークシートの制作例を掲載します。

ポイントは、ウェブサイトのテーマにおいて、どのような目的のウェブサイトを構築するのかを明確にしておくことです。
みなさんが扱う、団体・企業・学校・グループ・イベントごとなどのテーマをもとに、どのようなウェブサイトを制作するのか、
制作のテーマを決定しましょう。
また、その際、制作テーマのねらいや、想定する利用者像を明確にしておきましょう。

課題
制作のテーマを１案に絞り込み、ワークシートを参考にウェブサイトの制作テーマに落とし込みましょう。
また、制作テーマのコンセプトと、想定する利用者についてまとめましょう。
まとめ方：
・制作テーマを１００字程度でまとめる。
・制作テーマのコンセプトを２００字程度でまとめる。
・想定する利用者像を具体的に記述する。（年齢、性別、職業、趣味など）
課題提出方法 
CSのレポート掲示板　デジタルコンテンツ実習Ⅴ(ウェブデザイン) 企画書提出スレッドに
PDF形式の文書を提出してください。 
A4サイズ 縦位置・横書き 
提出締切 
１１月１５日（月）まで
投稿日:

2021ウェブデザイン第５回

準備：ファイル「index.html」、「about.html」、「style.css」をメモ帳で開いておく。
解説を参照してソースコードに記述を加える。

解説：
トップページに写真を配置する

1) 画像（＊）を用意して、imagesフォルダに保存しておく。

＊配置する画像は，あらかじめPhotoshopなどを使って最適な大きさにリサイズしておきます。
今回は、画像の幅が400pixcelあれば良いので、その大きさにPhotoshop上で画素数を減らしておきます。
（不必要に大きな画素数のまま表示させると、表示に時間がかかったり、サーバの容量を圧迫することになる）

2)「index.html」トップページの本文の手前に、次の一行を追加します。

<p><img src="images/XXXX.jpg" alt="画像の説明文" width="400" height="267" /></p>

src=”images/XXXX.jpg”の箇所のXXXX.jpgは、自分で用意した画像のファイル名に変更しておく。
alt=”画像の説明文”の箇所は、画像が表示されなかった場合に備えて、画像の説明文を記載しておく。
widthとheightで、それぞれ画像の幅と高さを指定することができる。

3)サイトのタイトルを、文字ではなく画像で表示するように変更する。
「index.html」トップページのタイトルのところを、次にように書き換えます。

<img src="images/title.jpg" alt="タイトルの説明文" width="760" height="260">

4)「about.html」の本文中に、写真を配置する。
「about.html」の２箇所に，次の行を追加します。（追加箇所はソースコードを参照すること）

<img src="images/photo01.jpg" alt="画像の説明文" width="250" height="165" class="photo-r" />

<img src="images/photo02.jpg" alt="画像の説明文" width="250" height="165" class="photo-l" />

5)写真が表示される位置を、「style.css」で指定する。
今回は，写真が本文の右側に表示される箇所（photo-r）と、写真が本文の左側に表示される箇所（photo-l）の
2つのスタイルを、「style.css」の中に書き込みます。

右寄せの写真の配置：

img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

左寄せの写真の配置：

img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

ソースコード
ファイル名：「index.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

（中略）
<!-- サイトの見出しとその説明 -->
<h1>
<img src="images/title.jpg" alt="タイトルの説明文" width="760" height="260">
</h1>
<p>愛知淑徳大学の魅力を紹介します。</p>

<!-- メニューのリスト -->
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="about.html">このページについて</a></li>
<li><a href="campus.html">コンテンツ１</a></li>
<li><a href="class.html">コンテンツ２</a></li>
</ul>

<!-- トップページに写真を配置する -->
<p>
<img src="images/XXXX.jpg" alt="画像の説明文" width="400" height="267" /></p>

<p>本文</p>

<!-- addressには制作者の情報を入れる -->
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>

（後略）

ファイル名：「about.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

（中略）

<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>
<p><img src="images/photo01.jpg" alt="画像の説明文" width="250" height="165" class="photo-r" />
本文<br/ >
本文</p>

<h3>小見出し</h3>
<p><img src="images/photo02.jpg" alt="画像の説明文" width="250" height="165" class="photo-l" />
本文<br/ >
本文<br/ >
本文</p>

<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>

</div>
<!-- div containerここまで -->

</body>
<!-- bodyここまで -->

</html>

ファイル名：「style.css」

@charset "utf-8";

/* ここからスタイルをはじめます */

body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back.png);
}

（中略）

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */
img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

/* 左寄せで配置する画像はclass photo-lにする */
img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

（後略）

表の作成

「index.html」をコピーアンドペーストして、「class.html」と名付けて、「index.html」等と
同じフォルダ内（同じディレクトリ）に置く。

「class.html」内に表示する表を制作する。

HTMLでの表の作成の考え方
HTMLでは，<table>というタグを使って表を作成します。表の行を増やす場合には<tr>〜</tr>を使います。
表の列を増やす場合には，見出しの行には<th>〜</th>を，その他の行のには<td>〜</td>を使います。

今回の例では，3行×2列の表を作成します。
まず、<table>〜</table>と書いてから、その中に<tr>〜</tr>（1行目）のタグを書き、
その中にさらに<th>〜</th>（見出しの列）、<td>〜</td>（見出し以外の列）と中身の列を
書き込んでいくとよいでしょう。

「style.css」を使って、表の線の幅や背景色などの見た目の設定をする。
CSSファイル内に，新たにtable{ }（表全体の見た目の設定）と，th{ }（見出しの列の見た目の設定），td{ }（見出し以外の列の見た目の設定）を書いていきます。

table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;

border-collapse: separate;
}

th {
padding: 8px;
width: 150px;
text-align: left;

vertical-align: top;

background-color: #ffefd5;
border: solid 1px #ffcc66;
}

td {
padding:8px;
border: solid 1px #ffcc66;
}

ソースコード
ファイル名：「class.html」

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

（中略）
<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>

<table summary="表の説明分">
<tr>
<th>表の見出し１</th>
<td>表の本文</td>
</tr>

<tr>
<th>表の見出し２</th>
<td>表の本文</td>
</tr>

<tr>
<th>表の見出し３</th>
<td>表の本文</td>
</tr>
</table>

<p>本文</p>

（後略）

ファイル名：「style.css」

（中略）

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
clear: both;
}

table {
font-size: 14px;
margin-bottom: 20px;
margin-left: 20px;
width: 600px;
border: none;
border-collapse: separate;
}

th {
padding: 8px;
width: 150px;
text-align: left;
vertical-align: top;
background-color: #ffefd5;
border: solid 1px #ffcc66;
}

td {
padding: 8px;
border: solid 1px #ffcc66;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */

（後略）

 

制作するWebページのテーマを考える

次回の授業以降は、各自が独自のテーマを設定し、そのテーマをもとにWebページのデザインを進めていきます。

特定の団体・企業・学校・グループ・イベントなどのテーマをひとつ決めて，それを紹介するためのウェブサイトを制作する。

●制作のテーマについて
団体・企業・学校・グループ・イベントごとなど，なにかひとつのテーマを決めて，それを紹介するためのウェブサイトを制作する。テーマとする団体等は，実在のものでも架空のものでも，どちらでも構わない。
自分のためではなく，他者が見て興味を持つことができるウェブサイトを制作すること。また，どのような人が見るためのウェブサイトであるか，ターゲットを明確にすること。

まずはじめに、制作のテーマについて考えていきましょう。その際、伝えたいメッセージや、ウェブページ制作の素材となる文書や画像などを豊富に集めることができるテーマを選択するのがポイントになります。

課題
制作のテーマを３案考えて、アイディアをまとめてください。
まとめ方：
・３案それぞれのアイディアに、わかりやすいタイトルをつける。
・アイディアごとに２００文字程度の解説をつける。

課題提出方法 
次回、１１月９日（火）の授業でテーマ案をもとに企画書を作成していきます。
投稿日:

2021プログラミング４：外部データの使用

p5jsでは外部のデータを扱うことができます。

画像ファイルの読み込み
まず始めにp5jsで使用したい画像ファイルを用意します。jpeg形式かpng形式の画像を用意しましょう。次にp5jsのエディターを開き、ログインしておきます。p5jsのエディターのスケッチエリアの上部左側の” > “ボタンを押すと、Sketch Filesメニューが表示されます。続けて”▼”ボタンを押すとメニューが表示されるので、Upload Fileを選択し、開いたウィンドウにファイルをドラッグ・アンド・ドロップします。Sketch Filesメニュー欄にアップロードしたファイル名が表示されるので確認しておきましょう。

画像ファイルの表示
アップロードした画像ファイルをp5jsのプログラムで使用してみましょう。画像ファイルは、ここでは仮に test.jpg という名称のJPEGデータとします。

let img;

function preload() {
 img = loadImage('test.jpg');
}

function setup() {
 createCanvas(400, 400);
 background(0);
}

function draw(){
 image(img, 0, 0,400,300);
}

上記のプログラムでは、始めに画像ファイル用の変数を作成し、img と名付けます。次に、preload()関数を設定します。変数　img　にloadImage()関数を使って画像ファイル test.jpg（testは任意の名称を各自で入力してください）を格納します。画像ファイル test.jpg　を格納した変数 img　をimage()関数を使って表示します。

image()関数の各パラメータは以下のようになります。

image(画像を格納した変数, x座標, y座標, 幅, 高さ)

複数の画像ファイルを表示する
複数の画像ファイルを表示する際のプログラム例を以下に記述します。画像ファイルは、ここでは仮に test1.jpg, test2.jpg という名称の２種類のJPEGデータとします。

let img1;
let img2;

function preload() {
 img1 = loadImage('test1.jpg');
 img2 = loadImage('test2.jpg');
}

function setup() {
 createCanvas(600, 400);
 background(0);
}

function draw(){
 image(img1, 0, 0,600,400);
 image(img2, mouseX, mouseY,200,100);
}

扱える画像フォーマット
Processingで扱うことのできるラスタ画像のファイルフォーマットは、JPEG、PNG、GIF になります。
ラスタ画像とは色のついた点（ドット）の集合として画像を表現するデータ形式のことです。もとの画像サイズより拡大するとジャギー（ギザギザ）が目立つようになるなど、拡大、縮小、変形には適さない形式ですが、写真などの複雑な画像の表現に適しています。

練習：PNGデータを使用し背景を透明化した画像データを作成する。
作成した画像データを使用して、画像データがマウスカーソルの動きに追従する作品を作成してください。

サウンドの再生

はじめに、サウンドの再生を実行します。まず、フリーの音源データをインターネット上から探してデスクトップにダウンロードします。ダウンロードする音源データは必ずmp3形式を選んでください。ダウンロードした音源データの名称をtest.mp3と変更します。

次に、画像データを扱った時と同じように、p5jsのエディターを開きログインしておきます。p5jsのエディターのスケッチエリアの上部左側の” > “ボタンを押すと、Sketch Filesメニューが表示されます。続けて”▼”ボタンを押すとメニューが表示されるので、Upload Fileを選択し、開いたウィンドウにファイルをドラッグ・アンド・ドロップします。Sketch Filesメニュー欄にアップロードしたファイル名が表示されるので確認しておきましょう。

以下のコードを記述して実行ボタンを押すと音源データが再生されます。

let sound;

function preload() {
 sound = loadSound("test.mp3");
}

function setup() {
 createCanvas(400, 400);
 sound.loop();
 sound.play();
}

function draw() {

}

マウスクリックでサウンドを再生する

次にマウスをクリックすることでサウンドが再生されるプログラムを作成してみましょう。（新規でプログラムを作成する場合は、先ほどと同じようにあらかじめ音源データを追加しておきます。）

let sound;

function setup() {
 sound = loadSound('test.mp3');
 createCanvas(400, 400);
 background(255, 0, 0);
}

function mousePressed() {
 if (sound.isPlaying()) {
   sound.stop();
   background(255, 0, 0);
 } else {
   sound.play();
   background(0, 255, 0);
 }
}

音量の視覚化

サウンドの音量（ボリューム）とグラフィックスを関連づけてみましょう。

let sound, analyzer;

function preload() {
 sound = loadSound('test.mp3');
}

function setup() {
  createCanvas(400, 200);
  analyzer = new p5.Amplitude();
  sound.pause();
  sound.loop();
  analyzer.setInput(sound);
}

function draw() {
    background(0);
    let rms = analyzer.getLevel();
    fill(255,0,0);
    ellipse(width/2, height/2, 10+rms*200, 10+rms*200);
}
練習：２種類のサウンドデータを用意する。
２種類のサウンドデータの音量に合わせて変化するグラフィック作品を作成してください。
Proudly powered by WordPress