送ta一朵独一无二的玫瑰花
【情人節(jié)福利】JS實(shí)現(xiàn)玫瑰花
原創(chuàng)來自于博客 http://www.romancortes.com/blog/1k-rose/
中文版翻譯于http://www.csdn.net/article/2012-02-09/311621 有增改
本文詳細(xì)來自實(shí)驗(yàn)樓,如需轉(zhuǎn)載請注明出處。
前言
不得不看的提示
先放壓縮過的html代碼，把下段代碼復(fù)制到你的新建的html文件用瀏覽器打開就能看到一個玫瑰。我們管它叫生產(chǎn)版好了，三步就能完成。
在文檔的最后附上一個簡單的開發(fā)版本，供大家自行定制 :-)
情人節(jié)這么浪漫的告白，快去試試吧，送她或者他一朵與眾不同的玫瑰花
代碼（生產(chǎn)版）
<!DOCTYPE HTML> <html> <head> <title>Rose</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body style="margin-left:350px"> <canvas id="c"></canvas> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; </script> <script> with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=600;h=-250;function p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0) </script> </body> </html>詳細(xì)步驟
使用了多個不同的形狀圖來組成這朵代碼玫瑰。共使用了31個形狀：24個花瓣，4個萼片，2個葉子和1根花莖，其中每一個形狀圖都用代碼進(jìn)行描繪。
首先，來定義一個采樣范圍：
<script> function surface(a, b) { // 使用a和b作為采樣范圍的參數(shù)return {x: a*50,y: b*50};// 該表面是一個50*50單元區(qū)域 } </script>然后，編寫形狀描繪代碼：
<script> var canvas = document.body.appendChild(document.createElement("canvas")),context = canvas.getContext("2d"),a, b, position;for (a = 0; a < 1; a += .1) {for (b = 0; b < 1; b += .1) {position = surface(a, b);context.fillRect(position.x, position.y, 1, 1);} } </script>這時，看到的效果是這樣的：
現(xiàn)在，嘗試一下更密集的采樣間隔：
正如現(xiàn)在所看到的，因?yàn)椴蓸娱g隔越來越密集，點(diǎn)越來越接近，到最高密度時，相鄰點(diǎn)之間的距離小于一個像素，肉眼就看不到間隔（見0.01）。為了不造成太大的視覺差，再進(jìn)一步縮小采樣間隔，此時，繪制區(qū)已經(jīng)填滿（比較結(jié)果為0.01和0.001）。
接下來，我用這個公式來繪制一個圓形：（X-X0）^ 2 +（Y-Y0）^ 2 <半徑^ 2，其中（X0，Y0）為圓心：
<script> function surface(a, b) {var x = a * 100,y = b * 100,radius = 50,x0 = 50,y0 = 50;if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {// 圓內(nèi)return {x: x,y: y};} else {// 圓外return null;} } </script>為了防止溢出，還要加上一個采樣條件：
<script> if (position = surface(a, b)) {context.fillRect(position.x, position.y, 1, 1); } </script>結(jié)果如下：
有不同的方法來定義一個圓，其中一些并不需要拒絕采樣。我并無一定要使用哪一種來定義圓圈的意思，所以下面用另一種方法來定義一個圓：
（此方法相比前一個方法需要密集采樣以進(jìn)行填充。）
好了，現(xiàn)在讓圓變形，以使它看起來更像是一個花瓣：
這看起來已經(jīng)很像一個玫瑰花瓣的形狀了。在這里也可以試試通過修改一些函數(shù)數(shù)值，將會出現(xiàn)很多有趣的形狀。
接下來應(yīng)該給它添加色彩了：
<script> function surface(a, b) {var x = a * 100,y = b * 100,radius = 50,x0 = 50,y0 = 50;if ((x - x0) * (x - x0) + (y - y0) * (y - y0) < radius * radius) {return {x: x,y: y * (1 + b) / 2,r: 100 + Math.floor((1 - b) * 155), // 添加梯度g: 50,b: 50};} else {return null;} }for (a = 0; a < 1; a += .01) {for (b = 0; b < 1; b += .001) {if (point = surface(a, b)) {context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";context.fillRect(point.x, point.y, 1, 1);}} }
一片帶色的花瓣就出現(xiàn)了。
3D曲面和透視投影
定義三維表面很簡單，比如，來定義一個管狀物體：
<script> function surface(a, b) {var angle = a * Math.PI * 2,radius = 100,length = 400;return {x: Math.cos(angle) * radius,y: Math.sin(angle) * radius,z: b * length - length / 2, // 減去一般的長度，使得焦點(diǎn)在三維坐標(biāo)中心點(diǎn)(0,0,0)r: 0,g: Math.floor(b * 255),b: 0}; } </script>接著添加投影透視圖，首先需要我們定義一個攝像頭：
如上圖，將攝像頭放置在（0，0，Z）位置，畫布在X / Y平面。投影到畫布上的采樣點(diǎn)為：
z-buffer
z-buffer在計(jì)算機(jī)圖形學(xué)中是一個相當(dāng)普遍的技術(shù)，在為物件進(jìn)行著色時，執(zhí)行“隱藏面消除”工作，使隱藏物件背后的部分就不會被顯示出來。
上圖是用z-buffer技術(shù)處理后的玫瑰。(可以看到已經(jīng)具有立體感了)
talk is cheap, show the code!
<script> var zBuffer = [],zBufferIndex;for (a = 0; a < 1; a += .001) {for (b = 0; b < 1; b += .01) {if (point = surface(a, b)) {pX = Math.floor((point.x * perspective) / (point.z - cameraZ) + halfWidth);pY = Math.floor((point.y * perspective) / (point.z - cameraZ) + halfHeight);zBufferIndex = pY * canvas.width + pX;if ((typeof zBuffer[zBufferIndex] === "undefined") || (point.z < zBuffer[zBufferIndex])) {zBuffer[zBufferIndex] = point.z;context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";context.fillRect(pX, pY, 1, 1);}}} } </script>旋轉(zhuǎn)
你可以使用任何矢量旋轉(zhuǎn)的方法。在代碼玫瑰的創(chuàng)建中，我使用的是歐拉旋轉(zhuǎn)。現(xiàn)在將之前編寫的管狀物進(jìn)行旋轉(zhuǎn)，實(shí)現(xiàn)繞Y軸旋轉(zhuǎn)：
<script>var angle = a * Math.PI * 2,radius = 100,length = 400,x = Math.cos(angle) * radius,y = Math.sin(angle) * radius,z = b * length - length / 2,yAxisRotationAngle = -.4, // 弧度rotatedX = x * Math.cos(yAxisRotationAngle) + z * Math.sin(yAxisRotationAngle),rotatedZ = x * -Math.sin(yAxisRotationAngle) + z * Math.cos(yAxisRotationAngle);return {x: rotatedX,y: y,z: rotatedZ,r: 0,g: Math.floor(b * 255),b: 0}; } </script>蒙特卡羅方法
關(guān)于采樣時間，間隔過大過小都會引起極差的視覺感受，所以，需要設(shè)置合理的采樣間隔，這里使用蒙特卡羅方法。
<script> var i;window.setInterval(function () {for (i = 0; i < 10000; i++) {if (point = surface(Math.random(), Math.random())) {pX = Math.floor((point.x * perspective) / (point.z - cameraZ) + halfWidth);pY = Math.floor((point.y * perspective) / (point.z - cameraZ) + halfHeight);zBufferIndex = pY * canvas.width + pX;if ((typeof zBuffer[zBufferIndex] === "undefined") || (point.z < zBuffer[zBufferIndex])) {zBuffer[zBufferIndex] = point.z;context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")";context.fillRect(pX, pY, 1, 1);}}} }, 0); </script>設(shè)置a和b為隨機(jī)參數(shù)，用足夠的采樣完成表面填充。我每次繪制10000點(diǎn)，然后靜待屏幕完成更新。
另外需要注意的是，如果隨機(jī)數(shù)發(fā)生錯誤時，表面填充效果會出錯。有些瀏覽器中，Math.random的執(zhí)行是線性的，這就有可能導(dǎo)致表面填充效果出錯。這時，就得使用類似Mersenne Twister（一種隨機(jī)數(shù)算法）這樣的東西去進(jìn)行高質(zhì)量的PRNG采樣，從而避免錯誤的發(fā)生。
完成源碼（開發(fā)版）
<!DOCTYPE HTML> <html> <head> <title>Rose</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body style="margin-left:200px"> <div style="text-align: center"> <canvas id="c"></canvas> </div><script type="text/javascript">var canvas = document.getElementsByTagName('canvas')[0];var context = canvas.getContext('2d'); var a = context; var b = document.body;var c = canvas;document.body.clientWidth; var zBuffer = []; var SIZE = 777;canvas.width = canvas.height = SIZE;var h = -350; function surface(a, b, c) { if (c > 60) { return { x : Math.sin(a * 7) * (13 + 5 / (.2 + Math.pow(b * 4, 4))) - Math.sin(b) * 50, y : b * SIZE + 50, z : 625 + Math.cos(a * 7) * (13 + 5 / (.2 + Math.pow(b * 4, 4))) + b * 400, r : a * 1 - b / 2, g : a }; } var A = a * 2 - 1;var B = b * 2 - 1; if (A * A + B * B < 1) {if (c > 37) { var j = c & 1; var n = j ? 6 : 4; var o = .5 / (a + .01) + Math.cos(b * 125) * 3 - a * 300; var w = b * h; return { x : o * Math.cos(n) + w * Math.sin(n) + j * 610 - 390, y : o * Math.sin(n) - w * Math.cos(n) + 550 - j * 350, z : 1180 + Math.cos(B + A) * 99 - j * 300, r : .4 - a * .1 + Math.pow(1 - B * B, -h * 6) * .15 - a * b * .4 + Math.cos(a + b) / 5 + Math.pow(Math.cos((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), g : o / 1e3 + .7 - o * w * 3e-6}; }if (c > 32) { c = c * 1.16 - .15; var o = a * 45 - 20; var w = b * b * h; var z = o * Math.sin(c) + w * Math.cos(c) + 620; return { x : o * Math.cos(c) - w * Math.sin(c), y : 28 + Math.cos(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z : z, r : (b * b * .3 + Math.pow((1 - (A * A)), 7) * .15 + .3) * b, g : b * .7 }; }var o = A * (2 - b) * (80 - c * 2); var w = 99 - Math.cos(A) * 120 - Math.cos(b) * (-h - c * 4.9) + Math.cos(Math.pow(1 - b, 7)) * 50 + c * 2; var z = o * Math.sin(c) + w * Math.cos(c) + 700; return { x : o * Math.cos(c) - w * Math.sin(c), y : B * 99 - Math.cos(Math.pow(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z : z, r : (1 - b / 1.2) * .9 + a * .1, g : Math.pow((1 - b), 20) / 4 + .05 }; } } setInterval(function() { for ( var i = 0; i < 10000; i++) { var part = i % 46; var c = part / .74; var point = surface(Math.random(), Math.random(), c); if (point) { var z = point.z; var x = parseInt(point.x * SIZE / z - h); var y = parseInt(point.y * SIZE / z - h); var zBufferIndex = y * SIZE + x; if ((typeof zBuffer[zBufferIndex] === "undefined") || (zBuffer[zBufferIndex] > z)) { zBuffer[zBufferIndex] = z; var r = -parseInt(point.r * h); var g = -parseInt(point.g * h); var b = -parseInt(point.r * point.r * -80); context.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; context.fillRect(x, y, 1, 1); } } } }, 0); </script></body> </html>為了使玫瑰的每個部分在同一時間完成并呈現(xiàn)，還需要添加一個功能，為每部分設(shè)置一個參數(shù)以返回值來進(jìn)行同步。并用一個分段函數(shù)代表玫瑰的各個部分。比如在花瓣部分，可以使用旋轉(zhuǎn)和變形來創(chuàng)建它們。
雖然表面采樣方法是創(chuàng)建三維圖形非常著名的、最古老的方法之一，但這種把蒙特卡羅、z-buffer加入到表面采樣中的方法并不常見。對于現(xiàn)實(shí)生活場景的制作，這也許算不上很有創(chuàng)意，但它簡易的代碼實(shí)現(xiàn)和很小的體積仍令人滿意。
快去做一朵與眾不同的玫瑰送給你的那個她/他吧！
Happy Valentine’s Day
- 本文詳細(xì)來自實(shí)驗(yàn)樓,如需轉(zhuǎn)載請注明出處。
總結(jié)
以上是生活随笔為你收集整理的送ta一朵独一无二的玫瑰花的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Laravel大型项目系列教程（五）之文
- 下一篇： laravel大型项目系列教程（六）之优