コンテンツ作成同好会 履歴



日付 タイトル 参考 要点
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 enx[i]=(i+0.1)*Math.cos(i*4*PI/nn);
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 if(i<18){
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()の変更