您的位置：首页 > Web前端 > JavaScript

互动媒体技术——浅谈艺工融合+p5.js实现动态图形

2020-01-12 15:36 155 查看

浅谈艺工融合

作为一名数字媒体技术系的学生来说，在我的观点中，艺工融合即在能够编写代码的前提下也能对设计出来的产品有所审美。如今，很多软件产品设计中，艺术和技术是息息相关的，只会其一虽说也又一定的好处，但是在如今这个社会上却缺乏竞争力。当今社会，需要全方面发展的人才，同时，当具备了艺术和技术的双重本领后，也能在与他人的合作交流中展示出优势。

今天，在互动媒体技术课上，我们观看了短片《达芬奇的科学密码》《达芬奇的人生密码》《天才达芬奇》。列奥纳多.达.奇是文艺复兴时期杰出的艺术家。他画作复杂的几何结构向世人展示了它在美学和几何学上的非凡造诣。他不仅是一位画家，还是一位科学家。他现存的画作真迹并不多，但手稿却有大约六千页，且均是从右向左书写，需要借助镜子阅读。他推动了解剖学、工程学、光学、建筑学、地质学等学科的发展，当时这些学科大多连名字也没有。

不得不说，达芬奇正是具备艺工融合能力的典型代表。由此也可以初步证明，具备艺工融合的能力是十分重要的。希望能够在今后的学生生活中，在除了学习技术之外，也能够提升自己的艺术修养，从而提升自己的竞争力。

使用p5.js编写动态图形

在这里，我使用webstorm以及p5.js库函数实现了一个简单的动态图形。身为小白，其中还有一些问题，希望大家多多包含。


在这里，我本想使用画圆环的函数，但是我真的没有找到啊！！！！醉了。要是找到了圆环的函数，那可真是好办。没办法，所以我就用了画圆的函数实现了。
基本思想：
1.圆的不断覆盖，先从外层开始画，否则会不断覆盖掉以前的圆，这种实现方法就相当于不断地把很多个圆饼一层一层叠加，圆饼的颜色在黑白之间不断交替。
2.同时白圆还不断地从中心向外扩展，这里使用了两个循环实现。
外层循环为扩展地圆的半径的增加，内层循环为其他圆的重新绘制。
下面是代码的实现，嗯……我觉得写的很垃圾，希望大家批评指正，帮我改改，给我一点思路。

function setup(){
createCanvas(800,800);
}
var num=1;
var r=20;
var black='rgb(0,0,0)';
var white='rgb(255,255,255)';
var judge=true;

function draw(){
background(0,0,0);
for(add=0;add<40;add++){
for (circleRadius=400;circleRadius>5;circleRadius-=20){
if(judge){
fill(white);
judge=false;
} else{
fill(black);
judge=true;
}
ellipse(200,200,circleRadius,circleRadius);
ellipse(200,200,num*80+20+add,num*80+20+add);
}
for (circleRadius=400;circleRadius>5;circleRadius-=20){
fill(white);
if(circleRadius<(num*80+20+add)){
ellipse(200,200,circleRadius,circleRadius);
}
}
}

num+=1;
if(num>6)num=1;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
<script src="p5.js"></script>
<script src="circle.js"></script>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
不会跳舞的程序媛 发布了24 篇原创文章 · 获赞 2 · 访问量 2454 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航