日更第10期-2015-3-25-processing教程-基础篇-第一讲-一个极其简单的图片显示工具

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

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 <stdio.h>

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

C++:

#include <iostream>


int main()
{
   std::cout<<"Hello world?"<<endl;
   return 0;
}

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