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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
javascript列表框操作函数集合汇总
Nov 28 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 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
mayfish 数据入库验证代码
2010/04/30 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
Django实现分页显示效果
2019/10/31 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技