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

一句话说明：用有限的代码构建一个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;

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

赞 (0)

相关推荐

  • Javascript 绘制 sin 曲线过程附图

    Javascript 绘制 sin 曲线过程附图

    Javascript 绘制 sin 曲线代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> #MyCanvas { background-color: cornflowerblue; } </style> <script type="text/javascript"> function draw(){ var my_canvas

  • Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Ex

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

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

    一句话说明:用有限的代码构建一个1024*1024的颜色矩阵,秀出你的编程&艺术之美 起源于 stackexchange 上的一个问题, 这里稍微做了一下扩展,支持更多编程语言,并放宽了代码长度的限制. 规则 目标: 通过实现 模版 中的一个函数 get_color_at(x, y) ,在一个 1024*1024 的画布上画出尽可能 "有意思" 的图案. 参数: int x, int y ,取值均为 0 - 1023,对应画布上坐标点,左上角为起始点 (0,0) 返回: int

  • 9行javascript代码获取QQ群成员具体实现

    昨天看到一条微博:「22 行 JavaScript 代码实现 QQ 群成员提取器」. 本着好奇心点击进去,发现没有达到效果,一是 QQ 版本升级了,二是博客里面的代码也有些繁琐. 于是自己试着写了一个,算上空行才 9 行,麻雀虽小,五脏俱全. 复制代码 代码如下: var ids = document.querySelectorAll(".member_id"); var names = document.querySelectorAll(".member_name"

  • 200行Java代码编写一个计算器程序

    200行Java代码编写一个计算器程序

    发现了大学时候写的计算器小程序,还有个图形界面,能够图形化展示表达式语法树,哈哈;) 只有200行Java代码,不但能够计算加减乘除,还能够匹配小括号~ 代码点评: 从朴素的界面配色到简单易懂错误提示,无不体现了"用户体验"至上的设计理念:代码异常处理全面合理.滴水不漏,代码缩进优雅大方,变量命名直观易懂:再结合长度适中简单明了的注释,程序整体给人一种清新脱俗之感.背后不难看出作者对学习的热爱以及对设计的苛求,工匠精神可见一斑,真可谓是大学数据结构学以致用的典范! 实现代码如下所示:

  • 不到200行 JavaScript 代码实现富文本编辑器的方法

    前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小.而项目最核心的文件 pell.js 只有130行,即使加上其它部分,总的 js 数量也不到200行.这引起了我的兴趣,决定看看它的源码是如何做到这一点的. 项目的主要代码在 pell.js文件中,其结构很简单,主要功能的实现依赖于以下的几个部分 actions 对象 exec() 函数 init() 函数 Do

  • 一百行JS代码实现一个校验工具

    做过校验需求的小伙伴们都知道,校验其实是个麻烦事. 规则多,需要校验的字段多,都给我们前端带来巨大的工作量. 一个不小心,代码里就出现了不少if else等不可维护的代码. 因此,我觉得一个团队或者是一个项目,需要一个校验工具,简化我们的工作. 首先,参考一下 Joi.只看这一小段代码: Joi.string().alphanum().min(3).max(30).required() 我希望我的校验工具Coi也是链式调用,链式调用可以极大的简化代码. 校验呢,其实主要就3个入参:需要校验的数据

  • 小 200 行 Python 代码制作一个换脸程序

    简介 在这篇文章中我将介绍如何写一个简短(200行)的 Python 脚本,来自动地将一幅图片的脸替换为另一幅图片的脸. 这个过程分四步: 检测脸部标记. 旋转.缩放.平移和第二张图片,以配合第一步. 调整第二张图片的色彩平衡,以适配第一张图片. 把第二张图像的特性混合在第一张图像中. 1.使用 dlib 提取面部标记 该脚本使用 dlib 的 Python 绑定来提取面部标记: Dlib 实现了 Vahid Kazemi 和 Josephine Sullivan 的<使用回归树一毫秒脸部对准>

  • 微信小程序12行js代码自己写个滑块功能(推荐)

    效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &

  • 如何用120行Java代码写一个自己的区块链

    区块链是目前最热门的话题,广大读者都听说过比特币,或许还有智能合约,相信大家都非常想了解这一切是如何工作的.这篇文章就是帮助你使用 Java 语言来实现一个简单的区块链,用不到 120 行代码来揭示区块链的原理! "用不到120行 Java 代码就能实现一个自己的区块链!" 听起来不可思议吧?有什么能比开发一个自己的区块链更好的学习实践方法呢?那我们就一起来实践下! 因为我们是一家从事互联网金融的科技公司,所以我们采用虚拟资产金额作为这篇文章中的示例数据.大家可以先为自己想一个数字,后

  • 仅用500行Python代码实现一个英文解析器的教程

    仅用500行Python代码实现一个英文解析器的教程

    语法分析器描述了一个句子的语法结构,用来帮助其他的应用进行推理.自然语言引入了很多意外的歧义,以我们对世界的了解可以迅速地发现这些歧义.举一个我很喜欢的例子: 正确的解析是连接"with"和"pizza",而错误的解析将"with"和"eat"联系在了一起: 过去的一些年,自然语言处理(NLP)社区在语法分析方面取得了很大的进展.现在,小小的 Python 实现可能比广泛应用的 Stanford 解析器表现得更出色. 文章剩下

  • 让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    Ajax与pjax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新-无刷新操作. 但是,ajax应用也会造成另外的问题,容易导致浏览器无法前进与后退,这是个很头疼的问题,开发人员必须增加工作量(比如通过一个隐藏的iframe,或者改变location.ha

随机推荐