雪梨小白的“码绘”日常——p5.js自画像来喽！

这次需要完成互动媒体课程的第二项作业——利用p5.js绘制一幅表现自我的自画像，（雪梨是谁啊，那可是艺工交融的代表，骄傲的抬起快要睁不开的眼…)，用三个字，那就是！！！我可以！！！（来啦！）
我觉得码绘是一件既需要灵感，同样也需要耐心与逻辑的事情，这也是为什么，我们把它称为艺工交融的代表，我的很多同学都提前完成了这次作业，而我一直压着没做，（除了我没救的拖延症之外），我始终没有找到合适的风格和美工设计手法来表现自画像的内容，我认为一件作品，从开始构思开始，就是具有灵性的，风格是想法彰显的绝佳形式，这会成为我们完成它的强大动力。当我喝到我的部门小朋友请我喝的奶茶的时候，哇，灵感他来了，这就成为了我正式起步的地方，让我开始唠叨吧~

一、作品艺术设计

1.艺术主题构想

这次的主题就是对自我的刻画，也就是说，只要与自身相关，涵盖自身特点，表现出个人的性情即可。所以也就是在和我的部门小朋友在一起的时候，我发现，我自己总是真实的快乐，像个大姐姐，没有顾虑的给予，没有计较的奉献，充满热忱与热爱地去拥抱和享受。因而想要把这样的自己好好的保留下来，又因为小朋友请我喝的是凉凉的果茶（其实这个天这么凉了，不该喝凉的了…），想到了夏天凉爽的海边，浪花一下一下的冲刷过来的场景，视野开阔而充满希望，便打算用浪花作为衬托意象。

2.艺术手法及交互方式确立

根据意象，我们可以提取到浪花的特征——潮起潮落，层叠循环。所以我就想使用层次感很强的素材重叠风格，利用码绘制作的几何图形，我们让它们动态的前后重叠，营造出潮起潮落的感觉。至于交互方式，无外乎就是鼠标键盘交互，我自己有些皮，想要拥有一个wink的表情，然后点击wink的同时，背后有很多爱心飘过，来体现对部门小朋友的喜爱；还因为我觉得自己在他们面前就应该无所不能，好像拥有魔法一般，还想做一下变色的交互。

二、实验过程

Step 1 动态背景的制作

要说整个过程中最麻烦的，恐怕就是这个动态背景的制作了。
首先我们需要明确，一共要堆叠几层内容，根据我自己的设计，一共堆叠6层不太相同的背景素材可以帮助我们达成效果。
第一层选用这种条状的圆形螺纹铺底：

第二层开始需要我们动态呈现出前进后退的潮汐感，我设想的方法是，先把每个小的组成部分绘制好，通过translate()对millis()函数的使用让我们绘制的内容动起来。

之后再通过旋转和平移让这些小素材排版在合适的位置，调坐标真的是件很恐怖的事情（呜呜呜…）

这里需要强调的是，一定要记得使用栈函数push()，pop()，形象地说就是状态保持器，可以让我们其余的元素不受到之前变换的影响。下面放上动态运动的关键代码，想要动起来，这样子就对了（还要敲黑板的是，如果是需要往复连续过程，还需要确认下变换的距离是否在前后两个过程连贯、匹配）。

    t=millis()/1000%4;
    stroke(color3);
    strokeWeight(2);
    fill(color3);
    push();
    if(t<2)
    {
        translate(-50*t,10*t);
    }
    if(t>=2)
    {
        translate(50*(t-2)-100,-10*(t-2)+20);
    }
    arc(350,0,80,80,0,PI);
    rect(310,-80,80,80);
    pop();

之后按照我自己的想法把后面几层也努力搭出来就好，最关键的是一定要耐心，尤其是画不规则曲线，不管我们使用bezier还是curve，关键自己要对坐标比例有一定概念，实在不行就拿纸算好再输坐标。（我自己在绘制的时候就差点爆炸了，算坐标算的我没脾气了）

Step 2 人像的绘制

最麻烦的就是头发了，我又不想一个几何体带过，就用Bezier点集一点一点画了，私以为bezier是比curve好用的。功夫不负有心人，三百行代码换来的美丽小人，我还是心满意足的：

需要特别提醒的是，绝对不要忘记了使用点集时，beginShape()函数一定要搭配endShape()，否则页面会一直刷新不出来。

Step 3 交互手段呈现

首先要能让鼠标点击时，产生wink的效果，这其实就是画两个不同的眼睛，点一次换一种：

其次我们还需让画心的函数响应下，产生背景心形丰富的效果。下面贴出这部分代码：（利用一个switch，控制到底是哪种神态）

 switch(flag)
    {
        case 0:
        {
            fill(color3);
            beginShape();
            vertex(425,398);
            bezierVertex(440,390,455,388,470,390);
            endShape();

            strokeWeight(4);
            rect(424, 390, 44, 50, 20);
            fill(color4);
            arc(447,415,30,44,0,2*PI);
            fill(color3);
            arc(440,425,10,15,0,2*PI);
        }break;
        case 1:
        {
            noFill();
            line(425,410,465,397);
            line(425,410,455,423);
        }break;
        case 2:
        {
            fill(color3);
            beginShape();
            vertex(425,398);
            bezierVertex(440,390,455,388,470,390);
            endShape();

            strokeWeight(4);
            rect(424, 390, 44, 50, 20);
            fill(color4);
            arc(447,415,30,44,0,2*PI);
            fill(color3);
            arc(440,425,10,15,0,2*PI);
        }break;
    }

背景生产我没有用时间函数，random函数令我出乎意料，居然可以产生变换的动态效果：

代码块非常简单：

function mouseClicked() {
   count++;
   if(count%2==0)
   {
       flag=2;
   }
   else
       flag=1;
}

这个mouseClicked是我们决胜的关键，我就是用这个设定flag的值。
另一种交互我是通过键盘实现的，值得一提的是，我利用的keyPressed()函数，需要我们知道键盘上按键的keyCode，而这与我们以往不同，但是不用担心我们只需要去Javascript的keycode官网查讯即可。keycode

function keyPressed()
{
    if(keyCode==77) {
        count_++
        if (count_ % 2 == 0) {
            color = color14;
        } else
            color = color15;
        magic=true;
    }
}

Step 4 图片的导入

为了画面的排版和美观考虑，我把Ps内的字体输出成png图像，导入到我的自画像中进行装饰。图片导入需要预导入，还需要注意图层，不要放在背景下会看不到。
这里放上导入部分的代码：

function preload()
{
    img=loadImage('Neverland.png');
}

  image(img,0,-100,500,500);

三、实验成果展示

先看效果截图：
点击鼠标后： 背景中飞过很多心

按下M键后： 出现头上装饰的星星（一直按，手中星星棒的颜色是可以切换的）


（哎，gif实在是太糊了）

四、实验心得

我是个大鸽子，我又把学委咕掉了，但她真的好善良，每次我越过ddl，她都会等我一起交，我发誓，我真的以后再也不拖延了，这个作业如果我早点做了的话，我也不会，现在（4：39am）还在树莓楼快乐的打着我的CSDN博客。这个实验，我感觉做的很有意义，不仅让我又一次亲密接触了码绘，还让我更好的认识了我自己是谁。我已经大三了，经历了大二很多事情之后，一不小心被拿走了属于自己的很重要的东西，大三之后就越来越想把事情每一件都做好，不想再留下遗憾了。我本身是个矛盾体，想要的很多、标准很高、但是身上还是有抹不去的惰性，我想我应该不是单独一个吧，在梦想和现实的门口晃来晃去，好不容易下定决心，最后又想办法帮自己开脱，真反感这样的自己。真的很羡慕身边一些同学，总是坚定而简单，而自己真的差的很远，复杂不沉着，还要让自己变得更好啊，雪梨！最后一句话，送给追梦路上每一个，你所付出的一切都会在不远的将来或是许久之后，好好回报。