Processing交互：noisy花

一：介绍

processing图形交互设计，程序可以通过右键点击来开关噪声效果，左键点击则可以改变曲线数量（从3到11条）。程序使用了curveVertex、sin、cos和noise等函数，结合了旋转、平移、映射等技术来生成曲线的形状和位置。每个曲线都是由多个点组成的，点的位置随着时间的变化而变化，同时也可以受到噪声的影响。整个图形具有动态、随机、抽象的特点，可以产生非常独特的视觉效果。

这个Processing程序呈现了一种引人注目的视觉效果，通过使用噪声驱动的曲线构成，用户可以通过鼠标点击来探索和调整这个交互式艺术作品。下面详细介绍这个程序的各个方面：

程序概述：

这个程序是用Processing编写的，是一种基于Java的创意编程语言，主要用于艺术作品、可视化效果和交互式界面的创建。它以图形界面为基础，允许开发人员使用代码来控制图形、动画和交互元素的生成。

交互元素：

这个程序的主要特点是它所创造的交互性元素。用户可以通过鼠标点击来控制和改变图像的生成方式。通过右键点击鼠标，用户可以切换噪声的开关，从而改变曲线的外观。左键点击鼠标则会改变曲线的数量，从3条到11条不等。这种交互使用户能够在创造性的过程中产生不同的视觉效果，为艺术家和观众之间的互动提供了一个有趣的途径。

Curve类的作用：

程序的核心是Curve类，它封装了生成曲线的逻辑。在每次绘制循环中，通过调用drawCurve()方法，该类会计算曲线上各个点的坐标，并将这些点连接起来，形成一条曲线。曲线的形状受到limit变量的控制，这个变量会根据时间的推移和用户的操作而变化。通过使用不同的噪声函数或正弦余弦函数，曲线的形态可以在随机性和规律性之间取得平衡，从而创造出独特的视觉效果。

噪声的运用：

噪声函数是这个程序的一个关键要素，它为图像的生成添加了随机性和变化性。当噪声开关打开时，曲线的形状会根据噪声值产生变化。这使得每次绘制的曲线都有微小的差异，为作品带来了一种动态和生命力。关闭噪声开关后，曲线会根据正弦和余弦函数的变化来生成，呈现出更为规律和可预测的效果。

主类的作用：

主类负责程序的整体逻辑和控制。它初始化画布的大小和帧率，并创建一个Curve对象实例。通过处理鼠标点击事件，主类允许用户在运行时控制噪声开关和曲线数量，为用户提供了实时的创作和互动体验。

视觉效果：

这个程序创造了一种视觉效果，由一系列的曲线组成，它们在画布上以不同的形状和数量排列。曲线之间的旋转使得它们在整个画布上分布得很均匀。曲线的绘制过程由每个点的坐标计算和连接构成，形成了一个连续的线条。通过改变噪声开关和曲线数量，用户可以自由地探索不同的图像变化，每一次操作都会呈现出独特的、富有艺术感的图案。

创造性的表达：

这个程序展示了创造性编码在艺术领域的应用。它不仅仅是静态的图像，而是一个充满生命力和动态性的艺术作品。用户通过互动，成为了创作者的一部分，能够在这个艺术创作中表达自己的创意和情感。程序为艺术与技术的交汇提供了一个有趣的案例，向我们展示了数字时代创作的多样性和创新性。

总结：

这个Processing程序以噪声驱动的曲线为基础，创造了一个引人入胜的艺术效果。通过用户的交互操作，程序呈现出多样化的视觉表现，将艺术家和观众之间的界限模糊化。它不仅仅是一个程序，更是一个创意的表达媒介，为数字艺术的发展做出了有益的贡献。

二：相关代码

Curve curve;
boolean useNoise;
int numCurves ;

void setup() {
  size(550, 550);
  frameRate(20);
  curve = new Curve();
  useNoise = true;
  numCurves = 8;
}

void draw() {
  background(0);
  fill(255, 0.8);
  text(numCurves, 30, 530);
  text("curves", 50, 530);
  if (useNoise) {
    text("Noise 0n", 100, 530);
  } else text("Noise Off", 100, 530);

  translate(width/2, height/2);
  for (int j = 0; j < numCurves; j++) {
    rotate(TWO_PI/float(numCurves));
    curve.drawCurve();
  }
}


class Curve {
  float ang, x, y, limit, xPos, yPos;
  float xIncr = 3;
  float yIncr = 6;

  void drawCurve() {  
    // option to drive 'limit' with noise() if you like
    xIncr += .001;
    yIncr += .001;
    limit = cos(frameCount *.005) * TWO_PI/5 ;

    if (useNoise) {
      xPos = map(noise(xIncr), 0, 1, -250, 600);
      yPos = map(noise(yIncr), 0, 1, -250, 600);
    } else {
      xPos = cos(frameCount *.005) * 250;
      yPos = sin(frameCount *.005) * 250;
    }

    fill(255, 10);
    stroke(255);
    strokeWeight(2);

    beginShape();
    for (int i = 0; i < 15; i++) {
      ang =  i * limit;
      x = (i * xPos/15.0) * cos(ang);
      y = (i * yPos/15.0) * sin(ang);
      curveVertex(x, y);
      if (i == 14) {
        ellipse(x, y, 1, 1);
        ellipse(-x, -y, 1, 1);
        ellipse(-x, y, 1, 1);
        ellipse(x, -y, 1, 1);
      }
    } 
    endShape();
  }
}

完整代码请私聊，有偿提供

三：图片

 

 

 

四：运行视频

Processing交互：noisy花