Processing多窗口程序范例（三）

再来一例~另一种叠加方式呈现。。。看图：

程序

主程序：

package syf.demo.multiwindow3;

import processing.core.PApplet;
import processing.core.PGraphics;
import processing.core.PImage;

public class TwoWindowApp extends PApplet {

    ChildWindow childwindow;
    Canvas canvas;
    PGraphics pg;

    PImage star;
    PImage star2;
    @Override
    public void settings() {
        size(800,800);
    }

    @Override
    public void setup() {

        pg = createGraphics(200,200);
        pg.beginDraw();
        pg.clear();
        pg.background(0,0);
        pg.endDraw();
        canvas = new Canvas(this,pg);
        childwindow = new ChildWindow(this,pg);

        String addr = this.getClass().getClassLoader().getResource("").getPath()+"data/";
        star = loadImage(addr+"ic_menu_star.png");
        star2 = loadImage(addr+"star_empty.png");
        background(0);

    }

    @Override
    public void draw() {
        //background(20);

        canvas.update();
        canvas.draw();

    }


    public static void main(String[] args) {
        String[] appletArgs = new String[] {"syf.demo.multiwindow3.TwoWindowApp"};
        PApplet.main(appletArgs);
    }
}

子窗口：

package syf.demo.multiwindow3;

import processing.core.PApplet;
import processing.core.PConstants;
import processing.core.PGraphics;
import processing.event.MouseEvent;

import java.awt.*;

public class ChildWindow extends PApplet{
    PGraphics pg;
    PApplet app;
    TwoWindowApp app0;

    Dimension screen;
    ChildWindow(PApplet _app,PGraphics _pg){
        super();
        pg = _pg;
        app = _app;
        PApplet.runSketch(new String[]{this.getClass().getName()},this);

        Toolkit toolkit = Toolkit.getDefaultToolkit();
        screen = toolkit.getScreenSize();
    }

    @Override
    public void settings() {
        size(pg.width, pg.height);
    }

    @Override
    public void setup() {
        background(0);
        surface.setLocation(screen.width/2-app.width/2-this.width,screen.height/2-app.height/2);
        // 让其app变量指向我们设的类，这样方便调取其中的成员
        if(app instanceof TwoWindowApp)
            app0 = (TwoWindowApp)app;
        pg.imageMode(CENTER);
        pg.colorMode(HSB,360,100,100);

    }

    @Override
    public void draw() {
        pg.beginDraw();
        pg.background(0,0);

        pg.endDraw();

        set(0,0,pg);
        //image(pg, 0, 0);

    }

    /*
        增设鼠标点击事件，左右键点击画出不同的image
        【貌似blendmode 有点问题，依旧是blend形式  有待研究！】
        还有最后重复了 set绘制方法，不这样的话没有画面。。。
     */
    @Override
    public void mousePressed(MouseEvent event) {
        println(event.getButton());
        if(event.getButton() == 37)
        {
            if(app0 != null)
            {
                pg.beginDraw();
                pg.blendMode(PConstants.ADD);
                pg.tint(frameCount%360,100,100,200);
                pg.image(app0.star,mouseX,mouseY,frameCount%100+10,frameCount%100+10);
                pg.endDraw();

            }
        }
        if(event.getButton() == 39)
        {
            if(app0 != null)
            {
                pg.beginDraw();
                pg.blendMode(PConstants.ADD);
                pg.tint(frameCount%360,100,100,200);
                pg.image(app0.star2,mouseX,mouseY,frameCount%50+100,frameCount%50+100);
                pg.endDraw();            }
        }
        set(0,0,pg);

    }
}

画布类：

package syf.demo.multiwindow3;

import processing.core.PApplet;
import processing.core.PConstants;
import processing.core.PGraphics;
import processing.core.PVector;

public class Canvas {

    private PApplet app;
    PGraphics pg;
    /*
        这个向量数组是为了将一个画面覆盖到整个画面而设立的随机位置（posx,posy）
     */
    PVector[] randomvalues;

    Canvas(PApplet _app, PGraphics _pg){
        app = _app;
        pg = _pg;
        randomvalues = new PVector[100];
        //初始化随机数组 不然的话放在draw中每次都会随机，画面呈现闪烁的结果
        for (int i = 0; i < randomvalues.length; i++) {
            float r1 = app.random(-pg.width,app.width);
            float r2 = app.random(-pg.width,app.width);
            PVector pv = new PVector(r1,r2);
            randomvalues[i] = pv;
        }
        //设置主画面叠加的混合模式
        app.blendMode(PConstants.ADD);
    }

    void update(){
    }

    void draw(){
        int index = 0;//遍历随机数组的索引值，每次都归0
        for (int i = 0; i < 10; i++) {
            for (int j = 0; j < 10; j++) {

                app.image(
                         pg,
                         (int)randomvalues[index].x,
                         (int)randomvalues[index].y
                );
                index++;
            }

        }
    }
}

---

其中要点已在源码中注释了，这里还要强调几点：

① 程序中实质上有三个画面系统：主画面、子画面以及PQraphics自己的画面。每个画面都有自身的刷新方法、混合叠加方式

② 要随机分布子画面，就需要考虑随机数的刷新问题，一般随机画面位置初始好就不动了，除非想要闪烁的效果

③ 所有的绘制相关方法都必须考虑清楚基于哪个对象实施的（如 PApplet、PQraphics）

结尾

如果能够理清子父窗口关系了，那就可以通过这种方式提升创作的环境了，加载进来的图片信息也可以在子窗口中实时显示，实时检测变化效果。如有问题，欢迎留言。