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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue实现评价星星功能
Jun 30 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
自己前几天写的无限分类类
2007/02/14 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php链表用法实例分析
2015/07/09 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
python如何实现单链表的反转
2020/02/10 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
2015年国庆节寄语
2015/08/17 职场文书