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 常用方法基础教程
Feb 06 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
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中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
小程序实现左滑删除效果
2019/07/25 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python中的yield使用方法
2014/02/11 Python
Python max内置函数详细介绍
2016/11/17 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
2014超市收银员工作总结
2014/11/13 职场文书
建国大业电影观后感
2015/06/01 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers