今年度も就職活動のスタートとなる「トライデント合同企業展」が名古屋国際会議場で開催されました。例年ですと2月に開催されていましたが、就職活動期間が変更されたことに合わせて、今年度から4月開催となりました。
今年もWeb制作会社をはじめ、IT、ゲーム制作会社、CG制作、デザイン事務所など100社を超える、企業の方々にお越しいただき、会社のこと、仕事のこと、採用スケジュール、求める人材など熱く説明いただきました。長時間ありがとうございました。
いよいよ、会社説明会、採用試験、面接など就職活動が本格化していきます。
就活生の皆さんがんばってください！
4月3日に入学式が行われて、2週間が経った新入生ですが、通常授業も始まり、初めて聞く用語や触れるアプリケーションにドキドキしながら勉強しています。
例年、入学早々、日頃の勉強や成果などをアウトプットする目的で、ブログやTumblrなどを個人ごとに利用してもらっていましたが、今年からはクラスで1つのブログを運営していくことにしました。
名前は「WF1でBLOG 2015」。後期からは個人ブログを開設してもらうので、それまでの期間限定となりますが、よろしくお願いします。
すでに、オリエンテーション授業内でWebデザイン学科に入学して勉強していくにあたっての今後の目標を全員に書いてもらっています。
今後もテーマを変えて、順番に書いていってもらいますので、このブログでも紹介していきます。お楽しみに。
すっかりご報告が遅れてしまいましたが、3月17日（火）から22日（日）まで開催されていましたWebデザイン学科の学生作品展「うぇ〜〜〜〜〜ぶ!!」が無事終了しました。
インターンシップ先の企業の方々をはじめ、学生の友人、保護者の皆さまなど、6日間で192名の方に来場していただきました。本当にありがとうございました。
これまでWebの作品は、インターネット上に公開して発表とすることが多く、利用者が操作している現場を見ることが、余りありませんでした。今回、制作した本人達が作品を操作してもらったり説明することで、具体的に利用者を意識できたのではないでしょうか。学生に終了後の感想などを聞いてみると、そんな意見がおおくあり、得るものも大きかったようです。
あたたかいご意見をいただき、ありがとうございました。
学校の課題、引っ越し屋さんのWebサイト制作
Flashのゲーム
ちょうど、開催中に卒業式があった2年生の「2014年度 卒業制作展」作品も展示しました。
来年も開催できることになりましたので、ぜひお越しください。詳細はまた、このブログでお知らせします。
前の記事「canvas要素でパーティクル vol.1」の続きです。
ここまでで、四角い粒子が散らばっている動きができています。
現在、画面上には変数particleNumに設定されている100個の粒子が表示されており、100以上はでないようにfor文で設定されています。
for (var i = 0; i < particleNum; i++){
new Particle();
}
これを一度に100個出るように、setIntarvalに入れると、どばどば〜と粒子が湧き出るように表示されます。
数が多すぎるので、変数particleNumの数値を調整します。10〜20ぐらいでしょうか。
1割ぐらいの粒子の動きが変わるようにMath.randomで設定をします。さらに粒子の透明度も変更します。
- - - - - - - - -
Particle.prototype.draw = function(){
this.x += this.vx;
this.y += this.vy;
→ if (Math.random() < 0.1){
this.vx = Math.random() *10 -5;
this.vy = Math.random() *10 -5;
}
this.life++;
if(this.life >= this.maxLife){
delete particles[this.id];
}
→ context.fillStyle = "rgba( 255, 255, 255, 0.5)";
context.fillRect(this.x, this.y, 10, 10);
};
- - - - - - - - -
さらに、色もランダムに変わるようにします。
context.fillStyle = "hsla("+parseInt(Math.random()*360, 10)+",100%,50%, 0.2)";
前回も書きましたが、白い粒子が表示される毎に全体を黒く塗りつぶすことでアニメーションしているように見せているのですが、この黒に透明度を加えると、都度、不透明度が濃くなり残像が残るようなアニメーションになります。
- - - - - - - - -
setInterval(function(){
→ context.fillStyle = "rgba( 0, 0, 0, 0.1)";
context.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++){
new Particle();
}
- - - - - - - - -
globalCompositeOperationを使って"source-over"（普通の重なり）から、"lighter"（色を加算）したものへ変化させることにより、中心が光で眩い感じをだしています。
- - - - - - - - -
setInterval(function(){
→ context.globalCompositeOperation = "source-over";
context.fillStyle = "rgba(0, 0, 0, 0.5)";
context.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++){
new Particle();
}
→ context.globalCompositeOperation = "lighter";
for ( var i in particles){
particles[i].draw();
}
}, 30);
- - - - - - - - -
とりあえず、動く粒子の集合体ができあがりました。次回は、これにインタラクティブな動きを入れていきたいと思います。
勉強会に参加するために、初めてcanvasでパーティクルの作り方を調べました。自分でも理解しながら制作していきましたので、備忘録として、こちらに書いておきます。
まず、パーティクルとは、
自然界に存在する複雑で不規則な形状をしている火、煙、雲、霧、草、髪などを表現するために考案された。このようなポリゴンや曲面だけでは表現し切れない形状を、微小な粒子の集まりとして記述し、それが動き回る様を確率モデルとして処理する。
http://yougo.ascii.jp/caltar/パーティクル｜ASCII デジタル用語辞典
canvas要素とは、
HTML の canvas 要素 (<canvas>) は、スクリプティング（基本的には JavaScript）によりグラフィックを描画する事ができます。 たとえば、グラフの描画、写真の合成、更にはアニメーションの作成までが可能です。<canvas>のブロック内で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、canvas をサポートしない古いブラウザおよび JavaScript が無効であるブラウザで描画されます。htmlを用意します。
canvas 要素 - HTML | MDN
<!doctype html>
<html lang="ja">
<head>
canvasでparticle
<script>
----------
</script>
</head>
<body>
</body>
</html>
body内にcanvas要素をあらかじめ書いておいても良いですが、script内にcanvas要素をJavaScriptで書いて、変数canvasに入れてサイズを設定します。今回は400pxの正方形にしておきます。
そして、canvas要素を利用するための、お約束getContextメソッド、fillRect(x, y, w, h) メソッドをdocument.body.appendChild(canvas);の後に書きます。
fillStyle を使って、指定の矩形領域を塗りつぶします。高さか幅のいずれかが 0 なら、このメソッドは何も作用しません。
400pxの正方形が黒く塗りつぶされると思います。
その正方形の上に、パーティクル（粒子）のパーツを乗せていきます。とりあえず半分の大きさにします。
白いcanvas要素をsetIntervalを使って大きくしていきます。
徐々に大きくなってきます。
fillRectメソッド内の引き数でposX, posYが大きさの数値に設定されているので、位置部分に換えて、パーティクルのサイズを10pxで固定します。
context.fillRect(posX, posY, 10, 10,);
このままだとずっと白いcanvas要素が書き続けてしまうので、黒いcanvasで1回毎に塗り直します。
posX, posYに加える数値を変数vx, vyにして、移動する方向を編集しやすくします。
さらに、posYの位置が300を越えた場合、動きが小さくなるように0.5を掛けて、さらに-（マイナス）の値にすることで逆方向へ動かします。
またposYが300を越えれば小さく、逆に動いていき、最後には止まります（実際には止まっていないけど、動きが小さすぎて止まって見える）。
関数Particleにして、Math.random()で不規則な方向に動くようにします。
粒子をたくさん作るために、配列を作ります。
var particles = {},
particleIndex = 0;
関数particleの中に
particleIndex++; particles[particleIndex] = this; this.id = particleIndex;
と入れることで、繰り返される毎に配列に粒子が格納されます。
スピードや数、消える位置を設定すると、花火のようなアニメーションができ上がります。
後半、駆け足になってしまいましたが、この続きはvol2で書きます。
この後に数を増やし、動きをランダムにして、色と透明度などを変更するとそれっぽくなります。
卒業式も無事終了しました。
先輩たちが新しい門出を迎える頃、いよいよ新2年生も就職活動が本格化してきます。トライデントコンピュータ専門学校では、いままでは採用を前提としたインターンシップを行ってきましたが、今後は就業体験型のインターンシップも行っていくことになりました。
Webデザイン学科からは、希望者5名がそれぞれ名古屋のWeb制作会社にインターンシップとして現場を体験してきました。
最初は、「失敗して怒られるかも」「会話がないかも」と不安でいっぱいだった学生も、企業の皆さんに優しく接していただくうちに、現場の雰囲気や仕事に対する想い、楽しさなども肌で感じることができたようです。
株式会社テラさんでは、制作の実習だけでなく夕方のミーティングにも参加して、ライトニングトークなども体験させていただきました。
株式会社カプセルグラフィックスさんでは、和気あいあいな雰囲気のなか、より実践的なテクニックを学べたようです。
株式会社タービン・インタラクティブさんでは、おしゃれなオフィスで気持ちよく制作できただけなく、いろいろなイベントにも参加させていただけました。
有限会社オーディーエーさんでは、実際に自分で選んだ商品を担当して、ネット上で売れるデザインを制作しました。
株式会社グランフェアズさんでは、Web サイトの公開にも立ち会えたほか、インターンの内容を会社のブログに書かせてもらいました。
→専門学生がやってきた！グランフェアズでのインターンシップまとめ | 株式会社グランフェアズ
皆、インターンシップから帰ってきたら、なんだか自信がついたように見えるのは気のせいでしょうか。年度末のお忙しい中、学生を受けいれていただいた企業の皆さま、ありがとうございました。
また、4月3日には入学式が行われ、新入生も新たに加わり、新生Webデザイン学科を2015年度もよろしくお願いします。
ハートがなけりゃSNSじゃない！
