关键词：
Art of Logarithm
----------------
click to change
A [Pen](https://codepen.io/jagarikin/pen/aRYgrE) by [jagarikin](https://codepen.io/jagarikin) on [CodePen](https://codepen.io).
[License](https://codepen.io/jagarikin/pen/aRYgrE/license).
<canvas onclick="init();"></canvas>
var canvas,ctx,kk,ch,pt,p2,tp,nm,kan,tx,ty,tim,tm,gbai,pr;
(function()
var a,b,r;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
ctx.lineWidth=2;
a=Object.getOwnPropertyNames(Math);
for(b=0;b<a.length;b++)
window[a[b]]=Math[a[b]];
kk=[];
r=0;
for(a=0;a<8;a++)
kk.push([cos(r),sin(r)]);
r+=PI*2/8;
l2=log(2);
pr=pow(2,0.5);
pt=[];
ch=[];
sik(0,0,240,0,0);
tp=0;
kan=1;
nm=0;
dsk();
)();
function init()
tp=(tp+1)%3;
if(!tp)
kan=1;
nm=0;
else if(tp==1)
kan=2;
nm=0;
else if(tp==2)
kan=1;
nm=1;
function sik(tx,ty,s,omo,ban)
var a,b,c,r,p,o,x,y;
a=(floor(tx*100))+"a"+(floor(ty*100))+"a"+ban;
if(ch[a])return;
ch[a]=1;
if(ban>5 && abs(tx)>250 || abs(ty)>250)return;
if(!pt[ban])pt[ban]=[];
r=0;
if(omo)r=PI/4;
p=[];
for(a=+omo;a<8;a+=2)
x=kk[a][0]*s;
y=kk[a][1]*s;
p.push([tx+x,ty+y]);
o=;
o.x=tx;
o.y=ty;
o.s=s;
o.omo=+omo;
o.ban=ban;
a=atan2(ty,tx);
o.r=a/PI/2+0.5;
a=pow(ty*ty+tx*tx,0.5);
a=log(a)/log(2);
if(a<3)a=3;
o.han=floor(a+o.r);
pt[ban].push(o);
if(ban<12)
ban++;
s/=pr;
for(a=0;a<4;a++)
sik(p[a][0],p[a][1],s,!omo,ban);
function his(o,bai)
var a,b,c,r,x,y;
r=0;
if(o.omo)r=PI/4;
if(abs(o.x*gbai)>250 || abs(o.y*gbai)>250)return;
a=(o.ban+bai+(tm)*4)/6*360;
ctx.strokeStyle="hsl("+(a%360)+",80%,60%)";
ctx.beginPath();
for(a=o.omo;a<8;a+=2)
x=kk[a][0]*o.s*bai*gbai;
y=kk[a][1]*o.s*bai*gbai;
ctx.lineTo(tx+o.x*gbai+x,ty+o.y*gbai+y);
ctx.closePath();
ctx.fill();
ctx.stroke();
function dsk()
var a,b,c,d,e,p,o;
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle="#000";
ctx.fillRect(0,0,canvas.width,canvas.height);
tim=new Date().getTime()/30;
tx=canvas.width/2;
ty=canvas.height/2;
gbai=1;
tm=((tim/100)%1);
gbai=pow(2,tm);
for(b=2;b<12;b++)
p=pt[b];
for(a=0;a<p.length;a++)
o=p[a];
c=o.r;
d=o.han;
e=(d-c+tm*3)+1;
if(nm)e+=sin(c*PI*6+tim/40);
c=(e)%1;
e=floor(e);
if(e>=o.ban+kan)his(o,1);
if(e==o.ban)his(o,c);
requestAnimationFrame(dsk);
*
margin: 0;
padding: 0;
border: 0;
background: #000000
canvas
position: relative; top:50%;
left:50%;
margin-left:-50vmin;
width:100vmin;
height:100vmin;
overflow:hidden;
display: block;
css3艺术:网页设计案例实战之angular实现序(代码片段)
最近看见一本比较好的书《CSS3艺术:网页设计案例实战》。该书作者，用详实的语言、丰富的经验组织css3各个方面的特点。我在css方面认识几乎是零，想学习学习，看完前面三章之后，我想重新复习一下前面章节... 查看详情
css3艺术:网页设计案例实战之angular实现一数据准备(代码片段)
《CSS3艺术:网页设计案例实战》的目录，按照章节，进行二级数据组织，以便于导航。1、在src/app文件夹下，建立model文件夹2、在model文件夹中，建立section.model.ts文件，并建立Section类，用于存放“节”ex... 查看详情
离谱的css！从表盘刻度到剪纸艺术(代码片段)
关注公众号 前端开发博客，领27本电子书回复加群，自助秒进前端群某日，群里有这样一个问题，如何实现这样的表盘刻度：这其实是个挺有意思的问题，方法也有很多。单标签，使用conic-gradient实现... 查看详情
css3艺术:网页设计案例实战之angular实现四实现头部和底部的导航(代码片段)
一、修改第一章介绍的html修改后的文件(src\\app\\chapter01\\chapter01-introduce\\chapter01-introduce.component.html)如下:<p>1、本章将回顾CSS中重要的基本概念。</p><p>2、本章提供了29个示例。</p><p> 查看详情
css3艺术:网页设计案例实战之angular实现一数据准备(代码片段)
《CSS3艺术:网页设计案例实战》的目录，按照章节，进行二级数据组织，以便于导航。1、在src/app文件夹下，建立model文件夹2、在model文件夹中，建立section.model.ts文件，并建立Section类，用于存放“节”ex... 查看详情
css3艺术:网页设计案例实战之angular实现四实现头部和底部的导航(代码片段)
...mall></p><p>3、读完本章，就会发现用CSS创作艺术作品是一种快乐的体验。</p>二、修改第一章第一节的html修改后的文件(src\\app\\chapter01\\chapter0101\\chapter0101.component.html)如下:<h2>1.1CSS简介</h2><p> ... 查看详情
textascii艺术(代码片段)
查看详情
text艺术(代码片段)
查看详情
java艺术(代码片段)
查看详情
css3艺术:网页设计案例实战之angular实现序(代码片段)
最近看见一本比较好的书《CSS3艺术:网页设计案例实战》。该书作者，用详实的语言、丰富的经验组织css3各个方面的特点。我在css方面认识几乎是零，想学习学习，看完前面三章之后，我想重新复习一下前面章节... 查看详情
shascii艺术块(代码片段)
查看详情
web前端期末大作业-响应式艺术培训机构网页设计（bootstrap+html+css+javascript+）实现(代码片段)
🍅作者主页：Java李杨勇 🍅简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】🍅 文末获取源码联系 🍅 临近期末,你还在... 查看详情
实例：雪景艺术绘图(代码片段)
雪景艺术绘图 turtle艺术绘制图形艺术，指利用turtle库画笔创造性绘制绚丽多彩艺术图形的过程 turtle图形艺术效果中隐含着很多随机元素，如随机颜色、尺寸、位置和数量等。在图形艺术绘制中需要引入随机函数库random。... 查看详情
javajava函数以对数时间运行。(代码片段)
查看详情
sqlhive对数，验数数据校验(代码片段)
查看详情
text结束（键盘艺术）(代码片段)
查看详情
给逆序对数求原数组(代码片段)
文章目录给正序对数求原数组给逆序对数求原数组（原数各不相同给逆序对数求原数组（原数可相同给正序对数求原数组假设正序对数是0 1 2 1 20\\;1\\;2\\;1\\;201212解决:先管正序对数小的，从小往大放正... 查看详情
给逆序对数求原数组(代码片段)
文章目录给正序对数求原数组给逆序对数求原数组（原数各不相同给逆序对数求原数组（原数可相同给正序对数求原数组假设正序对数是0 1 2 1 20\\;1\\;2\\;1\\;201212解决:先管正序对数小的，从小往大放正... 查看详情