タートルグラフィクス(Promise版) - 非同期待機＋スムース行動

標準のタートルグラフィクスを少し改造し、カメの移動と回転を定速にしました。(Vに)カメ移動速度設定、(Vに)カメ回転速度設定でカメ毎に設定可能。また、即時実行されない命令はPromiseを返すので、「成功した時」の命令を使うことで命令が実際に完了時に何かをさせることができます。なお、描かれる図形はスムース行動ゆえに細切れになるため注意。また、画力(?)の都合でカメが仮置のカメしかいません（パンダとゾウは留守）

文法命令一覧

エディタ

プログラム

/**
 * Turtle Graphics for Web browser (nadesiko3)
 * plugin_turtl_promisee.js
 */

const turtleImage = 'https://n3s.nadesi.com/image.php?f=64.png'
const elephantImage = ''
const pandaImage = ''

let hasNext = this.doJobAll(time, wait, waitForTurteImage)
            if (hasNext) {
              this.fid = requestAnimationFrame(function (timestamp) { return me.play(timestamp) })
              return
            }
          }
          console.log('[TURTLE] finished.')
          me.flagSetTimer = false
          me.lastStart = 0
        },
        setupCanvas: function (sys) {
          // 描画先をセットする
          let canvasId = sys.__v0['カメ描画先']
          if (typeof canvasId === 'string') {
             canvasId = document.getElementById(canvasId) || document.querySelector(canvasId)
            sys.__v0['カメ描画先'] = canvasId
          }
          console.log('カメ描画先=', canvasId)
          const cv = sys._turtlePromise.canvas = canvasId
          if (!cv) {
            console.log('[ERROR] カメ描画先が見当たりません。' + canvasId)
            throw Error('カメ描画先が見当たりません。')
          }
          const ctx = sys._turtlePromise.ctx = sys._turtlePromise.canvas.getContext('2d')
          ctx.lineWidth = 4
          ctx.strokeStyle = 'black'
          ctx.lineCap = 'round'
          sys._turtlePromise.resizeCanvas(sys)
        },
        resizeCanvas: function (sys) {
          console.log('[TURTLE] resize canvas')
          const cv = sys._turtlePromise.canvas
          let rect
          try {
            rect = cv.getBoundingClientRect()
          } catch (e) {
            rect = {left:0, top:0, width:0, height: 0}
          }
          const rx = rect.left + window.pageXOffset
          const ry = rect.top + window.pageYOffset
          const v = (rect.width !== 0 && rect.height !== 0)
          sys._turtlePromise.canvas_r = {
            visible: v,
            'left': rx,
            'top': ry,
            width: v ? rect.width : cv.width,
            height: v ? rect.height : cv.height
          }
        },
        createTurtle: function (imageUrl, sys) {
          // キャンバス情報は毎回参照する (#734)
          sys._turtlePromise.setupCanvas(sys)
          const cv = sys._turtlePromise.canvas
          // カメの情報を sys._turtlePromise リストに追加
          const id = sys._turtlePromise.turtles.length
          const tt = {
            id: id,
            img: null,
            canvas: null,
            ctx: null,
            dir: 270, // 上向き
            cx: 32,
            cy: 32,
            x: 0,
            y: 0,
            color: 'black',
            lineWidth: 4,
            spdRotate: 15/100,
            spdMove: 10/100,
            flagDown: true,
            flagBegeinPath: false,
            f_update: true,
            flagLoaded: false,
            f_visible: true,
            jobType: '',
            jobs: [],
            substeps: [],
            substepType: ''
          }
          sys._turtlePromise.turtles.push(tt)
          sys._turtlePromise.target = id
          // 画像を読み込む
          tt.img = document.createElement('img')
          tt.canvas = document.createElement('canvas')
          tt.ctx = tt.canvas.getContext('2d')
          tt.canvas.id = id
          tt.img.onload = function () {
            tt.canvas.width = tt.img.width * 1.5
            tt.canvas.height = tt.img.height * 1.5
            tt.cx = tt.canvas.width / 2
            tt.cy = tt.canvas.height / 2
            tt.flagLoaded = true
            tt.f_update = true
            sys._turtlePromise.drawTurtle(tt.id)
            console.log('turtle.onload')
          }
          tt.img.onerror = function () {
            console.log('カメの読み込みに失敗')
            tt.flagLoaded = true
            tt.f_visible = false
            tt.f_update = true
            sys._turtlePromise.drawTurtle(tt.id)
          }
          tt.img.src = imageUrl
          tt.canvas.style.position = 'absolute'
          document.body.appendChild(tt.canvas)
          // デフォルト位置の設定
          tt.x = sys._turtlePromise.canvas_r.width / 2
          tt.y = sys._turtlePromise.canvas_r.height / 2
          return id
        }
      }
    }
  },

'!クリア': {
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      sys._turtlePromise.clearAll()
    }
  },

// @タートルグラフィックス・カメ描画
  'カメ作成': { // @タートルグラフィックスを開始してカメのIDを返す // @かめさくせい
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const imageUrl = sys.__v0['カメ画像URL']
      return sys._turtlePromise.createTurtle(imageUrl, sys)
    }
  },
  'ゾウ作成': { // @ゾウの画像でタートルグラフィックスを開始してIDを返す // @ぞうさくせい
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const imageUrl = elephantImage
      return sys._turtlePromise.createTurtle(imageUrl, sys)
    }
  },
  'パンダ作成': { // @パンダの画像でタートルグラフィックスを開始してIDを返す // @ぱんださくせい
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const imageUrl = pandaImage
      return sys._turtlePromise.createTurtle(imageUrl, sys)
    }
  },
  'カメ複製': { // @タートルグラフィックスを開始してカメのIDを返す // @かめふくせい
    type: 'func',
    josi: [['の','から']],
    pure: true,
    fn: function (t, sys) {
      const imageUrl = sys.__v0['カメ画像URL']
      let tt
      if (typeof sys === 'undefined') {
        sys = t
        t = null
      }
      if (t == null) {
        tt = sys._turtlePromise.getCur()
      } else {
        tt = sys._turtlePromise.turtles[t]
      }
      const tid = sys._turtlePromise.createTurtle(imageUrl, sys)
      sys._turtlePromise.turtles[tid].x = tt.x
      sys._turtlePromise.turtles[tid].y = tt.y
      sys._turtlePromise.turtles[tid].dir = tt.dir
      return tid
    }
  },
  'カメ操作対象設定': { // @IDを指定して操作対象となるカメを変更する // @かめそうさたいしょうせってい
    type: 'func',
    josi: [['に', 'へ', 'の']],
    pure: true,
    fn: function (id, sys) {
      sys._turtlePromise.target = id
    },
    return_none: true
  },
  'カメ数取得': { // @カメの数を取得する // @かめすうしゅとく
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      return sys._turtlePromise.turtles.length
    }
  },
  'カメ描画先': {type: 'var', value: 'turtle_cv'}, // @かめびょうがさき
  'カメ画像URL': {type: 'var', value: turtleImage}, // @かめがぞうURL
  'カメ画像変更': { // @カメの画像をURLに変更する // @かめがぞうへんこう
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (url, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['changeImage', url])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ速度': {type: 'const', value: 100}, // @かめそくど
  'カメ速度設定': { // @カメの動作速度vに設定(大きいほど遅い) // @かめそくどせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (v, sys) {
      sys.__v0['カメ速度'] = v
    }
  },
  'カメ移動': { // @カメの位置を[x,y]へ移動する // @かめいどう
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (xy, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['mv', xy[0], xy[1]])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ直接移動': { // @カメの位置を[x,y]へ移動する // @かめちょくせついどう
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (xy, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['directmv', xy[0], xy[1]])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ起点移動': { // @カメの描画起点位置を[x,y]へ移動する // @かめきてんいどう
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (xy, sys) {
    console.log('called')
    console.log(xy)
    console.log(sys)
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['xy', xy[0], xy[1]])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ進': { // @カメの位置をVだけ進める // @かめすすむ
    type: 'func',
    josi: [['だけ']],
    pure: true,
    fn: function (v, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['fd', v, 1])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ戻': { // @カメの位置をVだけ戻す // @かめもどる
    type: 'func',
    josi: [['だけ']],
    pure: true,
    fn: function (v, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['fd', v, -1])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ位置取得': { // @カメの位置([X,Y])を取得する // @かめいちしゅとく
    type: 'func',
    josi: [['の','から']],
    pure: true,
    fn: function (t, sys) {
      let tt
      if (typeof sys === 'undefined') {
        sys = t
        t = null
      }
      if (t == null) {
        tt = sys._turtlePromise.getCur()
      } else {
        tt = sys._turtlePromise.turtles[t]
      }
      return [tt.x, tt.y]
    }
  },
  'カメ角度取得': { // @カメの向き(度)を取得する // @かめかくどしゅとく
    type: 'func',
    josi: [['の','から']],
    pure: true,
    fn: function (t, sys) {
      let tt
      if (typeof sys === 'undefined') {
        sys = t
        t = null
      }
      if (t == null) {
        tt = sys._turtlePromise.getCur()
      } else {
        tt = sys._turtlePromise.turtles[t]
      }
      return tt.dir
    }
  },
  'カメ角度設定': { // @カメの向きをDEGに設定する // @かめかくどせってい
    type: 'func',
    josi: [['に', 'へ', 'の']],
    pure: true,
    fn: function (v, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['angle', parseFloat(v)])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ直接角度設定': { // @カメの向きをDEGに設定する // @かめちょくせつかくどせってい
    type: 'func',
    josi: [['に', 'へ', 'の']],
    pure: true,
    fn: function (v, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['directangle', parseFloat(v)])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ右回転': { // @カメの向きをDEGだけ右に向ける // @かめみぎかいてん
    type: 'func',
    josi: [['だけ']],
    pure: true,
    fn: function (v, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['rot', v, 1])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ左回転': { // @カメの向きをDEGだけ左に向ける // @かめひだりかいてん
    type: 'func',
    josi: [['だけ']],
    pure: true,
    fn: function (v, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['rot', v, -1])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメペン色設定': { // @カメのペン描画色をCに設定する // @かめぺんいろせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (c, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['color', c])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメペンサイズ設定': { // @カメペンのサイズをWに設定する // @かめぺんさいずせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (w, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['size', w])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメペン設定': { // @カメペンを使うかどうかをV(オン/オフ)に設定する // @かめぺんせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (w, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['penOn', w])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ移動速度設定': { // @カメペンが移動する際の速さをV(px/ミリ秒)に設定する // @かめいどうそくどせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (w, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['spdM', w])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ回転速度設定': { // @カメペンが回転する際の速さをV(度/ミリ秒)に設定する // @かめかいてんそくどせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (w, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['spdR', w])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメパス開始': { // @カメで明示的にパスの描画を開始する // @かめぱすかいし
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['begin'])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメパス閉': { // @カメでパスを明示的に閉じる(省略可能) // @かめぱすとじる
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['close'])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメパス線引': { // @カメでパスを閉じて、カメペン色設定で指定した色で枠線を引く // @かめぱすせんひく
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['stroke'])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメパス塗': { // @カメでパスを閉じて、カメ塗り色設定で指定した色で塗りつぶす // @かめぱすぬる
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['fill'])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ文字描画': { // @カメの位置に文字Sを描画 // @かめもじびょうが
    type: 'func',
    josi: [['を', 'と', 'の']],
    pure: true,
    fn: function (s, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['text', s])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ文字設定': { // @カメ文字描画で描画するテキストサイズやフォント(48px serif)などを設定 // @かめもじせってい
    type: 'func',
    josi: [['に', 'へ', 'で']],
    pure: true,
    fn: function (s, sys) {
      s = '' + s // 文字列に
      if (s.match(/^\d+$/)) {
        s = s + "px serif"
      } else if (s.match(/^\d+(px|em)$/)) {
        s = s + " serif"
      }
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['textset', s])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ塗色設定': { // @カメパスの塗り色をCに設定する // @かめぬりいろせってい
    type: 'func',
    josi: [['に', 'へ']],
    pure: true,
    fn: function (c, sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['fillStyle', c])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ全消去': { // @表示しているカメと描画内容を全部消去する // @かめぜんしょうきょ
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      sys._turtlePromise.clearAll()
    },
    return_none: true
  },
  'カメコマンド実行': { // @カメにコマンドSを実行する。コマンドは改行か「;」で区切る。コマンドと引数は「=」で区切り引数はかカンマで区切る // @かめこまんどじっこう
    type: 'func',
    josi: [['の', 'を']],
    pure: true,
    fn: function (cmd, sys) {
      const tt = sys._turtlePromise.getCur()
      const a = cmd.split(/(\n|\;)/)
      let p
      for (let i = 0; i < a.length; i++) {
        let c = a[i]
        c = c.replace(/^([a-zA-Z_]+)\s*(\d+)/, '$1,$2')
        c = c.replace(/^([a-zA-Z_]+)\s*\=/, '$1,')
        ca = c.split(/\s*,\s*/)
        p = sys._turtlePromise.queCommand(tt, ca)
      }
      sys._turtlePromise.setTimer()
      if (p == null) {
        p = new Promise(function (r) { return r(0) })
      }
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ非表示': { // @カメの画像を非表示にする。描画に影響しない。 // @かめひひょうじ
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['visible', false])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメ表示': { // @非表示にしたカメを表示する。 // @かめひょうじ
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      const tt = sys._turtlePromise.getCur()
      const p = sys._turtlePromise.queCommand(tt, ['visible', true])
      sys._turtlePromise.setTimer()
      if (sys.__genMode === '非同期モード') {
        sys.async = true
        p.finally(function () {return sys.nextAsync(sys)})
      }
      return p
    }
  },
  'カメクリック時': { // @ 操作対象のカメをクリックした時のイベントを設定する // @かめくりっくしたとき
    type: 'func',
    josi: [['を']],
    pure: false,
    fn: function (func, sys) {
      func = sys.__findVar(func, null) // 文字列指定なら関数に変換
      const tid = sys._turtlePromise.target
      const tt = sys._turtlePromise.turtles[tid]
      tt.canvas.onclick = function (e) {
        sys.__v0['対象'] = e.target
        return func(e, sys)
      }
    },
    return_none: true
  }
}

if (typeof process !== 'undefined' && typeof module !== 'undefined') {
  module.exports = PluginTurtlePromise
}

// scriptタグで取り込んだ時、自動で登録する
/* istanbul ignore else */
if (typeof (navigator) === 'object' && typeof (navigator.nako3)) 
  {navigator.nako3.addPluginObject('PluginTurtlePromise', PluginTurtlePromise)}

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ