flask与js交互的示例代码_一天一点Processing|02基本结构&初级代码解读

本教程解读来源于《Learning Processing》一书，希望与各位同学共同学习。由于笔者仅有一点点编程基础，在标注时恐有遗漏，写得不明白之处望请见谅。

基本结构

//初始化函数
void setup(){ 
  
}

//周期回调函数
void draw(){
  
}

//鼠标事件函数
void mousePressed(){
  
}

//键盘事件函数
void keyPressed(){
  
}

//当然也可以编写自己的函数
void myFunction(){
  
}

自定义类

class myClass{
  //声明类中变量
  int a;
  int b;
  
  //初始化
  myClass(int _a, int_b){
    
  }
  
  //类相关函数
  void display(){
    
  }
}

标准代码格式

void setup(){   //void用来声明功能，setup()是从上到下计算一次
  size(640,320);  //设置窗口大小
  background(255);  //设置背景颜色
  smooth(4);   //图像平滑度设置
}

void draw(){  //draw()是从上到下无限次循环
  line(mouseX, mouseY, width/2, height/2);  //大括号{}为具体算法
  println("你好，世界！")  //生成文字
}

void setup(){} 与 void draw(){} 算是接触processing最为基础的一段代码格式了，其中的每一个代码都代表着什么呢？

首先，line是一个单纯的单词，计算机时不认的，后面加上括号（），line() 就变成了功能，void是用来声明功能的。在void setup() 之中，void用来声明后面的功能的，意思是后面功能并不存在返回值，类比于函数声明时的int, float之类。setup()的功能算法，是从上到下计算一次；draw()的功能算法是从上到下无限次循环。此处需要注意的是，setup()和draw()都必须有()，否则将不被认为是功能。

语句中出现的大括号{ }，具体说明功能之中的算法，每一步我们希望电脑执行的步骤。一般来说，我们将不希望重复设置的放在setup(){}之中，将需要绘制的、重复的放在draw(){}之中。例如上面示例之中的窗口建模：用来设置窗口大小的size(640,320); 和设置背景色彩的background(0); 语句，如果将background(0)语句放在draw(){}功能之中，每次绘图之前都会像擦黑板一般重新开始。

交互

在上方的代码之中，我们利用 mouseX 与 mouseY 实现交互。除此之外，还有pmouse表示鼠标过去的坐标点，mousePressed()、keyPressed() 等来实现鼠标点击、键盘点击的交互。