用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

点击进入授权页面

只需一步,快速开始

  • QQ空间
  • 回复
  • 收藏

  • TA的每日心情
    郁闷
    2015-2-1 17:22
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    参加活动: 1

    组织活动: 0

    Lee 金牌会员 2014-4-18 17:53 楼主
    俺从OPENBOOK第8期开始连载Processing神书GenerativeDesign: Visualize, Program, and Create with Processing的读书笔记

    为了让读者们读得更明白,俺来这开块地出来放笔记中的代码(从2楼开始)


    前言:


    俺是Lee苦海,是Processing   QQ群(群号7726768)的管理员之一。这个连载是应OPENBOOK总编大人约稿而开始的。资料来源是processing神书之一:《Generative Design: Visualize, Program, and Create withProcessing》。
    俺将尽量在不侵犯原文版权的状态下表达原书的技法和思想(因为原书的层次很高,表达不到位请海涵)。有条件的同学最好还是买一本英文版。这里是购买链接:http://www.amazon.cn/Generative-Design-Visualize-Program-and-Create-with-Processing-Bohnacker-Hartmut/dp/1616890770
    书中的程序在官方网站均有下载,这里是链接:http://www.generative-gestaltung.de/code。但是因为版权原因,无法直接引用原程序,请见谅。我将尽可能的使用自己的或是改写的程序将原书的精神传达。
    在此感谢Arduino群和Processing群众神,并特别感谢_ryeCache大神,没有他们的帮组,我绝不敢贸然开启这么大的项目。
    本文中的程序有些可能有细微的错误导致无法运行,这是为了避免熊孩子无脑抄袭交作业而设计的(其实是我没有审稿),如果你有一点基础知识,或者去社区问问,这些都是很容易解决的。
    本帖最后由 Lee 于 2014-4-18 17:58 编辑

    程序1.0
    void setup()  
    {
    size (720,720);                                                     //建立一个长720个像素,宽720个像素的
    noCursor();                                                          //去掉鼠标

    }

    void draw()
    {
    colorMode(HSB,360,100,100);                            //将使用的色彩空间设定为HSB
                                                                                 //并给HSB三轴赋值定义区间
                                                                                 //例如360 就是说H(hue)只能是0-360之间的正数


    noStroke();
    background(mouseY/2,100,100);                       //背景颜色由鼠标Y轴坐标决定

    fill(360-mouseY/2, 100,100);                               //方块颜色也由鼠标Y轴决定,不过和上面的颜色不一样,
                                                                                 //这里是逆序的,因为“360-”
                                                                                 //“/2”是因为窗口大小为720,除2刚好是360.


    rect(0,0, 720, mouseX+1);                                   //画一方长方形
                                                                                 //长方形的高度由鼠标的X轴决定


    }

    本帖最后由 Lee 于 2014-4-18 18:04 编辑

    1.1程序

    /*程序功能说明
    画出HSB色彩空间
    */
    int stepX =2;
    int stepY =2;
    void setup(){
      size(800, 400);          //窗口大小
      background(0);
    }
    void draw(){
      noStroke();
      colorMode(HSB, width, height, 100);    //因为之前把窗口大小定义为了800*400像素
                  //所以这里width = 800
                  //height = 400
      for (int gridY=0; gridY<height; gridY+=stepY){  //两个for循环对应窗口的X轴和Y
        for (int gridX=0; gridX<width; gridX+=stepX){
          fill(gridX, height-gridY, 100);    //根据for循环中的grid变换不同的颜色
          rect(gridX, gridY, stepX, stepY);    //根据grid变换色块尺寸
        }
      }
    }



    1.1程序2
    int segmentCount = 360;
    int radius = 300;

    void setup(){
      size(800, 800);
    }

    void draw(){

      noStroke();
      colorMode(HSB, 360, 100, 100);   
      background(360);

      float angleStep = 360/segmentCount;    //根据色块的数量 计算每个色块的角度

      beginShape(TRIANGLE_FAN);        //画一个图形TRIANGLE_FAN
      vertex(width/2, height/2);        //图形的开始坐标
      for (float angle=0; angle<=360; angle+=angleStep){
    //360度走一圈


    float vx = width/2 + cos(radians(angle))*radius;
                  //计算色块的在圆外侧的坐标
    float vy = height/2 + sin(radians(angle))*radius;


    vertex(vx, vy);  //将色块在圆外侧的坐标设为TRIANGLE_FAN           //的角点
    fill(angle, 100, 100);      //填上颜色
                  //角度为H
                  //鼠标X坐标为色饱和度
                  //鼠标Y坐标为明度
      }
      endShape();            //图形TRIANGLE_FAN到此结束


    }

    void keyReleased(){
      if(key >='0' && key <= '8')
    segmentCount  = int(pow(2,key-'0')+2);

    }
    1.2 程序

    // P_1_2_1_01.pde
    //
    // Generative Gestaltung, ISBN: 978-3-87439-759-9
    // First Edition, Hermann Schmidt, Mainz, 2009
    // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
    // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
    //
    // http://www.generative-gestaltung.de
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.

    /**
    * shows how to interpolate colors in different styles/ color modes
    *
    * MOUSE
    * left click          : new random color set
    * position x          : interpolation resolution
    * position y          : row count
    *
    * KEYS
    * 1-2                 : switch interpolation style
    * s                   : save png
    * p                   : save pdf
    */

    ///*程序功能说明
    演示不同色彩空间的特点并做一个调色盘

    鼠标:
    鼠标按键                :生成新的颜色
    鼠标x坐标                   :调色均匀度
    鼠标y坐标                :调色盘数量

    键盘:
    1-2                        :改变区间数量
    S                        :保存成图像文件
    P                        :保存成PDF文件
    *///




    import processing.pdf.*;
    import java.util.Calendar;

    boolean savePDF = false;

    int tileCountX = 2;
    int tileCountY = 10;

    color[] colorsLeft = new color[tileCountY];
    color[] colorsRight = new color[tileCountY];
    color[] colors;

    boolean interpolateShortest = true;


    void setup() {
      size(800, 800);
      colorMode(HSB,360,100,100,100);                         //依然HSB空间
                                                            //HSB取值空间依次为 0-360 0-100 0-100
                                                            //最后一个100是Alpha通道

    /****************************************************************
    Alpha通道是一个8位的灰度通道,该通道用256级灰度来记录图像中的透明度信息,定义透明、不透明和半透明区域,其中黑表示全透明,白表示不透明,灰表示半透明。
    ————泰勒脑残夫斯基(大神)

    ******************************************************************/
      noStroke();
      shakeColors();
    }


    void draw() {
      if (savePDF) {
        beginRecord(PDF, timestamp()+".pdf");
        noStroke();
        colorMode(HSB,360,100,100,100);
      }

      tileCountX = (int) map(mouseX,0,width,2,100);         //map是个等比变换函数,它将mouseX在0到
                                                            //width之间的位置,等比映射到2到100这
    //个区间中
      tileCountY = (int) map(mouseY,0,height,2,10);        //这两句将鼠标的XY轴坐标作为参数,用于
    //变换色盘的数量和渐变的次数

      float tileWidth = width / (float)tileCountX;       
      float tileHeight = height / (float)tileCountY;
      color interCol;
      
      // just for ase export
      colors = new color[tileCountX*tileCountY];
      int i = 0;
      
      for (int gridY=0; gridY< tileCountY; gridY++) {        //使用一个FOR循环,一行一行的绘制图像
        color col1 = colorsLeft[gridY];                        //确定本行左侧的颜色
        color col2 = colorsRight[gridY];                        //确定本行右侧的颜色

        for (int gridX=0; gridX< tileCountX ; gridX++) {
          float amount = map(gridX,0,tileCountX-1,0,1);
                                                            //计算调色盘的色块数量
          
          if (interpolateShortest) {                        //如果interpolateShortest为真,
    //使用RGB色系渐变
            // switch to rgb
            colorMode(RGB,255,255,255,255);
            interCol = lerpColor(col1,col2, amount);         // lerpColor函数可以将两个颜色之间颜色
    //计算出来,col1,col2分别是起点和终点,
    //amount是之间的位置/
            // switch back
            colorMode(HSB,360,100,100,100);
          }
          else {                                                //反之,使用HSB色系渐变
            interCol = lerpColor(col1,col2, amount);
          }
          fill(interCol);                                        //填充色块
          
          float posX = tileWidth*gridX;
          float posY = tileHeight*gridY;      
          rect(posX, posY, tileWidth, tileHeight);
       
          // just for ase export
          colors = interCol;
          i++;
        }
      }

      if (savePDF) {
        savePDF = false;
        endRecord();
      }
    }


    void shakeColors() {                                        //新颜色生成函数
                                                            //这里将颜色设定在某个特定区间,如果想
                                                            //试试其他颜色,改变(0,60)和
    //(160,190)两个括号中的数字即可
      for (int i=0; i<tileCountY; i++) {
        colorsLeft = color(random(0,60), random(0,100), 100);
        colorsRight = color(random(160,190), 100, random(0,100));
      }
    }


    void mouseReleased() {
      shakeColors();                                         //变换颜色
    }


    void keyReleased() {
      if (key == 's' || key == 'S') saveFrame(timestamp()+"_##.png");
      if (key == 'p' || key == 'P') savePDF = true;
      
      if (key == '1') interpolateShortest = true;
      if (key == '2') interpolateShortest = false;
    }

    // timestamp
    String timestamp() {
      Calendar now = Calendar.getInstance();
      return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
    }
    1.3 程序


    // P_1_2_2_01.pde
    //
    // Generative Gestaltung, ISBN: 978-3-87439-759-9
    // First Edition, Hermann Schmidt, Mainz, 2009
    // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
    // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
    //
    // http://www.generative-gestaltung.de
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.


    ///*程序功能说明
    取出一副图像中的颜色

    鼠标:
    鼠标x坐标                   :色块数量

    键盘:
    S                        :保存成图像文件
    P                        :保存成PDF文件
    *///


    //import generativedesign.*;
    import processing.pdf.*;
    import java.util.Calendar;

    boolean savePDF = false;

    PImage img;
    color[] colors;

    String sortMode = null;



    void setup(){
      size(470, 312);
      colorMode(HSB, 360, 100, 100, 100);
      noStroke();
      noCursor();
      img = loadImage("pic1.jpg");                         //读取图像,请注意你准备的图像名字
    //是否和程序中一致
    //图像需要和程序放在同个目录下
    }


    void draw(){
      if (savePDF) {
        beginRecord(PDF, timestamp()+".pdf");
        colorMode(HSB, 360, 100, 100, 100);
        noStroke();
      }

      int tileCount = width / max(mouseX, 5);                //用鼠标X轴坐标控制色块数量
      float rectSize = width / float(tileCount);        //根据数量计算单个方块大小

      // get colors from image
      int i = 0;
      colors = new color[tileCount*tileCount];
      for (int gridY=0; gridY<tileCount; gridY++) {        //两个FOR循环针对素材图像的XY轴
        for (int gridX=0; gridX<tileCount; gridX++) {
          int px = (int) (gridX * rectSize);
          int py = (int) (gridY * rectSize);
          colors = img.get(px, py);                        //取出颜色
          i++;
        }
      }

      // sort colors
      //if (sortMode != null) colors = GenerativeDesign.sortColors(this, colors, sortMode);
      

      // draw grid                                                //将取出的颜色画出来
      i = 0;
      for (int gridY=0; gridY<tileCount; gridY++) {
        for (int gridX=0; gridX<tileCount; gridX++) {
          fill(colors);
          rect(gridX*rectSize, gridY*rectSize, rectSize, rectSize);
          i++;
        }
      }

      if (savePDF) {
        savePDF = false;
        endRecord();
      }
    }


    void keyReleased(){                                        //这段因为库的限制基本没用
    // if (key=='c' || key=='C') GenerativeDesign.saveASE(this, colors, timestamp()+".ase");
      if (key=='s' || key=='S') saveFrame(timestamp()+"_##.png");
      if (key=='p' || key=='P') savePDF = true;

      if (key == '1') img = loadImage("pic1.jpg");
      //if (key == '2') img = loadImage("pic2.jpg");
      //if (key == '3') img = loadImage("pic3.jpg");

      //if (key == '4') sortMode = null;
      //if (key == '5') sortMode = GenerativeDesign.HUE;
      //if (key == '6') sortMode = GenerativeDesign.SATURATION;
      //if (key == '7') sortMode = GenerativeDesign.BRIGHTNESS;
      //if (key == '8') sortMode = GenerativeDesign.GRAYSCALE;
    }


    // timestamp
    String timestamp() {
      Calendar now = Calendar.getInstance();
      return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
    }
    1.4 程序
    // P_1_2_3_01.pde
    //
    // Generative Gestaltung, ISBN: 978-3-87439-759-9
    // First Edition, Hermann Schmidt, Mainz, 2009
    // Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
    // Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
    //
    // http://www.generative-gestaltung.de
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.

    ///*程序功能说明
    通过特定模式排列随机颜色

    鼠标:
    鼠标XY坐标                   :色块的XY轴数量


    键盘:
    0-9                        :使用不同的规则生成颜色
    S                        :保存成图像文件
    P                        :保存成PDF文件
    *///




    //import generativedesign.*;
    import processing.pdf.*;
    import java.util.Calendar;

    boolean savePDF = false;

    int tileCountX = 50;                                                //最多50*10个色块
    int tileCountY = 10;

    // arrays for color components values
    int[] hueValues = new int[tileCountX];
    int[] saturationValues = new int[tileCountX];
    int[] brightnessValues = new int[tileCountX];


    void setup() {
      size(800,800);
      colorMode(HSB,360,100,100,100);                                //HSB正在大杀特杀
      noStroke();

      // init with random values
      for (int i=0; i<tileCountX; i++) {                                //随机生成若干颜色
        hueValues = (int) random(0,360);                        //随机生成H
        saturationValues = (int) random(0,100);                //随机生成S
        brightnessValues = (int) random(0,100);                //随机生成B
      }
    }


    void draw() {
      if (savePDF) {
        beginRecord(PDF, timestamp()+".pdf");
        noStroke();
        colorMode(HSB,360,100,100,100);
      }
      // white back
      background(0,0,100);

      // count every tile
      int counter = 0;

      // map mouse to grid resolution                                //还是一样的用鼠标控制色块大小
      int currentTileCountX = (int) map(mouseX, 0,width, 1,tileCountX);
      int currentTileCountY = (int) map(mouseY, 0,height, 1,tileCountY);
      float tileWidth = width / (float) currentTileCountX;
      float tileHeight = height / (float) currentTileCountY;

      for (int gridY=0; gridY< tileCountY; gridY++) {                //依然还是两个FOR,分别XY轴
        for (int gridX=0; gridX< tileCountX; gridX++) {  
          float posX = tileWidth*gridX;
          float posY = tileHeight*gridY;
          int index = counter % currentTileCountX;

          // get component color values
          fill(hueValues[index],saturationValues[index],brightnessValues[index]);
                                                                    //将随机产生的颜色填充进色块       
          rect(posX, posY, tileWidth, tileHeight);                //根据鼠标参数画出色块
          counter++;
        }
      }

      if (savePDF) {
        savePDF = false;
        endRecord();
      }
    }


    void keyReleased() {  
      if (key == 's' || key == 'S') saveFrame(timestamp()+"_##.png");
      if (key == 'p' || key == 'P') savePDF = true;
      if (key == 'c' || key == 'C') {
        // ------ save an ase file (adobe swatch export) ------
        // create palette
        color[] colors = new color[hueValues.length];
        for (int i=0; i<hueValues.length; i++) {
          colors = color(hueValues,saturationValues,brightnessValues);
                                                                    //将HSB的值整合为一个颜色
        }
        //GenerativeDesign.saveASE(this, colors, timestamp()+".ase");
      }

      if (key == '1') {                                                //按键1->完全随机的HSB值
        for (int i=0; i<tileCountX; i++) {
          hueValues = (int) random(0,360);
          saturationValues = (int) random(0,100);
          brightnessValues = (int) random(0,100);
        }
      }
      if (key == '2') {                                                 //按键2->B值固定为100,
    //HS完全随机
        for (int i=0; i<tileCountX; i++) {
          hueValues = (int) random(0,360);
          saturationValues = (int) random(0,100);
          brightnessValues = 100;
        }
      }
      if (key == '3') {                                                  //按键3->S值固定为100
                                                                    //HB完全随机
        for (int i=0; i<tileCountX; i++) {
          hueValues = (int) random(0,360);
          saturationValues = 100;
          brightnessValues = (int) random(0,100);
        }
      }

      if (key == '4') {                                                  //下面的大家应该都看明白了
        for (int i=0; i<tileCountX; i++) {
          hueValues = 0;
          saturationValues = 0;
          brightnessValues = (int) random(0,100);
        }
      }
      if (key == '5') {  
        for (int i=0; i<tileCountX; i++) {
          hueValues = 195;
          saturationValues = 100;
          brightnessValues = (int) random(0,100);
        }
      }
      if (key == '6') {  
        for (int i=0; i<tileCountX; i++) {
          hueValues = 195;
          saturationValues = (int) random(0,100);
          brightnessValues = 100;
        }
      }

      if (key == '7') {  
        for (int i=0; i<tileCountX; i++) {
          hueValues = (int) random(0,180);
          saturationValues = (int) random(80,100);
          brightnessValues = (int) random(50,90);
        }
      }
      if (key == '8') {  
        for (int i=0; i<tileCountX; i++) {
          hueValues = (int) random(180,360);
          saturationValues = (int) random(80,100);
          brightnessValues = (int) random(50,90);
        }
      }

      if (key == '9') {
        for (int i=0; i<tileCountX; i++) {
          if (i%2 == 0) {
            hueValues = (int) random(0,360);
            saturationValues = 100;
            brightnessValues = (int) random(0,100);
          }
          else {
            hueValues = 195;
            saturationValues = (int) random(0,100);
            brightnessValues = 100;
          }
        }
      }
      if (key == '0') {  
        for (int i=0; i<tileCountX; i++) {
          if (i%2 == 0) {
            hueValues = (int) 192;
            saturationValues = (int) random(0,100);
            brightnessValues = (int) random(10,100);
          }
          else {
            hueValues = 273;
            saturationValues = (int) random(0,100);
            brightnessValues = (int) random(10,90);
          }
        }
      }

    }


    // timestamp
    String timestamp() {
      Calendar now = Calendar.getInstance();
      return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
    }

    额,插代码的时候用代码高亮的功能,好看一些

    点评

    Lee
    怎嘛整???  发表于 2014-4-28 13:48
    如果你觉得以上内容帮到了你,你可以打赏支持作者
    发帖工具栏上有个<>符号,打开它选择java,再贴入代码发表即可。
    很好支持leed大神
    12下一页
    发新帖
    发表评论
    您需要登录后才可以回帖 登录 | 立即注册  
    关闭

    推荐主题 上一条 /4 下一条