日付 | タイトル | 参考 | 要点 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2012 1/08 |
クリップ 4 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
1/15 | クリップ 6 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
1/22 | BASICプログラムとJavascript T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
1/29 | クリップ 7 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2/05 | クリップ 7 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2/12 | サムネール 1 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2/19 | サムネール 2 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
2/26 | サムネール 3 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3/04 | クリップ8 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3/11 | 時差移動技法1 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3/18 | 時差移動技法2 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3/25? | endding 1 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4/01 | endding 2 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4/15 | クリップ上級2 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4/22 完 |
クリップ上級2 完成 T |
1.線をレールに乗せる 2.写真クリップをレールに乗せる 3.フレームに数字を表示すると共に写真4枚表示する 4.数字の最後の次は"完" 5.すべての写真を非表示にする 6.各ending()にwarikomi()とnum_visi()を入れる |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4/29 | endding割り込み1 T |
1. 2. //背景写真となる領域 3. 4. 5. 6. |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5/06 | 2組のendingの作成 T U |
1.白線を4本2組作成する 2.基点(-25,14)のendng2()を作成する 3.基点(25,-14)のendng3()を作成する 4.交差長方形のサイズを355×200でstopさせる |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5/13 完 |
クリップ上級4(重なりendding技法) T |
1.スタートで写真枚数を変更することが出来る onloadの中にnn=10とする 2.関数5 3.関数6 4.epilogue() 5.finale() 6. ending2 6. ending3 |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5/20 完 |
クリップ上級5(カバーの使用) T |
1.写真に5枚カバーを被せる 2.初期位置は(-12,10) 3.sin=6() //coverを縮小していく //消える写真をcoverより前に出す //4枚とも表示する //次の写真を表示しておく //写真を四方に分散 4.その他の変更部分(前のプログラムに対して) |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5/27 完 |
クリップ上級6(カバー 黒い月) T |
1.5枚のカバーの作成 2.if(iik==0)におけるカバーの動き 3.if(iik==3)におけるカバーの動き 4.その他変更部分(前のプログラムに対して) |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6/03 完 |
クリップ上級6(カバー 五輪マーク) T |
1.各円の色情報 2.円の位置を寄せる//左から 3.//色別円に変更 4.//縦縞模様に変更 5.//5本模様に変更 6.//ランダム5本模様に変更 7.//旋回に変更 8.//Finの拡大 追加 9. 10. |
coverのかけ方いろいろな組み合わせ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6/10 完 |
クリップ上級6(ピース300カバー) T |
1.ソートの練習 2.行・列の位置指定の練習 3.カバーの準備 4.正方形の座標指定 5.カバーをはずす(非表示にする) 6.カバーをかけ直す(表示にする) 7.カバーの非表示の仕方を替える 8.フィナーレの順序 |
sortの練習(降順と昇順) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6/17 完 |
クリップ上級7(カバー円盤) T |
1.カバー 2.sin_6()のiik==0内 //カバーを縮小していく 3.iik==3内 //カバーをかけ直す 4.else内 //カバーをepilogue()直前に消す 5.finale2() 6.発展 |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6/24 完 |
クリップ上級7(時計回り) T |
1.function sin_5(){cover_exe(); //coverの実行 2.第4象限の処理(象限とは円の1/4) 3.第3象限の処理 4.第2象限の処理 |
レーザー光線描いて移動 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
7/01 完 |
回転移動の公式 (ベクトルの説明) T |
1.関数の実行 2.IMGの読込 3.線分を描く関数 4.線分の回転移動 5.線分の回転移動-2(PI/4) |
公式X=x*Math.cos(t)-y*Math.sin(t); Y=x*Math.sin(t)+y*Math.cos(t); |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
7/08 | 左右振り分け レーザー光線 @ T |
1.点(a,b)を中心とする回転移動 2.関数化 3.練習 //図形Nを描く→図形Nを回転させる関数 4. 練習2 //図形ESWを描く→図形ESWを回転させる関数 |
s字関数(NESW四方向のs字描いて回転) 回転の関数rotate function rotate(x1,y1,x0,y0,t){ X=(x1-x0)*Math.cos(t)-(y1-y0)*Math.sin(t)+x0; Y=(x1-x0)*Math.sin(t)+(y1-y0)*Math.cos(t)+y0; } for文の外に t=line(0,2*PI);と書きfor文の中に xx=X,yy=Y; rotate(x1,y1,x0,y0,t); mama[i].style.left=wx(X,centerx); mama[i].style.top=wy(Y,centery); |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
7/22 完 |
左右振り分け レーザー光線 A T U |
1.レーザー光線を描く 2レーザー光線を移動させる関数 3.関数 6 4.コメントを表示非表示 5. prologue 6.すべての終わり |
レーザー光線固定と一方を移動し色を変化させる クリップ・拡大・奇数と偶数に分けて移動 写真枚数分終わったらend.gifを表示する live"コメント" live=(nnn+1)+"/"+nn;end.gifを表示する 7/29 |
ステージライト@ |
T 2本 U 10本 1.元になるスクリプト |
2.ステージライトを増やす 3. 4. xx=line(-20+4,-10+4);//x軸方向に"4"平行移動sして2本引く |
8/5 |
8/19 完 ステージライトA | T U 1.ステージライトの効果 |
2.背景写真 //背景写真となる領域 3.関数5. 写真の整列 4.関数6. 5.epilogue 6.コメント #base { //セレクタ(styleの中に書く) |
stage light2(nnn)で6,7本目を白でランダム移動 console();で指示 マウス乗せると写真の説明が出る(katariの位置の書き方も参照) 8/19 |
時刻の取得 | T 1.時刻配分オブジェクト |
//配列定義 //配列内容の表示 2.個別取り出し 3.日数計算 var theDate=new Date(); |
document.write(theDate); 上2行で現在の日付が 描けます var theppDate=new Date(2012,4,22,0,0,0,0); document.write(theppDate); 上2行で2012年5月22日は火曜日であることがわかります 8/26 |
sky treeの装飾@ |
T 1.//ステージライトを描くまで |
2.日付 3.epilogue()のタイミング 4.待ち時間を埋めるイベント 7回交差して止まる(sky treeの上下の幅の違い) |
onLoad="opening_();だけのsky treeの動きから onLoad="rhythm_();になった工程の動きの違い 9/02 |
sky treeの装飾A |
T 1.写真待機 //関数5. |
//ランダムソート 2.作成順 //関数6写真登場〜移動開始〜 停止ボタンと展望回廊作成〜日数表示 |
9/09 |
完 sky treeの装飾 B |
T 1.写真拡大 //関数6 |
2.作成順 //左からの出現 中央で停止→交差1回→交差無限回 3.ライト点滅 light() //ランダムソート |
//array_.sort(function(a,b){ return Math.random()-Math.random()}); //sin_5()関数(写真を渦巻線に散らす)for(i=0;i eny[i]=(i/3+0.1)*Math.sin(i*4*PI/nn)+5; array_[i]=i;//ランダムに並べる} //日数計算 //var theDate=new Date(); //light() 色替え 9/23 |
sky dressの装飾@ |
T 1.最初はgoo |
// 点画像の読込 2.線の使い分け 3.カラー線3本表示 黒線4本(0,1,2,3)を描く位置 |
【xx=-20+2*j;yy=line(0,-10);】 カラー線3本(4,5,6)を格納配列の仕方 9/30 |
sky dressの装飾 A |
T 1.模様を動かす関数を作る(カラー3本表示コピー) |
//オープニング //colorSet 2.オブジェクトをもう一つ増やす 3.//関数6 4.7色に変える関数とタイミング (1) (2)カラー関数 color_[nnn][i]で模様を動かす |
10/14 |
完 sky dressの装飾 B |
T 1.写真のset |
2.写真の移動 3.epilogue() //パイプ準備 //関数 門を閉じる //写真の偶数・奇数で高さ変えるか幅を大きくするかif(iii%2==0){ |
a=-12.5;b=line(3,10); wi=480;he=line(90,360); }else{ a=line(-4,-12.5);b=10; wi=line(120,480);he=360; } wi=line(120,480);he=360; //q1="本日はご観覧ありがとう" ;q2="ございました。気をつけ";q3="てお帰りください。"; katari[nn].innerHTML=q1+q2+q3; //関数 門を閉じる kaku=line(-5*PI,0*PI); 10/21 |
nhk hallの装飾 @ |
T 1.点画像読み込み |
2.5本線の表示 3.15本表示の順序 4.動物 1匹用意する 5.動物 1匹を袖幕1と袖幕2の間に置く 線の表示位置 |
mama3[j][i].style.width=20-dd;(下に行くに従ってdd狭い) xx=line(-20+1.5*j,-19.25+1.25*j);(1.5並行移動してj本描く) yy=line(15,-14); 10/28 |
完 nhk hallの装飾 A |
T 1.対象点の求め方 |
2.公式の証明 3.関数sin_5()(初期化にする) 4.関数sin_6() nya[i]のzIndexの付け替え |
end_=[];//3文字入れる配列 ending_()の使い方 owari=["お","わ","り"]; 一匹ずつ舞台に並ぶ epilogue_() 立つ位置→立つ位置までの経路 アーチ作成 11/11 |
完 nhk hallの装飾 B |
T 1.舞台に並ぶ |
2.アーチ作成 3.エンディングの準備 4.nya[i]のzIndexの付け替え 5.2枚同時移動で整列 //epilogue_()の変更 二匹ずつ舞台に並ぶ |
ending_()の使い方 11/18 |
完 nhk hallの装飾 C |
T II 1.舞台に並ぶB |
//2枚以上同時移動 2.舞台に並ぶC //同時時間差移動 3.文字を同時時間差移動 *ending_()の変更 epilogue_()の違い舞台に並び方の違いBとC |
補足" お わ り □" スムーズにおわりが出る 11/25 |
太陽の軌跡 1 |
T 1.太陽をかく |
2.太陽を動かす 3.nhk_hallと連結する opening_()で太陽を動かす軌跡 |
12/02 |
完 太陽の軌跡 2 |
T 1.太陽をかく |
2.太陽を動かす //太陽移動 //袖幕を順次ピンクに //関数太陽 //色の変更 //対象の柱の交換 3.nhk_hallと連結する //関数5.写真の表示 //関数6 *関数 line3の作成 5.エンディング処理 関数line3(x1,x2)をkiban_2に追加 |
function line3(x1,x2){ return (1-t3)*x1+t3*x2; } 12/09 |
3D 空間 1 |
T 1.渦巻き1周目をかく |
2.正方形渦巻き 3.幅調整 4.長方形渦巻き 5.for からタイマーへ変換 幅調整で横と縦の力を変える(東北西南) |
12/16 |
完 3D 空間 2 |
T 1.初期設定 |
//関数5.写真の表示 2.移動 //関数6 3.エンディング処理 4.開始処理 //写真を長方形に行列に並ばせる |
$xx=[];$yy=[]; for(j=0;j<4;j++){//行 yy=10-6.2*j; for(i=0;i<5;i++){//列 xx=-20+9.5*i; ij=j*5+i; //写真30*40を600*800に拡大しもう一度60*80に縮小して行列に並ばせる 2013 |
1/20 ヴァ-チャルシリーズ2 shabon.html @ | T II III 1.opening画像の準備 |
2.等円nnn個描画 onloadでnnnを35個にする(01_20aで登録) 3.等円nnn個異なる位置に描画(01_20bで登録) 4.変化をつける (1)半径を周期的に変える (2)半径を記憶させておいて、右へ動かす関数をつくる 【r=Math.random()+(j%10==9?2:0.1)】 |
xx=r*Math.cos(line(0,2*PI)); yy=r*Math.sin(line(0,2*PI)); xx0=line(-25,24); //-25〜24までの範囲で描く yy0=3*Math.sin(xx0/4); //sinカーブ上に円を描く(3は 振り幅) if(j%10==8| j%10==0)r=0; //10で割った余りが8 且つ0の時半径rは0 else r=Math.random()+(j%10==9?2:0.1); //10で割った余りが9の時半径rは2でその他は0.1 (random使うので同じ円ではない) 1/27 |
ヴァ-チャルシリーズ2 shabon.html A |
T 1.ボタンの準備 |
2.円の個数 画像読込 3.描画関数 4.動かす関数 |
2/03 |
完 ヴァ-チャルシリーズ2 shabon.html B |
T 1.関数5.写真の位置 |
//カラーの初期化-碧 2.opening 3.関数6//写真が動いて拡大 4.7色に変える関数とタイミング (1)chain_move() (2)カラー関数 continueの意味はfor 文の途中で始めに戻すこと |
//color_(j,1+Math.floor(8*Math.random())) 2/17 |
ヴァ-チャルシリーズ3 meiro.html @ |
T 1.偶然模様 |
2.画像読込 3.さいころを振る関数 4.//回転した先の座標を求める動かす関数 5.//描画 □>0.5?1:0; とは 0.5より大きいなら1 そうでないなら0(真/偽) |
nn=Math.floor(6*Math.random())+1; //1〜6までの値 2/24 |
完 ヴァ-チャルシリーズ3 meiro.html A |
T 1.start関数 |
2.継続実行のためpuzzle()の変更 3.場外にはみ出さない処理 4.//関数5.関数 写真の表示 5.関数sin_6() □>0.5?1:0; とは 0.5より大きいなら1 そうでないなら0(真/偽) |
nn=Math.floor(6*Math.random())+1; //1〜6までの値 katariを写真の上下に振り分けて出すcx=Math.round((nnn%4)*.3)*2-1; replay() もう一回 3/10 |
ヴァ-チャルシリーズ4 diamond.html @ |
T 1.画像の読み込み |
2.さいころを振る関数 puzzle()の変更 3.十色に変更する □>0.5?2:0; とは 0.5より大きいなら2 そうでないなら0(真/偽) |
jc.sort(function(a,b){ //sort関数 return Math.random()-Math.random(); }); 40*40の画像の構成は10色 jc(色) ja(take) ji(0〜31のowari) jn(ja*owari+ji 320通りの配色) siz(40-4*ja 配列カラ-の幅) 3/16 |
完 ヴァ-チャルシリーズ4 diamond.html A |
T 1.puzzle() |
2.//4.小道具の読み込み //シャッター1 //シャッター2 //フレーム 3.関数6 puzzleの2点位置指示 xx[0]=Math.floor(Math.random()*40)-20;yy[0]=4; |
xx[1]=xx[0]+2;yy[1]=4; 画像(シャッター)はdocument.write(IMG ・・・で始める 画像(フレーム)はdocument.write(DIV ・・・で始める background:url(goods/furemu.gif) text-align:right;line-height:56pt; 3/24 |
ひな形 完 プログラムの骨組みとは |
T 1.骨組みの構造 |
2.上記の順にプログラムを作る visihide()をblock_none()に変更 |
visibilityをdisplayに変更 visibleをblockに変更 hiddenをnoneに変更 3/31 |
ヴァ-チャルシリーズ5 izakaya.html @ |
T 1.写真の複数枚読み込み(二次元配列) |
2.小道具の読み込み(縦棒2本) 3.クリップを3枚同時に表示する 4.クリップを3枚時間差で表示する zIndex=nn-zin++(0番の写真が一番前) |
4/14 |
ヴァ-チャルシリーズ5 izakaya.html A |
T 1.クリップ5枚の動き |
2.小道具のドアー化 5枚のクリップ写真が時差で動く |
epilogueのドアー化 4/28 |
高精細の為kiban.jsの更新 ヴァ-チャルシリーズ5 izakaya.html B | 1.スクリプト本文の定数設定と変更 |
2.関数auto1() 3.オープニング処理 kiban_0.jsで更新 |
5/12 |
完 ヴァ-チャルシリーズ5 izakaya.html C |
ユニバーサルデザインに近づけるための更新箇所 T 1.コメント |
2.小道具 3.prologue() 4.sin_5() 5.sin_6() 6.epilogue() ●katari[i].style.fontSize="20pt";を |
katari[i].style.fontSize=20*size+"pt";に更新 ●width:400px;を katari[i].style.width=400*size+"px";に追加 ●take[i].style.width=20*size;に更新 ●take[i].style.height=20*size;に更新 ●shacin[i][j].style.clip="rect(0 320 0 0)";を shacin[i][j].style.clip="rect( "+ue*size+" "+mi*size+" "+ci*size+" "+hi*size+")"; ue=0;mi=320;ci=0;hi=0;と定義後に更新 ●wi=line(1,320)を wi=line(1,320)*size;に更新 5/19 |
星形図形の描画 ヴァ-チャルシリーズ6 star.html @ |
T 1.図形の描き方 |
2. onload="star(); 3.次は、位置の移動を考える xmpの使い方 |
5/26 |
星形図形の描画 ヴァ-チャルシリーズ6 star.html A |
T T 1.星をひとつ描くプログラム |
2.連続して星を描くには 3.プログラムの実際 4.プログラムの発展 pentagon()で連続して星を動かす |
6/02 |
星形図形は写真のBackDancer ヴァ-チャルシリーズ6 star.html A |
T 1.大きな星を交互に描く |
2.まずshabon.htmlの写真の表示と合体させる 3.newプログラムの実際
| 6/09 |
完 ヴァ-チャルシリーズ6 star.html B |
T U III 先生分 4.プログラムの発展 |
| 6/16 |
ヴァ-チャルシリーズ7 crane.html @ |
T 1.クレーンの描き方 |
2.各画像の要素を配列に格納する 3.スクリプトの要件説明(左腕.左手.右腕.右手.ボディーを描く) 円の描き方 |
t=(i-80)/19;kaku=line(PI,0); x=2.3*Math.cos(kaku)-12.5; y=2.3*Math.sin(kaku)+5; element[i].style.left=wx(x,centerx); element[i].style.top=wy(y,centery); element[i].style.height=20*size*2.3*2*Math.sin(kaku); 6/23 |
前回補足のスクリプト ヴァ-チャルシリーズ7 crane.html A |
U 1.getしたものを落とす穴(台形をpixiaで描く) |
2.関数5(サムネールの写真をrandomに配置) 3.jquery解説 4.関数6 横移動iik==0 5.頭上で降りるiik==1 6.写真の位置でつかむiik==2 $("#pho"+i).attr("border",0); |
後に設定される操作を解除する機能 # セレクター attr("border",0) 0〜19の写真のborderを0にする(枠なしの事)タグの中の各項目を属性(attr)という while whileの意味はアバウト -9〜5の間 kairen関数(左右の腕と手のところ) kaiten(xxx[i],yyy[i],-15,5,line(0,PI/6));回転の中心は(-15,5) kaiten(xxx[i],yyy[i],-10,5,line(0,-PI/6));回転の中心は(-10,5) 6/30 |
完 前回補足のスクリプト ヴァ-チャルシリーズ7 crane.html B |
V 1.上に移動(iik==3) |
2.横に移動(iik==4) 3.中央で開く(iik==5) 4.写真を落とす(iik==6) 5.ここでコメントを一度出す(iik==7) 6.写真拡大(iik==8) 7.写真の枠をつける(iik==9〜iik==12) 8.エピローグ 7/7 |
ヴァ-チャルシリーズ8 kaitensici.html @ |
T U V 1.サムネールの全体移動 |
2.横に移動 3.関数5 @.楕円上に写真を並べ回転させるhtml(右上直線・左上直線も入力) |
A.上段(-22〜18)に写真を並べる(yは10) 下段(18〜-22)に写真を並べる(yは6) B.横移動 今回写真番号で場合分け for(i=0;i<9;i++)//上段10(-22〜18) for(i=9;i<18;i++)//下段6(18〜-22) 7/14 |
ヴァ-チャルシリーズ8 kaitensici.html A |
T 1.関数6.サムネールの全体移動(座標移動に修正) |
2.//配列の要素の入れ替え問題 3.//上記プログラム 4.作品にする上での問題と解決 alertの使い方の練習コーヒーcupと紅茶のcupをカラのcupに入れ替える説明有り |
"a="+aは文字列+数値 a=[]; a=1;b=2; c=b;b=a;a=c; alert("a="+a + "b="+b); a=1 b=2と表示される a=[]; a[0]="生たこ"; a[1]="とろサーモン"; a[2]="ビントロ"; a[3]="えんがわ"; c=a[0];a[0]=a[1];a[1]=a[2];a[2]=a[3];a[3]=c; alert(a); とろサーモン・ビントロ・えんがわ・生たこ と順序変わって表示される 7/21 |
座標の入替 ヴァ-チャルシリーズ8 kaitensici.html B |
splice前を取り出す push 後ろに追加 shift 先頭削除 concat 前に後ろを結合 T 1.関数6.サムネールの回転 |
2.//配列の要素の入れ替え問題 3.//上記プログラム 4.簡単な処理(配列の処理に関する関数を使う) 配列要素の入れ替え(splice:push:shift:concat:) |
書式 mae=xx_.splice(0,18); 0から18番目までの前を取り出す意味 書式 a.push(b); 意味:配列aに値bを後ろに追加する-->要素が増える 書式 a.shift(); 意味:配列aの前から先頭を削除する-->要素減る 書式 xx_=mae.concat(xx_); 前に後ろを結合させる意味 7/27 |
ヴァ-チャルシリーズ8 kaitensici.html C |
T 1.新しいファイルのダウンロード |
2.関数5.(再掲) 3.関数6.へ第二レーンを追加 4.座標の入れ替え(配列の処理に関する関数を使う) 写真のファイル名は | ban="DSC0"+come[i].substr(0,4); 注意DSCゼロ 書式(maeとxx_,maeとyy_) mae=xx_.splice(0,18);前18個取り出す mae.push(mae[0]); 後に追加 mae.shift();先頭削除 xx_.push(xx_[0]); 後ろ18個の後ろに追加 xx_.shift(); xx_=mae.concat(xx_); mae=yy_.splice(0,18); mae.push(mae[0]); mae.shift(); yy_.push(yy_[0]); yy_.shift(); yy_=mae.concat(yy_); 8/04 |
完 ヴァ-チャルシリーズ8 kaitensici.html D |
T 1.客の位置 |
2.写真のクリックボタン設定 3.写真の拡大とコメント表示 4.コメントと表示の属性変更 5.トラブル防止処理 muki=t3%2==0?3:4;2で割った余りが0(偶数)時3gif 奇数は4gif | face.src="select2013/plate"+muki+".gif";と続く onClick="info('+i+')"写真読み込みにクリックボタン追加 8/11 |
ヴァ-チャルシリーズ9 hanabi.html @ |
T 1.花火の準備 |
2.関数5.各種道具・写真の初期設定 3.関数6. 4.写真とクリップのサイズにsizeを投入 写真と花火の軌道 | if(iii%4<2)kaiten(-24,-10,0,-10,line(0,-PI*0.4)); else kaiten(22,-10,-3.9,-13,line(0,PI*0.515)); 花火の色替え colo=ik%3==0?"8.gif":(ik%3==1?"3.gif":"7.gif");//偶数赤、余り1の時緑、そうでない時紫 take[ik].src="goods/point"+colo; 写真を出すタイミング if(iii!=0&&ik>6)shacin[iii-1].style.display="none"; 8/18 |
完 ヴァ-チャルシリーズ9 hanabi.html A |
T U 1.花火大会の前奏の準備 |
2.花火大会の前奏 3.エンディング処理T 4.エンディング処理U 5.エンディング処理V < span> 岐阜花火大会2013(ここに文字入れ場所の確保)< /span> | x=Math.cos(line(0,10*PI))+i; y=line(-10,14); line(0,10*PI)は-1〜1の間5周期分 下から上に(-10〜14まで)cosカーブで打ち上がる substr(i,1); iは番 1は個 8/25 |
ヴァ-チャルシリーズ10 door.html @ |
T 1.間仕切り |
2.doorのopen 3.formのはたらき evalとは・・・文字を数値化するもの//数値書き込むと動く | function sin_4(){ part=eval(document.fona.namae2.value);} door(0,5); 右に動くようonloadに入力 9/01 |
ヴァ-チャルシリーズ10 door.html A |
U 1.間仕切りドアーのサイズ微調整 |
2.関数5 3.関数6 zIndexの使い方と何を上に持ってくるか考える | 9/08 |
完 ヴァ-チャルシリーズ10 door.html B |
U 1.エンディング処理 |
kaiten(-8,4-4*1/5,3,-18,line(0,-PI*0.4)); | (3,-18)を中心点で(-8,4-4*1/5)から-PI*0.4まで軌道上を移動 9/15 |
ヴァ-チャルシリーズ11 window.html @A |
T U 1.小道具(縦10横7本のマンション) |
2.関数5 2.コメント 3.関数6 katariの2次元配列 | 9/22 |
完 ヴァ-チャルシリーズ11 window.html B |
T U 1.写真の移動 |
2.エンディング処理
| 9/29 |
10/06 ヴァ-チャルシリーズ12 gps.html @A |
T 1.写真の表示座標の取り込み方 |
2.サムネール写真の紹介 3.並べ替え(昇順) 4.数値の並べ替え(昇順)
| 10/13 |
ヴァ-チャルシリーズ12 gps.html B |
T 1.数値の並べ替え(数値を文字に変えてから) |
2.0や負の数が混じっていたら 3.他の要素を連結して並べ替える 4.プラグラムへの運用
| 10/20 |
ヴァ-チャルシリーズ12 gps.html C |
T 1.地名の入力 |
2.mieji.jsファイルの読み込み 3.エリアポイントを書き込む 4.エリアポイントの座標を読み込む
| 10/27 |
完 ヴァ-チャルシリーズ12 gps.html D |
T 1.地名の表示から |
2.写真に仕掛けた技 "写真の読み込み"の中に書く |
onMouseOver="sin_7('+i+')" onMouseOut="sin_8('+i+')" onClick="sin_9('+i+') 11/10 |
ヴァ-チャルシリーズ13 tripleaxel.html @ |
T 1.写真の準備 |
2.コメント 3.コメントの表示・非表示 4.関数5.写真の表示 5.関数6.写真の移動 log関数の曲線→3回転の楕円→写真を拡大
| 11/17 |
ヴァ-チャルシリーズ13 tripleaxel.html A |
T 1.コース分け |
2.各サブルーチン 3.3コースに分けると iii%3==0?course1():(iii%3==1?course2():course3()); |
3で割った余りが0の時はcourse1 3で割った余りが1の時はcourse2 それ以外はcourse3() *記号 : (そうでない時の意) 11/24 |
完 ヴァ-チャルシリーズ13 tripleaxel.html B |
T 1.写真のセッティング |
2.サムネールの全体移動 3.サブルーチン 単純作業は"setInterval" |
setInterval("関数名()",インターバル) func()の実行は tid67=setInterval("encore()",500); func()の実行を止めるには clearInterbal(tid); 文字の置き換え katari[nn].innerHTML=katari[nn].innerHTML+"拍手!"; 12/01 |
ヴァ-チャルシリーズ14 shuudan.html @ |
T 1.写真6行3列のセッティング |
2.集団を45度左に振る 3.行進 4.左側の集団追加 5.交差 塊のshuudanの点(x,y)を中心に角45度回転する |
前進と後退と交差 12/08 |
ヴァ-チャルシリーズ14 shuudan.html A |
T 1.ボタンで処理の順番を制御する |
2.写真6行3列のセッティング 3.集団を45度左に1,2,3で振る 4.交差と方向転換 5.線引き onClick="sin_55"VALUE="整列" "交差" "道"などのボタンを作る |
12/15 |
ヴァ-チャルシリーズ14 shuudan.html B |
T 1.写真の移動拡大開始 |
2.写真6行3列横隊のセッティング 3.endingのボタンを作る 12/22 |
完 ヴァ-チャルシリーズ14 shuudan.html C |
T 1.コメントの位置指定と残り枚数表示 |
2.関数の実行順序 3.集団の回転 ボタンをsetTimeout( , )で連結させる |
//---hy(nnn)---集団の回転 function hy(nnn){ for(i=0;i shacin[i].style.WebkitTransform="rotate(-"+nnn+"deg)"; }else{ shacin[i].style.WebkitTransform="rotate("+nnn+"deg)"; }}} 01/05 |
ヴァ-チャルシリーズ15 rendako.html @ |
T 1.タコを2本あげる |
2.ゆっくり上下 3.伸縮 4.それぞれの動き @場合分け |
if(i<32||(i>49&&i<82)){ // sen[i].style.width=2*size; sen[i].style.height=2*size; } ||またはの意&&且つの意 Ax=line(-20,20*t);// *tでカーブになる y=line(-10,13*t*t);// *t*tでカーブになる Bゆっくり上下 tt+=PI/360*s;if(Math.abs(tt)>PI/50)s=-s; kaiten(x,y,-20,-10,tt);x=X;y=Y; C伸縮 X=x+tt2*100;Y=y+2*Math.sin(40*tt2);x=X;y=Y; //徐々に右(x)移動と上下(y)に大小移動 Dそれぞれの動き 1本目は上下運動2本めは伸縮運動 01/13 |
ヴァ-チャルシリーズ15 rendako.html A |
T 1.タコを写真に入れ替え |
タコの位置情報の記録 2.ボタンの作成 3.ボタンの配置 4.関数6 写真の移動 @point4.gifを写真に入れ替え |
sen[i].src=shacin[j++].src; 36枚の写真の座標の取得 if(!(i<32)){//!は否定の意 zax[j]=x;zay[j]=y; zax[j+18]=x-5;zay[j+18]=y; A写真画像をボタンに botan[i].style.backgroundImage='url(select2013/'+ban+'.jpg)'; Bボタンをピラミッドのように積む Cボタンをクリックすると写真が指示位置に移動 01/19 |
完 ヴァ-チャルシリーズ15 rendako.html B |
T 1.タコの移動から写真の表示へ |
2.ボタンを押した後の処置 3.風向き @shacin[iii].style.WebkitTransform="rotate("+de+"deg)"; |
"+de+" 回転させる setInterval("timerstop();SIN_2();",30000); setInterval("関数",時間) 一定時間繰返す 01/26 |
ヴァ-チャルシリーズ16 menbou.html @ |
T 1.写真の準備 |
2.コメント 3.コメントの表示・非表示 4.関数5 5.関数6 サムネールの全体移動 @onClick="block_none('+i+') |
写真の準備の中に入力してクリックしたら"コメント"出す Anagasa=come[i].length; katari[i].style.width=size*(nagasa<30?nagasa:30)*30; katariの長さ指定(幅が長いなら改行される) Bkaku=line(-0.6,-2.6)*PI; x1=20*Math.cos(kaku); y1=4*Math.sin(kaku)+8; 写真の位置と1周する"kaku" (疑問理解できない) 02/02 |
完 ヴァ-チャルシリーズ16 menbou.html A |
T 1.回転を止める手順 |
2.フォントサイズの変更の仕方 3.小道具の読み込み 4.踊るメンボウ 5.関数6 サムネールの全体移動 @トグルボタン |
startボタンを押したら"startボタンをクリックしてください"が消え "写真をクリックすると説明が出ます"が動くように一個のボタンで済むsikake()関数 Aフォントサイズの変更の仕方 id1.style.fontSize=id1.style.fontSize.substr(0,2)*size+"pt"; id2.style.fontSize=id2.style.fontSize.substr(0,2)*size+"pt"; id3.style.fontSize=id3.style.fontSize.substr(0,2)*size+"pt"; B縦線の引き方 02/09 |
ヴァ-チャルシリーズ17 album.html @ |
T 1.対象をつくる(Album 縦線と横線) |
2.小道具を作る 3.小道具を動かす 4.ボタンをつくる @cosカーブ |
tt=line(0.2*PI,-0.8*PI);//区間π x=10*Math.cos(tt*2)-10; y=tt+4*PI; A縦棒"len"の長さを出す(遠近感出すため手前長く) Bx軸0の基線で対象に動く 02/16 |
完 ヴァ-チャルシリーズ17 album.html A |
T 1.タイトルとページ表示 |
2.コメントの表示・非表示 3.コメントの移動 4.関数5 5.ボタンのアクセス先 6.最後のページ @cosカーブ |
tt=line(0.2*PI,-0.8*PI);//区間π x=10*Math.cos(tt*2)-10; y=tt+4*PI; A縦棒"len"の長さを出す(遠近感出すため手前長く) Bx軸0の基線で対象に動く 02/23 |
グーグルでないと出来ない事 |
shacin[i].style.WebkitTransform= "rotate("+de+"deg)"; function furu()関数を今回追加 ヴァ-チャルシリーズ18 shutter.html @ T 1.写真の準備 |
2.小道具を作る 3.関数5 4.関数6 サムネールの全体移動 5.竹を2本かく 中心から放射状に写真が並ぶ |
@kaku=line(0,2)*PI; de=line(90,-270);写真が右90度回転して配列される //degreesのde=角度の意 個々の写真が左回り 個々の写真を回転しながら全部の写真を回す Bshacin[i].style.WebkitTransform="rotate("+de+"deg)"; Akaku=line(0,2)*PI+m;//定数を掛けると回転する de=line(90,-270)-m*180/PI;//度に替える(写真自身も-mずつ回転) *振る(線の中心で回転) function furu()関数を今回追加 function furu(x1,y1,len,Deg){ han=len/20; x2=x1+han/2;y2=y1; kaiten(x2,y2,x1,y1,-Deg*PI/180); kaiten(x1,y1,X,Y,Deg*PI/180);} 03/02 |
ヴァ-チャルシリーズ18 shutter.html A U 1.HTML処理 |
2.関数7 3.関数5 修正 関数6 修正 4.エンディング 0番目の写真を真上に | kaku=line(0.5,-1.5)*PI-m; de=line(0,360)+m*180/PI; xx=10*Math.cos(kaku);zax[i]=xx; yy=10*Math.sin(kaku)+3.6;zay[i]=yy; 03/09 |
ヴァ-チャルシリーズ18 shutter.html B V 1.写真の準備 |
2.関数5 3.関数6 サムネールの全体移動 4.else if(iik==7)の処理 5.ボタン @トグルボタン |
クリックすることでオン/オフの切り替えできるボタンの事 shikake() 仕掛け関数 id=0; function shikake(){ 03/16 |
完 ヴァ-チャルシリーズ18 shutter.html C IV 1.小道具の準備 |
2.エンディング nagasa=Math.sqrt(2)*14*20;//sqrt(2)*14とは |
スクェアールートつまり平方根2(14√2) furu関数2 function furu(x1,y1,lenx,leny,Deg){ hanx=lenx/20;hany=leny/20; x2=x1+hanx/2;y2=y1-hany/2; kaiten(x2,y2,x1,y1,-Deg*PI/180); kaiten(x1,y1,X,Y,Deg*PI/180); } 03/23 |
新 アルファベットシリーズ1 conveyor.html @ T 1.関数5.写真の初期位置設定 |
2.関数6.進行 3.起動スイッチ dog[i]+=bit;//動くようになる
|
//3.起動スイッチ bit=0.1; function retimer(){ clearInterval(tid); tid=setInterval("sin_6();",10); setInterval("関数",時間) 一定時間繰返す 03/30 |
完 新 アルファベットシリーズ1 conveyor.html A T 1.小道具 |
2.関数7.写真の拡大 3.エンディングepilogue() 04/06 |
新 アルファベットシリーズ2 suisha.html @ T 1.小道具 |
2.関数5.写真の配置 3.関数6.サムネイルの全体移動 nagasa=Math.sqrt(xx*xx+14*14)*20; |
kaku=Math.atan(14/xx)*180/PI+fuka; 角度がわからない時に直線引くやり方atan(arctanアークタンジェント)とsqrt(スクウェアルート) //3.起動スイッチ bit=0.1; function retimer(){ clearInterval(tid); tid=setInterval("sin_6();",10); setInterval("関数",時間) 一定時間繰返す 04/20 |
アルファベットシリーズ2 suisha.html A T 1.線を横に移動する(小回転)方法 |
2.8番目の線を回転させる 3.8番目の線を小回転させる 4.上記の実行順序を考えて、動きを完成させる *ピタゴラスの定義 |
nagasa=Math.sqrt(xx*xx+14*14)*20; 角度がわからない時に直線引くやり方atan(arctanアークタンジェント)とsqrt(スクウェアルート) //3.起動スイッチ bit=0.1; function retimer(){ clearInterval(tid); tid=setInterval("sin_6();",10); setInterval("関数",時間) 一定時間繰返す 04/27 |
完 アルファベットシリーズ2 suisha.html B T 1.拡大倍率を指定する関数 |
2.回転を止める関数とアクセス変更 3.メモ1,2,3,4,5, 徐々にshacinと8本の棒と8番目の棒を止めるstop関数 |
s=1-t(徐々に小さくなる) ban=come[nn-1-i].substr(0,3); 大きい写真番号が先に表示される (普通は ban=come[i].substr(0,3);) 05/11 |
03_30conveyor参照した アルファベットシリーズ3 Bouldering.html @ T 1.写真の読み込み |
2.コメントの読み込み 3.コメントの表示・非表示 4.小道具 5.関数5.写真の初期設定 6.関数6.写真の移動 7.sub michi(nnn) 8.関数起動 05/25 |
完 アルファベットシリーズ3 Bouldering.html B T 4.小道具での布石 |
8.関数 図形の変形 9.関数 図形の移動 10.else if(iik==1)の中の変更 11.epilogue2()の変更 |