12行javascript代码绘制一个八卦图


Posted in Javascript onApril 02, 2015

一句话说明:用有限的代码构建一个1024*1024的颜色矩阵,秀出你的编程&艺术之美

起源于 stackexchange 上的一个问题, 这里稍微做了一下扩展,支持更多编程语言,并放宽了代码长度的限制。
规则

目标:
通过实现 模版 中的一个函数 get_color_at(x, y) ,在一个 1024*1024 的画布上画出尽可能 “有意思” 的图案。

参数:
int x, int y ,取值均为 0 - 1023,对应画布上坐标点,左上角为起始点 (0,0)

返回:
int r, int g, int b, int alpha, 对应颜色的 RGBA 分量,均为 0 - 255。

注意:
各语言中 alpha 分量定义可能不同,由 模版 统一转换为: 0 - 255,值越大越透明。

要求:
只能编辑 模版 中 get_color_at(x, y) 函数体内 // {{code start}} - // {{code end}} 间的代码;
代码总字符数不能超过 1024 个,且有较好的可读性。

if(typeof f_c=="undefined"){
  f_c=function(x,y,px,py,r){
    return Math.sqrt(Math.pow(x-px,2)+Math.pow(y-py,2))<=r;
  };
}
var x0=x-512,y0=y-512;
r=g=b=128;
if(f_c(x0,y0,0,0,512)) r=g=b=(x0>0)?255:0;
if(f_c(x0,y0,0,256,256)&&x0<=0) r=g=b=255;
if(f_c(x0,y0,0,-256,256)&&x0>0) r=g=b=0;
if(f_c(x0,y0,0,256,64)) r=g=b=0;
if(f_c(x0,y0,0,-256,64)) r=g=b=255;

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js innerHTML 改变div内容的方法
Aug 03 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
javascript实现随时变化着的背景颜色
Apr 02 #Javascript
javascript中call和apply的用法示例分析
Apr 02 #Javascript
原生js实现类似弹窗抖动效果
Apr 02 #Javascript
JavaScript显示表单内元素数量的方法
Apr 02 #Javascript
原创jQuery弹出层插件分享
Apr 02 #Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 #Javascript
Javascript获取表单名称(name)的方法
Apr 02 #Javascript
You might like
解析PHP工厂模式的好处
2013/06/18 PHP
PHP类的特性实例分析
2016/09/28 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
机械绘图员岗位职责
2013/11/19 职场文书
5.1手机促销活动
2014/01/17 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
岗位明星事迹材料
2014/05/18 职场文书
先进工作者推荐材料
2014/12/23 职场文书
初三语文教学计划
2015/01/22 职场文书
导游词300字
2015/02/13 职场文书
故意杀人案辩护词
2015/05/21 职场文书
春节晚会开场白
2015/05/29 职场文书
校园新闻稿范文
2015/07/18 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python