互动油画——Processing和Kinect联合实现

项目总结

作为大二上学期的合作项目，总结一下制作过程和代码
我们完成了一个模拟笔刷画油画的效果，并最终用投影的形式表现出来。其中笔刷的频率会根据人的位置（Kinect捕捉）和音乐的频率变化。
我主要参与了创意策划和负责代码中笔刷的优化。
主要过程是，先找了一些现成的代码，按照代码分析功能，学习Processing，然后不断修改得到了我们想要的效果。
在此过程中，遗憾的是也有一些效果无法实现，部分是由于Processing的自身限制。所以想要达到更好的效果，还需要配合其他软件，如TouchDesigner。

主要参考网站：
有很多开源的项目 https://www.openprocessing.org/
p5.js的官方指南 https://p5js.org/reference/

效果图

代码部分

说明：

使用processing3.5.3直接打开，需要安装minim和Kinect库

结构描述：
读取图片（放在同一个文件夹下，需要名字和String[] imgNames里面对应）-> 启动Kinect/播放音乐 -> Kinect获取脸部坐标数据/获取音乐音量 -> 根据脸部坐标数据切换底层图片/根据音量大小确定笔触大小 -> 根据笔触算法（paintStroke函数）随机在屏幕上生成笔触 -> 等待画面逐渐完成

代码如下：

String[] imgNames = {
   "portrait_1.png", "portrait_2.png", "portrait_3.png"};
PImage img;
int imgIndex = 1;

int headX;
int headY;
int headZ;
int headXdis;

int headXmax = 900;
int headXmin = 900;
int headYmax = 500;
int headYmin = 500;
int time = 0;
int preTime = 0;

import ddf.minim.*;
import ddf.minim.effects.*;

Minim minim;
AudioPlayer air;

import KinectPV2.KJoint;
import KinectPV2.*;
KinectPV2 kinect;

void nextImage() {
   
  loop();
  frameCount = 0;
  
  img = loadImage(imgNames[imgIndex]);
  //img.resize(width / 2 / 4 * 3, height / 4 * 3);
  //img.resize(width, height);
  img.loadPixels();
  
  imgIndex += 1;
  if (imgIndex >= imgNames.length) {
   
    imgIndex = 0;
  }
}


void paintStroke(float strokeLength, color strokeColor, int strokeThickness) {
   
  float stepLength = strokeLength/4.0;
  
  // Determines if the stroke is curved. A straight line is 0.
  float tangent1 = 0;
  float tangent2 = 0;
  
  float odds = random(1.0);
  
  if (odds < 0.9) {
   
    //tangent1 = random(-hue(strokeColor), hue(strokeColor));
    //tangent2 = random(-hue(strokeColor), hue(strokeColor));
    tangent1