Processing创意编程(进阶篇)

2022/1/2 20:07:44

本文主要是介绍Processing创意编程(进阶篇),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Processing创意编程(进阶篇)

  • 一、前言
  • 二、常用语法
    • 1、random随机数生成函数
    • 2、map映射函数
    • 3、noise噪声函数
    • 4、导入图片
    • 5、dist距离函数
    • 6、一维数组
    • 7、二维数组
    • 8、class类
  • 四、参考资料

【转载请注明出处: https://leytton.blog.csdn.net/article/details/122153961】

一、前言

前面讲了《Processing创意编程(入门篇)》,接下来是进阶篇。
官方文档地址:https://processing.org/reference/

二、常用语法

1、random随机数生成函数

语法:random(a,b),产生区间为[a,b),即包含a,不包含b,的随机浮点数。
random(b)的范围为[0,b)

参考资料 https://processing.org/reference/random_.html

如下图所示:
在这里插入图片描述

2、map映射函数

引用视频里的一张图:
在这里插入图片描述
比如,画布宽度为width,那么鼠标坐标的x范围是0width,我们根据x的变化来改变背景色0255。代码如下:

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
}

void draw(){ 
  float x=map(mouseX,0,width,0,255);
  float y=map(mouseY,0,height,0,255);
  background(x,y,100);
}

运行效果如下:
在这里插入图片描述

3、noise噪声函数

引用视频里的一张图:
在这里插入图片描述
上代码:

float t=0;
void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  stroke(0);//画笔颜色为黑色
  strokeWeight(3);//画笔粗细
}

void draw(){
  background(255);//清空画布为白色
  t=map(mouseX,0,width,0,10);//根据鼠标位置生成初始随机数种子
  for(int i=0;i<width;i++){
    line(i,0,i,height*noise(t));
    t+=0.01;
  }
}

在这里插入图片描述

4、导入图片

图片放在项目的data目录下,直接把图片拖到编辑器会自动添加。
代码如下:

PImage img;
void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  img=loadImage("wowa.jpg");//载入图片wowa.jpg,图片要保存在data文件夹下。
  
  img.resize(800,800);//调整图片大小
  image(img,0,0);//显示图片从0,0坐标
}

5、dist距离函数

dist用于计算两点之间距离。

dist(x1, y1, x2, y2)
dist(x1, y1, z1, x2, y2, z2)

6、一维数组

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  
  int colors[]={#f44336,#e91e63,#9c27b0,#3f51b5,#4caf50,#8bc34a};
  for(int i=0;i<colors.length;i++){
    fill(colors[i]);
    rect(50*i,0,50,50);
  }
}

在这里插入图片描述

7、二维数组

void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  
  int colors[][]={{#f44336,#e91e63,#9c27b0},{#3f51b5,#4caf50,#8bc34a}};
  for(int i=0;i<colors.length;i++){
    for(int j=0;j<colors[i].length;j++){
        fill(colors[i][j]);
        rect(50*j,50*i,50,50);
    }
  }
}

在这里插入图片描述

8、class类

创建10个圆,每个圆位置半径随机。位置慢慢移动、半径慢慢变大。

int num=10;
Circle[] circles=new Circle[num];
void setup(){//启动时执行一次的函数
  size(800,800);//画布大小
  
  for(int i=0;i<num;i++){
    circles[i]=new Circle(random(0,width),random(0,height),random(10,50));
  }
  
}

void draw(){
  background(0);
  for(int i=0;i<num;i++){
    circles[i].update();
    circles[i].show();
  }
}

class Circle{
  float x,y,r;
  Circle(float x,float y,float r){
    this.x=x;
    this.y=y;
    this.r=r;
  }
  
  void update(){
    this.x+=0.1;
    this.y+=0.1;
    this.r+=0.1;
  }
  
  void show(){
    ellipse(x,y,r,r);
  }
}

效果如下:
在这里插入图片描述

四、参考资料

二锅头【Processing零基础中文教程】2、进阶篇

如果本文对你有帮助,请点个赞让我知道哦



这篇关于Processing创意编程(进阶篇)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程