博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
日更第10期-2015-3-25-processing教程-基础篇-第一讲-一个极其简单的图片显示工具...
阅读量:5046 次
发布时间:2019-06-12

本文共 3930 字,大约阅读时间需要 13 分钟。

---恢复内容开始---

Hi,今天我又来日更了!恩,已经三天了,不知道哪天就要结束了.......我还是尽量多持久。话说,博客园上的博客基本

都是属于大体量但是数量少的,大部分人的数量都小于10篇......看来我已经打败了30%以上(自己瞎猜的)博客了!

值得庆贺的第十一篇博客,那么我就开个新坑好了。

 

这一次我要开的坑是processing。虽然之前做of时就说过要做processing了,不过这一次还是比我预定要早的,不过,

有需求就会有产出,反正迟早都要做,不如现在就做!所以,今天开始processing的坑!of那边也会做的,不过要过

几天......而且要出java基础的教程了,还有processing成品(demo等级的)的教程,还要把网络部分的教程继续下去。

话说,上次我clone processing没成功......学校网坑死人。我打算再开新的教程讲讲别的用法还有别的好网站什么的。

 

那么,虽然今天废话比较多,还是开始教学了。

 

Processing溯源

 

其实,人类有一种本能——制造工具。更准确的说,是制造自己最顺手的工具。现在看来,这一习惯无疑是极其适合

人类发展的,因为从旧石器到新石器,再到铜器铁器,很明显工具的变化不仅是科技进步的成果,更是造成科技进步

的一大原因。

 

(我就盗图了,百度你来揍我啊!!^_^话说这表情还是真专注)

 

所以我扯了这么多是想干啥呢?其实,在程序员的世界中也是有着两种人的,其中一种就是制造成品的人,另一种是

制造工具的人。不过制作工具有另一种专门的称呼:造轮子。为什么?因为轮子是一种已经存在了的人造品,而且被

证明很有效。但是,你仍可以造各种各样的轮子:大的小的、粗的细的、有花纹的带刺的等等。

 

编程的工具更是如此:不同项目对于编程工具的要求往往千差万别——但是,每个工具之间虽然十分相像却又有着很大

的差距,学习使用一个新的工具总是要花费很多时间和精力。而且,对于初学者来说,有些工具就显得过于强大而难于

学习了。所以,processing就诞生了。它就是一个专注于展示与原型开发的工具;适于快速开发和算法效果展示。

of其实可以算是processing的C++翻版,不过我认为,of还是要更难一些——毕竟C++。而且processing还用自己的

ide,可以允许一些Java原生情况下不可能产生的写法,可以减少很多时间,对于Java来说简直是救急(笑)。

 

首先先感谢凯西 瑞思和本 弗莱两位mit的革命老前辈给我们这些懒懒的伪程序员提供了这样易用的工具,然后,开始

我们的第一个processing程序吧!

 

 

No,we'll not use “Hello world”!

 

很多的编程语言上来的第一个示范程序都长得一个样子,比如:

C:

#include 
int main(){ printf("Hello world!"); return 0; }

C++:

#include 
int main(){ std::cout<<"Hello world?"<

Java:

public static void main(String[] args){   System.out.println("Hello world!");   return; }

 

那么效果是什么呢?就是在又黑又小的控制台里输出一行文字:Hello world!这玩意有什么用啊!!!咱们学processing的肯定

不会这样!processing是以显示界面为前提的,不画图还玩个毛!好的,写个processing类的hello world!

ellipse(50,50,20,20);

对,就一行,你把这个输入到processing里面就好了。等下,你说你没有装Java?没有下processing?我这次不管。每次都要从

环境搭建开始讲简直浪费时间——交给Java的教程来说好了!就是这么简单粗暴。(不过以后会翻译processing官方的教程,里面

应该会有)

 

如果你点击一下开始按钮,你就会发现出现了一个四四方方的小窗口,里面有一个小圆。

(如图)

 

恭喜你,你已经做到了那些刚开始学C学半年都做不到的等级——图形界面了!

我来解释一下这行代码——ellipse()这个函数是用来画一个椭圆。你发现其中有四个参数,50,50,20,20前两个用于确定椭圆的位置,

后两个决定椭圆的宽度与高度。

 

如果继续介绍这些api下去的话,我可以再写个几百行,很明显那就不是一个教程了,所以我下面就进入我今天的整体:图像显示软件了。

不过API什么的,我会在别的文章里面写的。感兴趣的同学不要错过。

 

 

导入图像就是这么简单

 

首先讲讲一个比较有规模的processing程序的标准格式:

void setup(){  //calls only once  }void draw(){ //calls per tick}

什么意思呢?setup函数和draw函数,这两个函数,是你接入程序的入口,在setup里,你可以写一些第一次进入程序时需要

做的东西,draw中写那些每一帧要调用的东西。如果你看过我的of教程,就会发现,这与of中的setup函数和draw函数完全

一样;不过of里面还有update函数,个人觉得只是好看,并没有足够的必要性。

 

那么,我们来说说怎么导入图片。

 

在processing中,有一些预制好了的类型,比如XML,PFont,Pimage等等。其中,Pimage就是图片的预制类,可以支持

很多的格式。而且用起来也非常方便——马上就来试试。

 

你可以打开一下help里面的reference这一项,会召出一个网页,里面是processing的参考文档,是学习processing的第一手

资料,推荐大家多去查查。(这也是我使用pde的重要原因之一)找到里面的Pimage一项,你可以看到一个不错的例子。

 

PImage photo;void setup() {  size(100, 100);  photo = loadImage("laDefense.jpg");}void draw() {  image(photo, 0, 0);}

 

你如果直接点开会报错并且无法进行....毕竟没有文件。所以,现在去找一张图片来,然后把里面loadImage一句的“laDefense.jpg”

改成你选择的图片的名称。比如我选择了“chubbyTwo.jpg”这张图片——对了,以防万一,我说一下:图片要放在程序路径下。

 

然后你就可以看到如下图(图不一样效果肯定不一样)

 

好的,图片浏览器就讲到这里了!今天下课!

......我觉得这样应该还不够,算了,多讲点,算是特惠!

 

Level UP

 

那具体怎么提升呢?

首先我们看看PImage的文档,发现image函数有很多种参数,其中只有两个参数的这个是不可以重新指定大小的,

需要写四个参数的那个。加上的两个参数是宽度和高度。

(窗口默认尺寸是100X100,可以通过size函数改变)

(选择了二胖的照片,不知看到chubbyTwo时大家有没有想到)

 

然后我们发现还是不爽,这个拉伸的好难看啊!

没事,我们有法子!

 

介绍一个新函数map,它的作用是   映    射   。是不是觉得听不懂?恩,看来我翻译的不错!其实就是把一个数

从一个范围转到另一个范围。这里,我们打算把图片以原本的宽高比显示,空出来的用黑边,然后居中显示。

 

具体做法如下:

  1. 判断是宽大还是高大(因为这里的显示区域是宽高相等的,如果做不等的的话,就需要比宽高比)
  2. 把比较大的那个赋值为400,另一个用map映射为适应的大小
  3. 算出应该平移的大小
  4. 画图

然后,我直接贴代码:

PImage photo;int photoWidth=0;int photoHeight=0;int startX=0;int startY=0;void setup() {  size(400, 400);  photo = loadImage("chubbyTwo.jpg");  photoWidth  = photo.width;  photoHeight = photo.height;  if(photoWidth>photoHeight)  {    photoHeight = (int)map(photoHeight,0,photoWidth,0,400);    photoWidth  = 400;    startX = 0;    startY = (int)((400-photoHeight)/2.0);  }  else  {    photoWidth  = (int)map(photoWidth,0,photoHeight,0,400);    photoHeight = 400;    startY = (int)((400-photoWidth)/2.0);    startX = 400;  }}void draw() {  background(0);  image(photo, startX, startY,photoWidth,photoHeight);}

 

 

(效果图)

 

基本就是这样,可以到看到它在github上的样子,兴许我以后还会更新呢?

 

总之,明天见!!

---恢复内容结束---

转载于:https://www.cnblogs.com/linongbo/p/4367412.html

你可能感兴趣的文章
代码实现导航栏分割线
查看>>
Windows Phone开发(7):当好总舵主 转:http://blog.csdn.net/tcjiaan/article/details/7281421...
查看>>
VS 2010打开设计器出现错误
查看>>
SQLServer 镜像功能完全实现
查看>>
Vue-详解设置路由导航的两种方法
查看>>
一个mysql主从复制的配置案例
查看>>
大数据学习系列(8)-- WordCount+Block+Split+Shuffle+Map+Reduce技术详解
查看>>
dvwa网络渗透测试环境的搭建
查看>>
Win8 安装VS2012 和 Sql Server失败问题
查看>>
过点(2,4)作一直线在第一象限与两轴围成三角形,问三角形面积的最小值?...
查看>>
java aes CBC的填充方式发现
查看>>
使用ionic cordova build android --release --prod命令打包报有如下错误及解决方法
查看>>
BZOJ 2338 HNOI2011 数矩形 计算几何
查看>>
关于页面<!DOCTYPE>声明
查看>>
【AS3代码】播放FLV视频流的三步骤!
查看>>
C++标准库vector使用(更新中...)
查看>>
cocos2d-x 2.2.6 之 .xml文件数据读取
查看>>
枚举的使用
查看>>
BZOJ 1531 二进制优化多重背包
查看>>
BZOJ 2324 (有上下界的)费用流
查看>>