Processing入门 - 数学公式可视化

Processing简介

Processing是一种开源编程语言，专门为电子艺术和视觉交互设计而创建，其目的是通过可视化的方式辅助编程教学，并在此基础之上表达数字创意。Processing也指Processing语言的集成开发环境。2001年，MIT媒体实验室的 Casey Reas 和 Benjamin Fry 发起了此计划。

情景 Situation

It is required to develop a program that can evaluate the average speed at any time t, where average speed = ( s(t+△t) - s(t) ) / △t km/h.
In order to do this we take small values of ∆𝑡 hours and let ∆𝑡 approach zero. This is an example of what the program needs to do: if the time is 𝑡 = 0.2 hours then the average speed of the car is calculated by adding time intervals, 0.01, 0.001, 0.001 h, ...etc. to the time 0.2 h and substitute the new time in equation 2 :
( s(0.2+0.01) - s(0.2) ) / 0.01 = 30 km/h
( s(0.2+0.001) - s(0.2) ) / 0.001 = 29.806 km/h
( s(0.2+0.0001) - s(0.2) ) / 0.0001 = 29.804 km/h
The solution will be reached when the difference between two consecutive results is very small.

任务 Task

1. You need to write a Processing program with the sketch size of 500 x 500.
2. The initial screen of the program should look like (Figure 1) showing all the time
   intervals (t) at the bottom.
3. If we click on any of these time intervals (value of t), the program should change
   the colour of that button and should show the results similar to the example in
   figure 2 below.
4. The results should be calculated using the time interval clicked (t) and the value
   of ∆𝑡 ranging from 0.1 – 0.00001.

行动 Action

打开Processing编译器，copy以下代码，点击▶️start / 播放按钮。

int[] xArr = {25,125,225,325,425};
String text = "Average speed at (△t) ";
float[] tArr = {0.1,0.01,0.001,0.0001,0.00001};         
void setup(){
  size(500,500);
  background(255);
  fill(0,0,255);
  textAlign(CENTER);
  text("Click any of these time intervals to show the results",250,50);
  for(int i=0;i<xArr.length;i++){
     rect(xArr[i],400,50,50); 
  }
  fill(255);
  for(int i=0;i<xArr.length;i++){
     text(""+tArr[i],xArr[i]+25,425); 
  }
}
void draw(){}
void mousePressed() {
  if (mouseX>=25 && mouseX<=75 && mouseY>=400 && mouseY<=450) {
      fill(255,0,0);
      rect(25,400,50,50);
      float t = tArr[0];
      text(text+t+" = "+averageSpeed(t),250,100);
      fill(255);
      text(""+t,50,425);
  }
  else if (mouseX>=125 && mouseX<=175 && mouseY>=400 && mouseY<=450) {
      fill(255,0,0);
      rect(125,400,50,50);
      float t = tArr[1];
      text(text+t+" = "+averageSpeed(t),250,150);
      fill(255);
      text(""+t,150,425);
  }
  else if (mouseX>=225 && mouseX<=275 && mouseY>=400 && mouseY<=450) {
      fill(255,0,0);
      rect(225,400,50,50);
      float t = tArr[2];
      text(text+t+" = "+averageSpeed(t),250,200);
      fill(255);
      text(""+t,250,425);
  }
  else if (mouseX>=325 && mouseX<=375 && mouseY>=400 && mouseY<=450) {
      fill(255,0,0);
      rect(325,400,50,50);
      float t = tArr[3];
      text(text+t+" = "+averageSpeed(t),250,250);
      fill(255);
      text(""+t,350,425);
  }
  else if (mouseX>=425 && mouseX<=475 && mouseY>=400 && mouseY<=450) {
      fill(255,0,0);
      rect(425,400,50,50);
      float t = tArr[4];
      text(text+t+" = "+averageSpeed(t),250,300);
      fill(255);
      text(""+t,450,425);
  }
}
float distance(float t){
   return 40*pow(t,3)+20*pow(t,2)+17*t; 
}
float s = distance(0.2);
float averageSpeed(float t){
  return (distance(0.2+t)-s)/t;
}

结果 Result

Results