バウンスボールのクラス
覚え書き
・力はフレーム毎に足し合わせる。
・forceメソッドが他のボールに力を加えるメソッドである。
・イニシャライズで足し合わせた力をゼロに戻す。
・レンダリングは二種類用意した。
・ボール同士が、色を変える、のような機能を実装しようとしたが、未完。
class BounceBall { constructor(x, y, r, m, col) { this.x = x; this.y = y; this.vx = random(); this.vy = random(); this.fx = 0; this.fy = 0; this.life = 0; this.own_color = [0,0,250]; this.your_color = [250,0,0]; this.color = col; this.m = m; this.r = r; this.w = this.r*2; this.h = this.r*2; } init(){ this.fx = 0; this.fy = 0; this.color = this.own_color; } update(){ this.x += this.vx; this.y += this.vy; this.vx += this.fx/this.m; this.vy += this.fy/this.m; this.life += 1; } force(){ balls.forEach(b => { let l = dist(b.x,b.y,this.x,this.y); let l0 = this.r + b.r; if(l-l0 < 0){ let vec = createVector(b.x-this.x,b.y-this.y); vec.normalize(); vec.mult(abs(l-l0)); b.fx += k*vec.x; b.fy += k*vec.y; }; }); } reflect_wall(){ if (this.y < this.r) { this.vy = -this.vy*k_2; this.y = this.r; } if (this.y > height - this.r) { this.vy = -this.vy*k_2; this.y = height - this.r; } if (this.x < this.r) { this.vx = -this.vx*k_2; this.x = this.r; } if (this.x > width - this.r) { this.vx = -this.vx*k_2; this.x = width - this.r; } } render(){ push(); fill(this.color); translate(this.x, this.y); strokeWeight(1); circle(0, 0, this.r*2); pop(); } render_2(){ push(); drawingContext.shadowBlur = 12; let wh = "rgb(248,240,240)"; let bl = "rgb(31,31,242)"; drawingContext.shadowColor = wh; translate(this.x, this.y); strokeWeight(1); stroke(wh); fill(this.color); circle(0, 0, this.r*2); pop(); } }
葉っぱを描く関数を作った
葉っぱを描く関数を作った
function leaf(x, y, radian,size) { push(); translate(x, y); rotate(radian - PI / 2); let c1 = { x: size, y: size }; beginShape(); for (let rad = PI / 2 + PI / 4; rad < PI + PI / 4; rad += 0.01) { let r = size * sqrt(2); let x = c1.x + r * cos(rad); let y = c1.y + r * sin(rad); vertex(x, y); } let c2 = { x: -size, y: size }; for (let rad = 2 * PI - PI / 4; rad < 2 * PI + PI / 4; rad += 0.01) { let r = size * sqrt(2); let x = c2.x + r * cos(rad); let y = c2.y + r * sin(rad); vertex(x, y); } endShape(); pop(); }
プログラミング学習記録をつけることにしました。
プログラミングの勉強の状況を報告することにしました。何かの記録をつけることで、自分の歩みを的確なものにしたいと思ったからです。以下で、少し私のプログラミングの状況をお知らせします。
・なぜ勉強しているのか？
1.何かしらのスキルを身につけるため
プログラミングについて、我流の成果しかないので、誰か他の人が作ったものから、体系的に学んでみたいと思ったから。
より端的に言うと、ある程度以上の規模のゲームを私は構築したことがない。
それをするためには、先人が構築したやり方から学ぶのが手っ取り早いし、確実だ、と思ったから。
2.誰かに見せられる成果としてのゲーム
現状、クリエイティブ コーディングでプログラミングには親しんでいる私だが、クリエイティブ コーディングは趣味的な要素が強い。他人が楽しむことを目的としたゲーム作りから、得られるものは多い。
以上二点から、ゲーム制作を指南してくれる本からプログラミングを学ぶことにしました。ぼちぼちやっていきたいと思います。
兼重裕一のプログラミング講座
プログラミングにいきなり挑戦したけど、イマイチ面白みがわからない、自分でどうやってコードを書いたらいいかわからない、という方のために、プログラミング講座を開講することにしました。このページでは、読者の皆様の疑問を有効活用しようと思っておりますので、気になった方は是非コメント欄で疑問点を送ってください。次回以降の講義の参考にいたします。
さて、今回の講義では、プログラムを観察する、ということをやってみたいと思います。何事も観察によって得た気づきが重要。では行ってみましょう。
プログラムを実装する上で、全ての人が思うことというのはいつも同じとは限らないと思います。人によって疑問に思うポイントは異なるはずです。
ソースコードを見て、そのまま丸写しする、というのも一つの勉強法ではあるのですが、それだと、「自分の目で見て気づいたこと」というのが蔑ろにされる、という危険性もあります。
なので、じっくりとプログラムの実行結果を見た上で、「自分にとって、このコードのどこが気になるだろうか」というのをしっかりと感じた上で、その疑問点に基づいて、行動を開始される、というのも一つの方法ではないか、と思います。
FxUG@Fukuoka 「three.jsはじめましょ」LT資料を公開しました « イナヅマTVログ
例えば、最近僕がネットサーフィンで見つけた上のサイトですが、このサイトで扱われているプログラムにおいて、僕が気になったのは、その独特の配色でした。なんとなく、ただランダムに色を指定しているだけでは、このような配色にならないような気がしたのです。
それと言うのも、rgbカラーによる配色というのは、以下のようなものであり、なんとなく毛色が違っているのがお分かりかと思います。
従って、このような配色をランダムに作り出しているのは、どういったコードによるのか、といった疑問が浮かびます。
そのような疑問を持ちながら、「色指定」について調べていると、hslカラーとrgbカラーの違いについても知ることができました。
hslカラーの利点とは？？
端的に言って、hslカラーではカラフルな明るい見た目のランダムな配色を作りだす時にとても優れた力を発揮するという特色があります。
次のコードを見てください。
while(number<100){
let X = Math.random()*(canvas.width);
let Y = Math.random()*(canvas.height);
context.fillStyle = `hsl(${Math.random()*360},100%,50%)`;
context.fillRect(X,Y,10,10);
number += 1;
} 上のコードにおいて重要なのは、fillStyleを指定している部分です。
hsl(~~,~~,~~)の記述には、引数にJavaScriptの変数を用いる場合には、``(バック・クォーテーション）と記述部分を &{}で囲う、ということに注意してください。
さて、hslカラーの第一引数は、「色相」と呼ばれ、360度の円環に、虹色の各色がグラデーション 状に並んでいるという特色があります。
従って、第一引数を動かすだけで、存在する各色を自在に引き出せるのですが、rgbカラーでは、このようなことはできません。
rgbカラーにはもっと別の特色もあるのですが、このことについてはまた別の記事で書いてみようと思います。
最後に、hslカラーで作れる典型的なランダムカラーのソースコードを載せておきます。
See the Pen
Untitled by justmeet0924 (@justmeet0924)
on CodePen.
今回は色の観点から、プログラミングの面白さについて解説してみました。
よければ次回もお付き合いください。
それでは、また。
クリエイティブ・コーディング
See the Pen
Untitled by justmeet0924 (@justmeet0924)
on CodePen.
キャラクターのステージにおける動き
ゲーム製作において、①ステージの設計、②ステージにおけるキャラの振る舞い、の２点は表裏一体をなす重要な要素だ。ここで言うキャラとは、自分が操作するキャラクターではなく、敵キャラであったり、コンピューターがその動きを支配しているキャラのこと。
現在、3D空間を設計するにあたって、そこを縦横無尽に動き回るキャラが必要とされている。
何も動くもののない状態で、空間を設計しても、あまり意味はない。
そこを動くものがいて、そいつの動きを見ながら、そいつが動き回るのに最適な空間は何か、ということを考えながら、空間設計は進んでゆく。
例として、ヘビのようなものがいいのではないか、と考えている。
空間の隙間をするすると這い進んでいく。穴があればそこを進み、壁があれば、壁沿いに進んでいく。
このような動きをする3Dキャラクターの設計はどのようにしたらいいのだろうか。
現在このことで悩んでいる。
今日Blenderで3Dキャラにボーンを入れて、アニメーションさせてみたが、これは、想定するステージとは無縁に、ただそいつの動きだけをつけたものだ。（二足歩行のアニメーション）
実際にステージに配置した時、地形に合わせて動きが変わるようにしたいが、それはどのように実装するのか？
なかなか難しそうな課題だ。
