我认为艺工结合其实并不是一个新兴的产物，它在自然科学和艺术美学诞生的时候，这个概念就出现了。
自然科学的目的是探索万物，发现事物的本质，认识我们的世界。
艺术美学的目的是将一切的东西都像着美的方向发展，实现真正的美好。 二者最终都会回馈自然，回馈人类群体的寻常生活。所以说，艺术和科学并不是对立的，他们一直都处于一个你中有我我中有你的状态。 而现在，最能体现艺工结合的方面，大概是设计领域，凡是最终作用于人，或者说人最终会使用的产品，都要打磨产品的人性化方面，使其不仅能满足人的基本需求，更能有良好的实用性和便捷性。
使用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();
}
}
}