p5.js关于互动媒体技术的实例

       我认为艺工结合其实并不是一个新兴的产物，它在自然科学和艺术美学诞生的时候，这个概念就出现了。

       自然科学的目的是探索万物，发现事物的本质，认识我们的世界。

       艺术美学的目的是将一切的东西都像着美的方向发展，实现真正的美好。 二者最终都会回馈自然，回馈人类群体的寻常生活。所以说，艺术和科学并不是对立的，他们一直都处于一个你中有我我中有你的状态。 而现在，最能体现艺工结合的方面，大概是设计领域，凡是最终作用于人，或者说人最终会使用的产品，都要打磨产品的人性化方面，使其不仅能满足人的基本需求，更能有良好的实用性和便捷性。

       使用p5.js来实现互动媒体技术中的创意编程工作，也是艺工结合的一个典型实例。

       1.临摹图像

、

       2.实现图像

       在原本的图像基础上，加入了随时间的颜色变化以及图形变化。

      3.使用函数
      1.background(255) ，用于对背景进行填色

       API详解https://p5js.org/zh-Hans/reference/#/p5/background

       2.millis()，用于返回自程序开始来的毫秒数

       API详解https://p5js.org/zh-Hans/reference/#/p5/millis

       3.fill(255)，用于定义形状的填充色

       API详解https://p5js.org/zh-Hans/reference/#/p5/fill

       4.ellipse(x,y,w,h),用于画圆

       API详解https://p5js.org/zh-Hans/reference/#/p5/ellipse

       5.translate(x,y),用于平移

       API详解https://p5js.org/zh-Hans/reference/#/p5/translate  

       6.rotate(angle),用于旋转

       API详解https://p5js.org/zh-Hans/reference/#/p5/rotate

       7.rect(x,y,w,h),用于画矩形

       API详解https://p5js.org/zh-Hans/reference/#/p5/rect

       8. resetMatrix(),用于还原矩阵

       API详解https://p5js.org/zh-Hans/reference/#/p5/resetMatrix

4.详情代码

function setup()

{

createCanvas(600,600);

frameRate(25);

}

function draw()

 {

 background(0);

 var s = second();

var dx=0 dx+=PI/180;

var recS = 48.75;

var t=(millis()/10)*sin(dx);

 if(dx==PI)

 {

dx=0;

 }

 for(var i=0;i<6;i++)

 {

 for(var j=0;j<6;j++)

{

fill(255-20*s,255-20*s,20*s);

 triangle(i*100+50, j*100+50);

 ellipse(i*100+50, j*100+50, 95, 95);

 fill(0); ellipse(i*100+50, j*100+50, 20+s, 20+s);

 translate(i*100+50, j*100+50);

 if(i%2==0&&j%2==0)

 {

rotate(-t);

 rect(0,0,recS,recS);

 }

 else if(i%2==1&&j%2==0)

 {

rotate(t);

rect(-recS,0,recS,recS);

}

 else if(i%2==1&&j%2==1)

{

rotate(-t);

 rect(-recS,-recS,recS,recS);

 }

else {

 rotate(t); rect(0,-recS,recS,recS);

}

 resetMatrix();

}

 }

}