laravel学习资料推荐,5分钟模拟

作者:澳门金莎娱乐网站

最近laravel很火,听朋友说也觉得很有意思,我就去试着学习了下,然后这里把我觉得一些不错的网站推荐给大家。当然如果还不知道laravel 是什么的,可以先问下度娘,连链接都给你们了,不要打我~

本课程转至实验楼项目课大赛5分钟模拟“透明计算”,若需转载请注明出处

  • 原创来自于博客

  • 中文版翻译于 有增改

  • 本文详细来自实验楼,如需转载请注明出处。

图片 1

透明计算相信大家都听说过,不知道的可自行百度。本实验课是一个科普实验,实验中可以学习到虚拟机及远程桌面基本概念,并自己动手搭建一个模拟透明计算的教学演示环境。

前言

不得不看的提示先放压缩过的html代码,把下段代码复制到你的新建的html文件用浏览器打开就能看到一个玫瑰。我们管它叫生产版好了,三步就能完成。

在文档的最后附上一个简单的开发版本,供大家自行定制 :-)

实验楼的虚拟机共享桌面就能让你喜欢的人看到哟~

图片 2共享桌面

共享桌面使用方法请猛戳这里

情人节这么浪漫的告白,快去试试吧,送她或者他一朵与众不同的玫瑰花

首先大家都知道国内IT的现状啦~所以如果英文比较好的人,建议还是去国外的网站上学习,不管怎么说,中文社区即使是翻译过来的精品文档也是有着自己的理解,所以看英文版的会更好的理解文章,更加的原汁原味。所以大家英文比较好的话,建议去以下网站:

注意事项

  1. 本课只是模拟透明计算的演示效果,形似而已,绝非实现透明计算,毕竟我并不清楚透明计算的具体的技术原理。实验中选用的技术只是用来快速搭建一个通过浏览器访问的远程桌面,与透明计算没有任何关联。
  2. 5分钟是敲命令和环境配置的时间,不含文档阅读时间及受实验楼网络影响的软件下载和虚拟机启动时间。
  3. 本课主要步骤参考爱鸟同学的“15分钟实现透明计算”,感谢爱鸟同学贡献了这么一篇详尽透彻的文章。

代码

<!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 ></canvas> <script> var b = document.body; var c = document.getElementsByTagName[0]; var a = c.getContext; document.body.clientWidth; </script> <script> withC=cos,S=sin,P=pow,R=random;c.width=c.height=f=600;h=-250;function p{ifreturn[S*(13+5/(.2+P-S*50,b*f+50,625+C*(13+5/(.2+P+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if{n=(j=c&1)?6:4;o=.5/+C*3-a*300;w=b*h;return[o*C+j*610-390,o*S+550-j*350,1180+C*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C/5+P(C+(B>0?w:-w))/25),30)*.1*,o/1e3+.7-o*w*3e-6]}if{c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S+620;return[o*C,28+C*99-b*b*b*60-z/2-h,z,(b*b*.3+P,7)*.15+.3)*b,b*.7]}o=A**;w=99-C*120-C*+C*50+c*2;z=o*S+700;return[o*C,B*99-C*50-c/3-z/1.35+450,z,*.9+a*.1, P/4+.05]}}setInterval('for(i=0;i<1e4;i++)if,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]*s[3]*-80)+")",a.fillRect}',0) </script> </body> </html> 

图片 3含苞待放的玫瑰

使用了多个不同的形状图来组成这朵代码玫瑰。共使用了31个形状:24个花瓣,4个萼片,2个叶子和1根花茎,其中每一个形状图都用代码进行描绘。

首先,来定义一个采样范围:

<script>function surface { // 使用a和b作为采样范围的参数 return { x: a*50, y: b*50 }; // 该表面是一个50*50单元区域}</script>

然后,编写形状描绘代码:

<script>var canvas = document.body.appendChild(document.createElement), context = canvas.getContext, a, b, position; for (a = 0; a < 1; a += .1) { for (b = 0; b < 1; b += .1) { position = surface; context.fillRect(position.x, position.y, 1, 1); }}</script>

这时,看到的效果是这样的:

图片 4效果1

现在,尝试一下更密集的采样间隔:

图片 5效果2正如现在所看到的,因为采样间隔越来越密集,点越来越接近,到最高密度时,相邻点之间的距离小于一个像素,肉眼就看不到间隔。为了不造成太大的视觉差,再进一步缩小采样间隔,此时,绘制区已经填满(比较结果为0.01和0.001)。

接下来,我用这个公式来绘制一个圆形:^ 2 +^ 2 <半径^ 2,其中为圆心:

<script>function surface { var x = a * 100, y = b * 100, radius = 50, x0 = 50, y0 = 50; if  *  +  *  < radius * radius) { // 圆内 return { x: x, y: y }; } else { // 圆外 return null; }}</script>

为了防止溢出,还要加上一个采样条件:

<script>if (position = surface { context.fillRect(position.x, position.y, 1, 1);}</script>

结果如下:

图片 6圆1

有不同的方法来定义一个圆,其中一些并不需要拒绝采样。我并无一定要使用哪一种来定义圆圈的意思,所以下面用另一种方法来定义一个圆:

<script>function surface { // 使用极坐标,快回去翻微积分吧! var angle = a * Math.PI * 2, radius = 50, x0 = 50, y0 = 50; return { x: Math.cos * radius * b + x0, y: Math.sin * radius * b + y0 };}</script>

图片 7圆2

(此方法相比前一个方法需要密集采样以进行填充。)好了,现在让圆变形,以使它看起来更像是一个花瓣:

<script>function surface { var x = a * 100, y = b * 100, radius = 50, x0 = 50, y0 = 50; if  *  +  *  < radius * radius) { return { x: x, y: y *  / 2 // 变形 }; } else { return null; }}

图片 8花瓣的形状

这看起来已经很像一个玫瑰花瓣的形状了。在这里也可以试试通过修改一些函数数值,将会出现很多有趣的形状。

接下来应该给它添加色彩了:

<script>function surface { var x = a * 100, y = b * 100, radius = 50, x0 = 50, y0 = 50; if  *  +  *  < radius * radius) { return { x: x, y: y *  / 2, r: 100 + Math.floor * 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 { context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")"; context.fillRect(point.x, point.y, 1, 1); } }}

图片 9红色的花瓣

一片带色的花瓣就出现了。

  • Laravel官网
  • API文档
  • laravel.io
  • LARACASTS

实验原理

用虚拟化技术启动一个Linux虚拟机(Tiny Core Linux),然后启动一个web服务(Guacamole)连接虚拟机的VNC桌面,最后达到用户可以通过浏览器访问虚拟机桌面的效果。

3D曲面和透视投影

定义三维表面很简单,比如,来定义一个管状物体:

<script>function surface { var angle = a * Math.PI * 2, radius = 100, length = 400; return { x: Math.cos * radius, y: Math.sin * radius, z: b * length - length / 2, // 减去一般的长度,使得焦点在三维坐标中心点 r: 0, g: Math.floor, b: 0 };}</script>

接着添加投影透视图,首先需要我们定义一个摄像头:

图片 10投影透视图

如上图,将摄像头放置在位置,画布在X / Y平面。投影到画布上的采样点为:

<script>var pX, pY, // 画布X和Y轴的坐标 perspective = 350, halfHeight = canvas.height / 2, halfWidth = canvas.width / 2, cameraZ = -700;for (a = 0; a < 1; a += .001) { for (b = 0; b < 1; b += .01) { if (point = surface { pX = (point.x * perspective) / (point.z - cameraZ) + halfWidth; pY = (point.y * perspective) / (point.z - cameraZ) + halfHeight; context.fillStyle = "rgb(" + point.r + "," + point.g + "," + point.b + ")"; context.fillRect(pX, pY, 1, 1); } }}</script>

图片 11

这几个网站都是相当不错的,英文好的大神可以去看下~

参考资料

本课程参考文章及用到的技术:

  • 15分钟实现透明计算
  • Guacamole HTML5远程桌面
  • QEMU虚拟化
  • Tiny Core Linux

在实验楼的桌面点击Xfce 终端,开始我们的学习旅程。

在打开的命令行窗口中输入下面的命令,因为用到了sudo,会提示你输入密码,实验楼的默认用户是shiyanlou,密码是shiyanlou

# 更新软件仓库shiyanlou:~/$ sudo apt-get update[sudo] password for shiyanlou: 此处输入shiyanlou# 安装guacamole,libvncserver及qemu,其中会询问是否重启tomcat,选择Yes即可shiyanlou:~/$ sudo apt-get install guacamole-tomcat libvncserver-dev qemu qemu-kvm# 安装guacamole到tomcat6shiyanlou:~/$ sudo mkdir /usr/share/tomcat6/.guacamoleshiyanlou:~/$ sudo ln -s /etc/guacamole/guacamole.properties /usr/share/tomcat6/.guacamole/

因为要启动虚拟机,所以我们需要一个虚拟机磁盘。实验楼环境启动大的Linux或Windows镜像时间会比较久,我们选择Tiny Core Linux,当然也可以选择ttylinux等其他的小型系统。

下载链接:

注意:如果觉得输入链接麻烦,可以直接点击桌面上方的剪刀,拷贝到实验环境。

在刚才的Xfce终端中输入下列命令:

# 下载TinyCore最新版ISO镜像,下载时间受实验楼的网络影响shiyanlou:~/$ wget http://www.tinycorelinux.net/6.x/x86/release/TinyCore-current.iso

shiyanlou:~/$ sudo qemu-system-x86_64 -hda TinyCore-current.iso -boot d -no-acpi -vnc :10

这个时候命令会卡住,不用担心,虚拟机已经启动了,打开另外一个Xfce 终端继续下面的命令吧。

命令执行截图:

图片 12图片描述信息

编辑guacamole的文件,让这个web服务后台去连接虚拟机的VNC桌面。

编辑命令:

你如果对vim的使用不熟练,可以将命令中的vim替换为gedit,类似windows上的记事本。

shiyanlou:~/$ sudo vim /etc/guacamole/user-mapping.xml

把下面这段文字:

<!--<authorize username="USERNAME" password="PASSWORD"> <protocol>vnc</protocol> <param name="hostname">localhost</param> <param name="port">5900</param> <param name="password">VNCPASS</param></authorize>-->

第一行的``删掉,即去掉了注释。

再把这段文字改为下面的内容:

<authorize username="touming" password="touming"> <protocol>vnc</protocol> <param name="hostname">localhost</param> <param name="port">5910</param> <param name="password">VNCPASS</param></authorize>

编辑完成后的内容:

图片 13图片描述信息

vim编辑完成后,需要按ESC键,再输入:wq保存文件。

# 重启guacamole后台服务及tomcatshiyanlou:~/$ sudo service guacd restartshiyanlou:~/$ sudo service tomcat6 restart

双击桌面上的Firefox浏览器,在浏览器中输入链接http://localhost:8080/guacamole,即可访问guacamole的页面,在页面中输入用户名touming及密码touming登录(第4步设置的用户名及密码)。

登录后点击DEFAULT即可进入我们刚刚创建的虚拟机桌面,如果你动作快的话现在可以看到TinyCore的启动画面,点进Web桌面敲下回车系统正式加载启动。

耐心等待1-2分钟,就可以看到TinyCore的桌面在浏览器中显示出来,恭喜你,你已经成功完成了本实验!

登录后的界面:

图片 14图片描述信息

浏览器里的TinyCore桌面:

图片 15图片描述信息

或许你还有疑问,我们一一解答:

z-buffer

z-buffer在计算机图形学中是一个相当普遍的技术,在为物件进行着色时,执行“隐藏面消除”工作,使隐藏物件背后的部分就不会被显示出来。

图片 16处理后的玫瑰

上图是用z-buffer技术处理后的玫瑰。(可以看到已经具有立体感了)

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 { 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>

本文由澳门金莎娱乐网站发布,转载请注明来源

关键词: