很多Processing互动媒体爱好者总是在PC电脑里演示他们的作品,应该很少有人把作品搬到安卓手机的屏幕上演示,主要原因是Processing程序如何在安卓手机上运行的方法,中文资料很少或者没有,外文倒是有,但说的也不全。所以这里我们公布下,也方便大家表达自己的创意。

 第一步:  安装JDK

   JDK(Java Development Kit)是整个Java的核心,包括一系列Java开发的东西 。

jdk-8u25-windows-i586.exe下载:

http://pan.baidu.com/s/1gdKjMh1

把JDK下载,安装即可。  

第二步:  安装Android SDK

Windows 操作系统

installer_r24.0.1-windows.exe下载

http://pan.baidu.com/s/1nt60ulb

    下载安装后,64位PC机默认放在C:\Program Files(X86)文件夹下,32位PC机默认放在C:\Program Files文件夹下。我的PC机是64位,但我在安装还是改了安装位置,从C:\Program Files(X86)改到C:\Program Files。当然也可以不改。

具体位置如下:

图1

    然后到windows7操作系统→开始,找到Andriod SDK Tools→SDK Manager,点击。

 

图2

     出现下面画面。

图3

    先不要急着操作,等待Andriod SDK Manager管理器 “Fetch URL”,出现“Done loading packages”,我勾选了下图所示的这些选项,这是我费很长时间安装好的,可能安装时还要“翻墙”。注意勾选时,Update/new前面的√要有,默认是有的,只是下图我让大家看看,我的系统已经安装了哪些选项时,才把Update/new前面的√切换掉了。

   注:由于Android系Google产品,中国大陆无法访问上述页面或下载链接时,请自行使用vpn代理翻墙。

 

图4

    点击Install packages...啊,开始安装

第三步:  安装Processing

1.  下载安装新版Processing 3.0a4软件 

 下载网址:https://www.processing.org/download/?processingHLv

  打开Processing 3.0a4软件 ,点击Processing可执行文件,即可进入编程环境。居然新版的Processing 3.0a4软件可以自动变为中文环境。

第四步:  连接SDK与Processing

    现在 Processing 和 Android SDK 都安装好了,该把他们连起来了.

   打开 Processing.可以看到在顶部右上角有个写着 “Java”的小窗口.  点击添加模式...

图5

    点击添加模式...,出现Mode Manager窗口,点击AndriodMode “安装”按钮。注意要打开互联网并且执行“翻墙” 。

图6

 图7

   点击图7左上角下拉菜单的“Andriod”选项。

 完成之后会出现弹窗询问 SDK 是否安装窗口点击 “Locate SDK path manually”。

 

图8

   图8找到刚才安装的Android SDK 安装的位置,点击 “打开”,如果找不到Android SDK 安装的位置,可以在图2所示“SDK manager”​选项处点击鼠标右键,在随之出现的快捷菜单中选择“属性”,就可以找到目标位置了。

 图9

    然后,你的 Processing编程环境,变成了可以向手机下载Andriod程序的环境,如下。

图10

   好样的!这样 Android SDK 和 Processing 就连接好了,你也可以开始开发自己的应用了。

 

第五步:Processing程序下载到安卓手机

     首先在你的手机,点击安卓手机界面,设备→应用程序,把“未知来源”的√打上。点击设备→应用程序→开发,把“USB调试”的的√打上。

  安装手机驱动,我是采用了360手机助手。当你的手机USB线一插到PC机USB插座上。手机驱动会自动安装的。我的手机是华为的C8813,版本:Andriod 4.1 。

   360手机助手软件界面上,点击“我的手机”,可以看到“华为C8813 已通过USB连接”,界面下方的图片显示实时的手机画面。

 

图11   

    将手机与电脑连接,然后将Processing程序Java环境改成Andriod环境下运行。如下图左上角小窗口处,已经切换为Andriod环境。注意编程或者修改程序时,编程环境要为Java,而下载到手机时,要切换为Andriod环境。

   下面Processing程序的任务是:Processing画布上方是一个可以变半径的螺旋线,下方为滑块可以移动的水平标尺。当滑块向右滑动时,8圈螺旋线半径增大,给人的感觉为“卷弹簧”松开,当滑块向左滑动时,8圈螺旋线半径缩小,“卷弹簧”旋紧。

图12

   程序编好后,将程序Java环境改成Andriod环境,点击“播放”运行按钮,开始通过USB下载程序到安卓手机,下载成功后消息栏中会显示“Sketch launched on the device”,这就说明,你的Procesing程序已经安装到手机上了,赶快找到它,如下图所示,点击运行看看,看看这与PC机上运行程序是不是感觉更高科技些。

 

图13

   点击这个图标,也就是你给这个Processing程序命名的文件名。

 

图14

    这么规范的实时手机画面,我利用360手机助手人机界面上反馈的手机画面,截图而成的。

   至此,Processing程序在安卓手机上运行的方法就介绍完毕,enjoy!

Processing程序:

float add_val;//定义螺旋线半径增加值
float mouseX_keep;//定义变量,用于保存鼠标当前X值
//画螺旋线子程序
void Helix(float add_val){
 float radius = 1.0;//螺旋线初始点半径
 //螺旋线转动角度范围0到360*8
 //螺旋线每转动2度,半径就增加一个增量
 //通过for结构,产生螺旋线效果
 for (int deg = 0; deg < 360*8; deg += 2) {
    float angle = radians(deg);
    float x = 200 + (cos(angle) * radius);
    float y = 350 + (sin(angle) * radius);
    //螺旋线上每个点都是一个绿色实心圆
     fill(0,255,0);//定义螺旋线的填充色为绿色
    ellipse(x, y, 6, 6);
    //螺旋半径每转动2度增加一次
    radius = radius +add_val;
 }
}
//初始化
void setup()
{
 //定义画布大小
 size(400,750); //绘制一个宽度为600像素,高度为750像素的画布
   noStroke();//不绘制图形的轮廓线
 smooth();//开启抗锯齿功能,使线条轮廓光滑
   mouseX_keep=20;//设置鼠标光标位于水平标尺的初始位置
   add_val=0.04; //当螺旋线旋转中心旋转角度不断增加时,
                  //螺旋线上的各点距离旋转中心的半径增加值
}
//主程序
void draw(){
 background(126);//设置画布背景灰度等级,数值范围0~255,数值越小越黑
 //在画布的下方水平画一个狭长的矩形,并填充黑色,以形成一条粗线
 //这个粗线就是滚动条的水平标尺
 rect(20,695,360,10);
 fill(0);
 //如果鼠标左键按下
 if(mousePressed)
 {
    //如果鼠标光标相对于画布左上角原点的X坐标值在20到580之间
    if(mouseX>20 && mouseX<380)
    {
      //坐标平移的影响范围在pushMatrix()与 popMatrix()之间的语句
      pushMatrix();
      //将原点从画布的左上角移动到X坐标为mouseX,Y坐标为700处
      translate(mouseX,700);     
      ellipse(0,0,33,33);//以新坐标原点画直径为33的圆
      fill(255);//圆内填充为白色
      //白色圆的位置只受鼠标X坐标值的影响,而它的Y坐标值始终为700
      //这个白色的圆就是水平标尺上的滑块,
      //白色的圆只能约束在水平标尺上,随鼠标X值的变化而移动    
      popMatrix();//恢复坐标原点到画布的左上角
      //把区间在20到580的mouseX当前值正比换算为区间0.04到0.2的值
      //这个算式的执行,可以使鼠标X当前值成正比地影响螺旋线半径增加值
      add_val = map(mouseX, 20, 480, 0.04, 0.16);  
      Helix(add_val); //调用画螺旋线子程序 
    }
    //当鼠标当前X值小于等于水平标尺左端点的X值时,白色会固定在其左端点
    //同时螺旋线半径增加值最小
    else if(mouseX<=20)
    {
      fill(255);
      ellipse(20,700,33,33);
      Helix( 0.04);
    }
    //当鼠标当前X值大于等于水平标尺右端点的X值时,白色会固定在其右端点
    //同时螺旋线半径增加值最大
    else if(mouseX>=380)
    { 
      fill(255);
      ellipse(380,700,33,33);
      Helix( 0.16);    
    }
    mouseX_keep=mouseX; 
 }
 //当鼠标左键松开时,螺旋线的形状不变
 else
 {
     fill(255);
     ellipse(mouseX_keep,700,33,33);
     Helix( add_val);
 }
}