阅读更多

13顶
0踩

Web前端

原创新闻 超酷的js:永不停止的分形地毯之旅

2008-06-19 12:19 by 副主编 QQbyte 评论(7) 有12961人浏览


用简单的js就写了一个超酷的永不停止的分形地毯之旅,很强。

// chain( func ) // make func chainable by making it return itsReturnValue||this function chain( func ) { return function() { return func.apply( this, arguments )||this; } } // initialize everything onload = function() { // initialize the contexts and the fractal window.fx = { 'barCtx': document.getElementById('bar' ).getContext('2d'), 'fooCtx': document.getElementById('foo' ).getContext('2d'), 'logicCtx': document.getElementById('logic' ).getContext('2d'), 'renderCtx': document.getElementById('render').getContext('2d'), 'fractal': [0,0,0,0,2,0,0,0,0], CanvasRenderingContext2D: (window.CanvasRenderingContext2D?CanvasRenderingContext2D.prototype:document.getElementById('bar' ).getContext('2d').__proto__) } // set( what, to ) // sets a property of the CanvasRenderingContext2D, making such operation chainable window.fx.CanvasRenderingContext2D.set = function( what, to ) { this[what] = to; } // switchTo( context ) // return another CanvasRenderingContext2D, making such operation chainable window.fx.CanvasRenderingContext2D.switchTo = function( context ) { return context; } // chain a bunch of CanvasRenderingContext2D methods for( chainThat in {set:1,switchTo:1,clearRect:1,save:1,translate:1,rotate:1,drawImage:1,scale:1,restore:1,fillRect:1,moveTo:1,lineTo:1,beginPath:1,closePath:1,stroke:1,fill:1,arc:1} ) { window.fx.CanvasRenderingContext2D[chainThat] = chain( window.fx.CanvasRenderingContext2D[chainThat] ); } // let's get the party started render(); } // render() function render() { // the time is now var now = new Date().getTime(); // mutate the outer cells of the rug fx .fractal[ Math.floor(Math.random()*8+5)%9 ] = Math.floor( Math.random()*3 ); // softly kills the previous generations of the rug fx .fooCtx .set( 'fillStyle', 'rgba(0,0,0,.1)' ) .fillRect( 0, 0, 192, 192 ) .set( 'fillStyle', '653' ) .switchTo( fx.barCtx ) .clearRect( 0, 0, 192, 192 ); // render 1st generation of the rug for( var i=-1; i<9; fx.fooCtx.fillRect( (++i%3)*64+1,Math.floor(i/3)*64+1,(fx.fractal[i]&1)*62,(fx.fractal[i]&1)*62 )) { } // render next generations of the rug for( var j=0; j++<3; fx.fooCtx.drawImage( fx.barCtx.canvas,0,0 ) ) { for( var i=-1; ++i<9; fx.barCtx.drawImage( fx.fooCtx.canvas,0,0,192,192, (i%3)*64+1,Math.floor(i/3)*64+1, (fx.fractal[i]&2)*31, (fx.fractal[i]&2)*31 ) ) { } } // render rotozoomed rug fx .logicCtx .set( 'globalCompositeOperation', 'source-over' ) .clearRect( 0, 0, 256, 192 ) .save() .translate( 96, 96 ) .rotate( (now/5841%2)*Math.PI ) .scale( 1+2*((now/1274)%1), 1+2*((now/1274)%1) ) .drawImage( fx.fooCtx.canvas,0,0,192,192, -288,-288,576,576 ) .drawImage( fx.fooCtx.canvas,0,0,192,192, -96 ,-96 ,192,192 ) .drawImage( fx.fooCtx.canvas,0,0,192,192, -32 ,-32 ,64 ,64 ) .restore() .set( 'globalCompositeOperation', 'copy' ) // prepare for hypnoglow .switchTo( fx.renderCtx ) .set( 'globalCompositeOperation', 'source-over' ) .clearRect( 0, 0, 192, 192 ) .drawImage( fx.logicCtx.canvas, 0, 0 ) .set( 'globalCompositeOperation', 'lighter' ); // hypnoglow for( var i=-1; ++i<6; fx.renderCtx.drawImage( fx.logicCtx.drawImage( fx.logicCtx.canvas, 0, 0, 192>>i, 192>>i, 0, 0, 96>>i, 96>>i ).canvas, 0, 0, 96>>i, 96>>i, 0, 0, 192, 192 ) ) { } // here we go again setTimeout( render, 25 ); }
13
0
评论 共 7 条 请登录后发表评论
7 楼 silence_zw 2008-06-20 17:05
恩,和漂亮,顺便用opera9.5和firefox3打开测试,感觉opera快
6 楼 guojingxf 2008-06-20 08:57
真的很漂亮,不知道自己,什么时候,也能写一个出来!!
5 楼 deepthink 2008-06-19 23:05
这个方面没哟涉及过,不过看效果是挺棒的,以后可以考虑研究一下
4 楼 庄表伟 2008-06-19 22:04
真是酷极!
3 楼 ITeye管理员 2008-06-19 17:22
真是超漂亮!!
2 楼 Eastsun 2008-06-19 17:08
居然还被我找到了当时写的一个小软件,用来生成几个简单的分形,并且可以将分形局部放大(用鼠标选一个区域,然后在上面双击):
下载软件

1 楼 Eastsun 2008-06-19 16:49
曾经玩过一阵分形,这个东西蛮有意思的,在视觉角度上充分展现了数学之美:-)
国内有很多玩分形的,据我所知有个很牛X的叫张友邦
他做了个用来产生分形图片的程序(这类程序有很多,但优秀大多是国外大牛做的),非常棒。
这儿有一些分形图片。




发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JAVA-classpath理解和使用(classpath: classpath*:)

    classpath是java运行时环境搜索类和其他资源文件(比如jar\zip等资源)的路径。 classpath介绍、理解、使用。

  • Java中classpath讲解及使用方式

    Java中classpath讲解及使用方式

  • 一文搞懂什么是 classpath

    classpath 指的是类路径,也就是编译之后的target文件夹下的文件夹。maven工程中,类路径指的是,或者是下的路径就是类路径。或者在配置文件中看到如下配置:这样配置完之后 spring 就能找到对应文件。那么?classpath 指向的地方到底是哪里?如上图所示,classpath 指向的就是打war/jar包之后的classes的位置。而 classes 文件夹下就是我们原项目的java文件和resources文件夹里面的内容。

  • classpath

    classpath初步理解

  • java项目中的classpath到底指向的哪里

    今天在项目里看到好多地方都用到了类路径,并且自己对路径还不是很清楚,所以就在网上百度了一下! 上面图片的意思简单来说,就是classpath只能表示lib目录和WEB-inf/classes路径下的文件,calsspath不能表示的src路径下面的文件, 但是从项目结构来看,配置文件一般是不放在放在WEB-INF下面啊,并且也没有看到classes路径,lib目录不是放依赖ja...

  • 类路径属性(Class-Path)

    类路径属性(Class-Path)   MANIFEST.MF可通过Class-Path属性指定一个或多个相对URL,引用所需的JAR文件或目录。最后不以’/‘结尾的相对URL表示引用JAR文件,以’/'结尾表示目录。 Class-Path: fastjson.jar gson.jar config/beans.jar lib/ fastjson.jar gson.jar config/beans.jar,分别表示三个JAR lib/,表示lib目录及lib目录下所有JAR   在装载具有Class-

  • classpath到底是什么

    顾名思义,classpath就是class的path,也就是类文件(*.class的路径)。一谈到文件的路径,我们就很有必要了解一个java项目(通常也是web项目)它在真正运行时候,这个项目内部的目录、文件的结构。这样,我们才好分析、理解classpath。

  • CLASSPATH介绍

    1 前言 在使用eclipse或者myeclipse进行java项目开发的时候,每个project(工程)下面都会有一个.classpath文件,那么这个文件究竟有什么作用? 2 作用 .classpath文件用于记录项目编译环境的所有信息,包括:源文件路径、编译后class文件存放路径、依赖的jar包路径、运行的容器信息、依赖的外部project等信息。如果把该文件删除,则eclipse不...

  • 如何正确设置Java环境变量classpath

    在Java编程中,classpath是一个非常重要的环境变量,它指定了Java虚拟机(JVM)在运行时查找类文件的路径。在设置classpath之前,首先需要确定您的类文件所在的位置。通常,Java类文件位于所谓的"类路径"上,这是一个包含类文件的目录或JAR文件的集合。上述命令将把"/path/to/classes"添加到classpath中,以便JVM可以找到"MyApp"类的定义。在运行Java程序时,可以使用命令行参数"-classpath"或简写的"-cp"来指定classpath。

  • 类路径classpath与classpath*的区别

    两者的区别主要在于如何搜索和加载资源。classpath,即 class path(类的路径),Java 编译之后.class文件存在的路径。

  • java设置类路径_Java 什么是类路径,该如何设置?

    小编典典使用Java进行编程时,可以通过在源文件的顶部放置类似的代码来使其他类对正在编写的类可用:import org.javaguy.coolframework.MyClass;或者有时你通过说“批量导入”内容:import org.javaguy.coolframework.*;因此,稍后在你的程序中你说:MyClass mine = new MyClass();Java虚拟机将知道在哪里可以...

  • 路径classpath,classpath*,以及file:

    ./ 当前目录 ../上一层目录 /是根目录 1. classpath : 类路径,指的是编译后的字节码文件存储路径,一般为target目录下的classes目录(java项目),在web项目中指的是WEB-INF下的classes目录。实际上,两者其实是一致的,web项目的classes目录也是工程编译后的产物。 举个栗子 classpath:applicationContext....

  • classpath:与classpath*:的区别和详细解析

    在spring项目中,我们经常会在spring.xml或者web.xml中配置一些加载项,所以经常会用到classpath,但是classpath和classpath*加载有什么区别呢? classpath:只会到你指定的class路径中查找找文件。 classpath*:不仅包含class路径,还包括jar文件中(class路径)进行查找。...

  • java中classpath,classpath*,file的区别

    classpath 从项目编译后的根路径下开始寻找文件,也就是我们常说的classes路径 classpath*(不常用) 不仅包含class路径,还包括jar文件中(class路径)进行查找 file file指的是宿主机上的路径,也称作url,如果我们的项目在windows上跑,宿主机就是windows,在linux上跑,宿主机就是linux,如我们在这里做的静态映射 ...

  • classpath环境变量配置_classpath环境变量配置win10

    两个都对,但是【2】使用的比较普遍。 不是必须配置的,但是比如tomcat之类需要java环境变量的你不配置会起不起来的.如果只是使用eclipse做java开发,不配置也没影响(当然如果你要控制台编译代码的话是需要配置这个的).如果做web之类的那就配置上吧~。 一、安装JDK和Tomcat1,安装JDK:直接运行j...

  • java classpath 理解

    classpath就是类包的最顶层,对照下面这个图,应该理解的很清楚了: 在编译完项目后,会在target下生成classes,这个下面的路径就叫做类路径,对比上面的source 可以清楚的知道类路径具体指什么 classpath 和 classpath* 区别: classpath:只会到你的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar文件中(class路径)进行查找. ...

  • javac的命令(-Xbootclasspath、-classpath与-sourcepath等)

    当编译源文件时,编译器常常需要识别出类型的有关信息。对于源文件中使用、扩展或实现的每个类或接口,编译器都需要其类型信息。这包括在源文件中没有明确提及、但通过继承提供信息的类和接口。 例如,当扩展java.applet.Applet时还要用到Applet的祖先类:java.awt.Panel、java.awt.Container、java.awt.Component和...

  • 说说Java三种启动类路径

    在Java中,类路径(Classpath)是用来告诉Java虚拟机(JVM)在哪里查找类文件的路径。类路径可以分为三种不同的类型:启动类路径(Bootstrap Classpath)、扩展类路径(Extension Classpath)和用户类路径(User Classpath)。 启动类路径(Bootstrap Classpath): 启动类路径是用来加载Java核心类库(如java.lang、java.util等)的路径。 JVM在启动时会加载这些核心类,这些类通常位于JRE的lib目录下

  • 项目中Classpath路径

    1、classpath不是src,WEB-INF/classes,lib才是classpath,WEB-INF/ 是资源目录,客户端不能直接访问。 2、WEB-INF/classes目录存放src目录Java文件编译之后的class文件和各类配置文件 3、引用classpath路径下的文件,只需在文件名前加classpath: param-value>cl

  • 安装JDK时设置Path 和 Classpath

    一、设置Path   在安装好JDK程序后,在JDK安装目录下的bin目录中,会提供一些开发Java程序时必备的工具程序。对于Java的初学者,建议从命令符模式(cmd模式)来操作这些工具程序。可以通过”Win+R“,再输入“cmd”命令来打开命令符模式。   虽然你知道JDK的工具程序位于bin目录下,但操作系统并不知道如何找到这些工具程序。所以当输入“javac”尝试执行编译程序时,命令符

Global site tag (gtag.js) - Google Analytics