プログラミングⅠ

第10回

出席

今日もプログラミングで
人生の自由時間を
増やすために学びましょう！💪

アニメーション

アニメーションとは
連続した絵を瞬時に切り替えて
動いているように見せるもの

Nミリ秒毎に繰り返し

var i = 0;
function loop () {
    console.log(++i)
}
setInterval(loop, 100)

解説

width:1000px

1000ミリ秒 === 1秒

アニメーションは~30fpsなので、
30くらいを目安に指定するとよいかも

ではアニメーションを作っていきましょう！

width:300px

変数の定義

var size = 10
var speed = 3

円を描く関数を定義

var size = 10
var speed = 3

// 追加
function strokeCircle(x,y,radius) {
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.stroke()
}

var size = 10
var speed = 3

// 追加
function strokeCircle(x,y,radius) {
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.stroke()
}

function loop() {
}
setInterval(loop, 30)

loop関数内に追記

...
function loop() {
  //ここに追記していきます！
  strokeCircle(150, 150, size)
  size += speed
}
...


...
function loop() {
  // 以下追記
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)
  // 追記ここまで

  strokeCircle(150, 150, size)
  size += speed
}
...

...
function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  strokeCircle(150, 150, size)
  size += speed

  // 以下追記
  // 大きくなったら戻す
  if(size > 100) {
    size = 100
    speed *= -1
  }
  // 追記ここまで
}
...

...
function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  strokeCircle(150, 150, size)
  size += speed

  // 大きくなったら戻す
  if(size > 100) {
    size = 100
    speed *= -1
  } else if(size <= 0) { //ここから追加
    size = 0
    speed *= -1
  }
  // 追記ここまで
}
...

var size = 10
var speed = 3

function strokeCircle(x,y,radius) {
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.stroke()
}

function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  strokeCircle(150, 150, size)
  size += speed
  if(size > 100) {
    size = 100
    speed *= -1
  } else if(size <= 0) {
    size = 0
    speed *= -1
  }
}
setInterval(loop, 30)

width:300px

var x = 0
var y = 150
var size = 10
var speedX = 7

var x = 0
var y = 150
var size = 10
var speedX = 7
// 追記ここから
function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)
}

setInterval(loop, 30)
// 追記ここまで

...
function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  // 追記ここから
  ctx.fillStyle = 'black'
  ctx.fillRect(x, y, size, size)
  // 追記ここまで
}
...

...
function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  // 追記ここから
  x += speedX
  if(x <= 0 || (300 - size) <= x) speedX *= -1
  // 追記ここまで

  ctx.fillStyle = 'black'
  ctx.fillRect(x, y, size, size)
}
...

var x = 0
var y = 150
var size = 10
var speedX = 7

function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  x += speedX
  if(x <= 0 || (300 - size) <= x) speedX *= -1

  ctx.fillStyle = 'black'
  ctx.fillRect(x, y, size, size)
}

setInterval(loop, 30)

width:300px

var x = 0
var y = 150 // 追記
var size = 10
var speedX = 7
var speedY = 4 // 追記

function loop() {
  // 下地を白で塗りつぶす
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 300, 300)

  x += speedX
  y += speedY // 追記

  if(x <= 0 || (300 - size) <= x) speedX *= -1
  if(y <= 0 || (300 - size) <= y) speedY *= -1 // 追記

  ctx.fillStyle = 'black'
  ctx.fillRect(x, y, size, size)
}

setInterval(loop, 30)

課題

アニメーションを作ってみましょう！