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

浅谈艺工融合

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

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

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

使用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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值