xxxx代码本色，热抽象，语言学xxxx

目标

• 参考《代码本色》教程，运用不少于3个章节的动画技术，实现一个交互应用，将动画技术充分运用于交互过程中
• 介绍该应用的背景、创意、功能、用法、技术等各个方面
• 可自行选定特殊主体做深入讨论，尽可能从多种角度、关联多学科的方式来探讨

工具：

Processing

展示视频：

https://www.bilibili.com/video/av51553904/

背景

热抽象，抽象艺术流派之一。其代表人物为康定斯基。他们的画面中放弃了具体的内容和情节，突出运用线、面、点、色块、构图等纯粹的绘画语言表现内心的感觉、情绪、节奏等抽象的内容。

创意

使用变化的圆点、直线、三角形色块描绘出动态交互的热抽象作品

功能

键盘交互：空格转换色块与直线模式，方向键上下调整闪烁的周期

int blink=1;

void keyPressed()
{
  if(keyPressed&&(key==32)){
  flag=!flag;
  }
  if(keyPressed&&(key==UP)){
    blink++;
  }
  if(keyPressed&&(key==DOWN)){
    blink--;
  }
  
}

鼠标交互：滚轮放大缩小，移动鼠标对画面位置进行微调

float sclx,scly;

void getScale(float x,float y){
  sclx=random(0,20)*sin(x*0.1);
  scly=random(0,20)*sin(y*0.1);
}

void mouseWheel(MouseEvent event){
  float e=event.getCount();
  println(e);
  sclx+=e;
  scly+=e;
}

float fxt(float x){
  //int t=frameCount/100;
  //int t=millis();
  //return sin(0.3*t) *random(-100,100) + mouseX-x-width/2;
  return  mouseX-x+50;
}

float fyt(float y){
  //int t=frameCount/100;
  //int t=millis();
  //return sin(0.3*t) *random(-100,100) + mouseY-y-width/2;
  return mouseY-y+50;
}

 

点的颜色是与位置有关的函数：

float r,g,b,a;
float dt=0.01;

void getColor(float x,float y)
{
  r = 255*(sin(0.1*x)+1.0);
  g = 255*(cos(0.223*y)+1.0);
  b = 255*(sin(0.123*(x*y))+1.0);
}

技术

ArrayList（参考《代码本色》第四章 4.3、4.4）

向量（参考《代码本色》第一章）

三角函数（参考《代码本色》第三章 3.3）

运动方向（参考《代码本色》第三章 3.4）

自定义的Dots类：

class Dots {
  PVector location;
  PVector velocity;
  color c;
  int radius=300;
  Dots(PVector _PV)
  {
    location = _PV;
    //int j = (int)random(0, 5);
    //if (j==0) c = color(#05CDE5);
    //if (j==1) c = color(#FFB803);
    //if (j==2) c = color(#FF035B);
    //if (j==3) c = color(#3D3E3E);
    //if (j==4) c = color(#D60FFF);
    float xt = random(-0.01, 0.01);
    float yt = random(-0.01, 0.01);
    velocity = new PVector(xt, yt );
  }

  void display()
  {
    //fill(c);
    getColor(location.x, location.y);
    getScale(location.x, location.y);
    //scale(1*random(0.95,1.05)*sin(blink*0.1*frameCount));
    
    fill(r,g,b);
    noStroke();
    //location.x=fxt(location.x);
    //location.y=fyt(location.y);
    ellipse(location.x, location.y, sclx, scly);
  }
  void update()
  {
    if (dist(location.x, location.y, 0, 0)>radius) {
      velocity.mult(-1);
      location.add(velocity);
    }
    else {
      location.add(velocity);
    }
  }
}

 主函数：

ArrayList poop;
int distance =50;
boolean flag=true;


void setup()
{
  size(600, 600);
  //textSize(30);
  //textAlign(CENTER);
  smooth();
  poop = new ArrayList();
  for (int i=0;i<150;i++) {
    PVector PD = new PVector(random(-200, 200), random(-200, 200));
    Dots D = new Dots(PD);
    poop.add(D); 
  }
}


void draw()
{
  background(0);
  translate(width/2,height/2);  
  //text(key,180,240);
  //pushStyle();
  //fill(0);
  //stroke(0,50);
  //ellipse(0,0,400,400);
  //popStyle();
  //----------------
  //for(int h=0;h<poop.size();h++){
  //  Dots dots4=(Dots) poop.get(h);
  //  dots4.update();
  for (int i=0;i<poop.size();i++) {
    Dots dots1 = (Dots) poop.get(i);
    dots1.display();
    dots1.update();
    for (int j=i+1;j<poop.size();j++) {
      Dots dots2 = (Dots) poop.get(j);
      dots2.update();
      if (dist(dots1.location.x, dots1.location.y, dots2.location.x, dots2.location.y)<distance) {
        for (int k=j+1;k<poop.size();k++) {
          Dots dots3 = (Dots) poop.get(k);
          dots3.update();
          if (flag) {
            //fill(dots3.c, 50);//
            getColor(dots3.location.x, dots3.location.y);
            fill(r,g,b,40);
            
            noStroke();
          }
          else
          {
            noFill();
            stroke(255,50);
          }
          if (dist(dots3.location.x, dots3.location.y, dots2.location.x, dots2.location.y)<distance
          //&&dist(dots3.location.x, dots3.location.y, dots4.location.x, dots4.location.y)<distance) {
            ){
            beginShape();
            //vertex(dots4.location.x, dots4.location.y);
            vertex(dots3.location.x, dots3.location.y);
            vertex(dots2.location.x, dots2.location.y);
            vertex(dots1.location.x, dots1.location.y);
            endShape();
          }
        }
      }
    }
  }
  //}
  //----------------
}

作品展示

深入讨论

经典艺术的现代化呈现

随着第二次工业革命、第三次科技革命的爆发，我们现在已处于科技化、信息化的全新时代。计算机编程的应用成为一种全新的表述方式，就像飞机与汽车延伸了人的步履，形形色色的编程方法也为我们的艺术创造增添了更多可能性。

曾经需要一笔一划勾勒的大量图案，通过数组和循环可以很方便地实现，更不用说在动态交互方面的便利。

所谓“代码本色”，可以理解为由自然启发的编程技术，观察真实世界中发生的各种自然现象，并通过编程对它们进行模拟。

从语言学的角度分析代码

请阅读：https://blog.csdn.net/Sugar_me_/article/details/89674688

参考

《代码本色：用编程模拟自然系统》Daniel Shiffman

http://iprocessing.cn/2017/07/12/第一期%EF%BC%8C超炫大boss圆形、网格、结点/