JavaScript实现ZLOGO: 前进方向和速度
系列前文:
- JavaScript实现ZLOGO子集: 前进+转向
- JavaScript实现ZLOGO子集: 单层循环功能
- JavaScript实现ZLOGO子集: 测试用例
- JavaScript实现ZLOGO: 用语法树实现多层循环
功能上, 添加了蚂蚁图标显示当前前进方向, 并可通过修改源码实现行进速度. 并未对语言本身进行改进. 另有一点界面改进. 源码仍在: program-in-chinese/quan3
在线演示仍在: 圈3
演示
默认2倍行进速度(相比之前)画田字格:
8倍行进速度画"轮胎" (LOGO源码链接):
无法粘贴大gif。详见原文:https://zhuanlan.zhihu.com/p/52434775
部分相关源码
下面是为添加蚂蚁和定制速度作的主要修改:
+ if (!指示方向图) { + 指示方向图 = createImg("图标/蚂蚁头向上.png") + 指示方向图.size(36, 34); + } + // TODO: 提取到二阶函数 绘制 = function() { var 当前序号 = 序号; + const 速度 = 2; background(255, 255, 255); for (var i = 0; i < 路径表.length; i++ ) { @@ -33,16 +41,20 @@ const 生成指令序列 = require("./语法树处理").生成指令序列 var 起点 = 段.起点; var 终点 = 段.终点; var 距离 = 段.长度; - if (当前序号 < 距离) { - line(起点.x, 起点.y, 起点.x + (终点.x - 起点.x) * 当前序号 / 距离, 起点.y + (终点.y - 起点.y) * 当前序号 / 距离); + if (当前序号 < 距离 / 速度) { + var 当前x = 起点.x + (终点.x - 起点.x) * 当前序号 * 速度 / 距离; + var 当前y = 起点.y + (终点.y - 起点.y) * 当前序号 * 速度 / 距离; + 指示方向图.position(当前x + 238, 当前y - 8); // TODO: 需要对准线头 + 指示方向图.style("transform", "rotate(" + (90 - 段.前进角度) + "deg)") + line(起点.x, 起点.y, 当前x, 当前y); break; } else { line(起点.x, 起点.y, 终点.x, 终点.y); - 当前序号 = 当前序号 - 段.长度; + 当前序号 = 当前序号 - 段.长度 / 速度; } } - 序号 ++; + 序号 += 速度; }
可能改进
- 蚂蚁图标在火狐下没有对准走线, 应该是上面TODO的问题
- 改进蚂蚁图标, 需在开始时就显示
- 可在界面直接修改行进速度, 隐藏蚂蚁
- 部分p5js API继续汉化, 如line, background
2018-12-14
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
手工翻译Vue.js源码:尝试重命名标识符与文本
续前文: 手工翻译Vue.js源码第一步:14个文件重命名 对core/instance/索引中的变量, 方法进行重命名如下(题图): import { 混入初始化 } from './初始化' import { 混入状态 } from './状态' import { 混入渲染 } from './渲染' import { 混入事件 } from './事件' import { 混入生命周期 } from './生命周期' import { warn } from '../util/索引' function Vue (选项) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue是构造器, 需要`new`调用') } this._init(选项) } 混入初始化(Vue) 混入状态(Vue) 混入事件(Vue) 混入生命周期(Vue) 混入渲染(Vue) export default Vue 发现不大理解的术语Mixin, 将至今所有翻译的术语小结后, 觉得需...
- 下一篇
[日常]mov文件转换为gif
因为需要将之前mac下用QuickTime录屏生成的文件(mov格式)转换成gif文件, 便于传到某些博客平台, 于是找到了这个转换工具, 已将原代码的命名中文化并简化. Ruby和视频转换都是新手, 请多指教. 之前JavaScript实现ZLOGO: 前进方向和速度有两个mov文件, 下面为转换出的gif: "轮胎":无法粘贴,详见原文:https://zhuanlan.zhihu.com/p/54832362 田字格: 下面是命名中文化后的源码. 注意: 需将mov文件置于media目录下, 并自行修改mov文件名和mov视频大小值. # encoding: utf-8 APP_ROOT = File.dirname(__FILE__) @@mov文件名 = "1214_田字格" class Converter @@mov视频大小 = "1032x542" # 查看mov文件属性 # Default path to ffmpeg installed by homebrew @@ffmpeg = File.join('/', 'usr', 'local', 'bin', 'ffmp...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度