码绘——动态图形艺术自画像

最新推荐文章于 2020-11-28 08:22:21 发布

Xinrr

最新推荐文章于 2020-11-28 08:22:21 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/Xinprr/article/details/102788585

版权

#动态图形艺术

自画像
在p5.js上运行的，主要的想法思路为画一个自画像，
并由动态效果，能实现简单的交互作用，结合公式与视觉艺术的效果来创作，
具体呈现为一个小女孩在简易舞台上跳舞，头顶为小圆灯模拟动态灯光效果

##相关步骤

在这里插入图片描述

相关绘画函数：ellipse()、rect()、vertex()、bezier()、text();
2. vertex()函数表示将所有的点连起来，可以进行绘制自定义图形；
3. bezier()函数画曲线：其中第一各坐标点表示曲线的起始点，最后的坐标点表示曲线的终点，中间两个坐标点调节曲线的曲率；
4. 计算坐标点，绘制图像；
5. 其中动态腿的显示：通过sin()函数和时间t来控制达到一个周期跳跃的效果；
6. var t=millis()/12； bezier(340,330,330,70,280,500+30*sin(2*PI*t),270,250); bezier(330,250,380,500-30*cos(2*PI*t),235,85,280,320);
7. 舞台小圆灯显示效果：通过random()函数来控制圆的颜色变化，从而达到炫彩的效果；
8. for(var i=0;i<=10;i++){ let h = random(0, 360); for (let r0 = 40; r0 > 5; --r0) { var r=200-showColor*50,g=30+showColor*30,b=100-showColor*20; fill(r, g+h, b+h); ellipse(50+i*50, 50, r, r); h = (h + 1) % 360; } }
9. 交互设计：点击鼠标左键点击可是实现灯光颜色效果的改变
10. function mouseClicked(){ showColor++; }
11. 文字提示：
12. textFont("隶书"); //字体样式 fill(123, 0 , 0); //字体填充色 stroke(255); textSize(25); //字体大小 text("鼠标左键点击", 420, 90); //文本显示即文本的位置 text("切换灯光颜色", 420, 110);

##详细代码

var showColor=0;
function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);  
}
function draw() {
    var t=millis()/12;
    background(252, 230, 201);
    strokeWeight(0);
    //衣服
    fill(188, 143, 143);
    triangle(300, 150, 260, 250, 350, 250);
    rect(250,200,105,30);
    //裤子
    fill(100,100, 158);  
    bezier(340,330,330,70,280,500+30*sin(2*PI*t),270,250);
    bezier(330,250,380,500-30*cos(2*PI*t),235,85,280,320);
    //头发
    fill(94, 38, 18);
    ellipse(300, 150, 110, 110);
    //脸
    fill(255, 245, 238);
    ellipse(300, 150, 80, 85);
    //头发
    fill(94, 38, 18);   
    beginShape();
    vertex(270, 110);
    vertex(290, 120);
    vertex(315, 115);
    vertex(310, 100);
    endShape(CLOSE);
    beginShape(); 
    vertex(300, 120);
    vertex(340, 140);
    vertex(330, 110);
    vertex(300, 100);
    endShape(CLOSE);
    beginShape(); 
    vertex(280, 100);
    vertex(280, 120);
    vertex(260, 140);
    endShape(CLOSE);
    beginShape();
    vertex(260, 115);
    vertex(240, 190);
    vertex(245, 200);
    vertex(260, 210);
    vertex(270, 120);
    endShape(CLOSE);
    beginShape();
    vertex(246, 140);
    vertex(235, 190);
    vertex(260, 160);
    endShape(CLOSE);
    beginShape();
    vertex(354, 140);
    vertex(360, 190);
    vertex(350, 175);
    vertex(348, 185);
    vertex(330, 160);
    endShape(CLOSE);
    beginShape();
    vertex(260, 190);
    vertex(270, 210);
    vertex(275, 180);
    endShape(CLOSE);
    bezier(340,160,390,220,280,230,335,260);
    bezier(350,160,300,220,370,240,330,255);
    bezier(250,170,295,220,220,240,250,265);
    bezier(260,170,210,230,290,255,245,270);
    //不同发色
    fill(160 ,82, 45);
    beginShape();
    vertex(265, 140);
    vertex(255, 200);
    vertex(260, 210);
    vertex(270, 120);
    endShape(CLOSE);
    fill(94, 38, 18);
    beginShape();
    vertex(340, 130);
    vertex(325, 190);
    vertex(335, 190);
    vertex(350, 130);
    endShape(CLOSE);
    fill(160 ,82, 45);
    beginShape();
    vertex(347, 140);
    vertex(330, 190);
    vertex(335, 190);
    vertex(350, 130);
    endShape(CLOSE);
    beginShape()
    vertex(290,97);
    vertex(260, 120);
    vertex(250, 140);
    vertex(245, 170);
    vertex(265, 124);
    endShape(CLOSE);
    //眼睛
    fill(0, 0, 0);
    ellipse(317, 150, 8, 15);
    ellipse(285, 150, 8, 15);
    //红色
    fill(255, 195, 103);
    beginShape();
    vertex(280, 160);
    vertex(275, 168);
    vertex(276, 168);
    vertex(281, 160);
    endShape(CLOSE);
    beginShape();
    vertex(278, 160);
    vertex(273, 168);
    vertex(274, 168);
    vertex(279, 160);
    endShape(CLOSE);
    beginShape();
    vertex(276, 160);
    vertex(271, 168);
    vertex(272, 168);
    vertex(277, 160);
    endShape(CLOSE);
    beginShape();
    vertex(282, 160);
    vertex(277, 168);
    vertex(278, 168);
    vertex(283, 160);
    endShape(CLOSE);
    beginShape();
    vertex(284, 160);
    vertex(279, 168);
    vertex(280, 168);
    vertex(285, 160);
    endShape(CLOSE);
    beginShape();
    vertex(324, 160);
    vertex(319, 168);
    vertex(320, 168);
    vertex(325, 160);
    endShape(CLOSE);
    beginShape();
    vertex(322, 160);
    vertex(317, 168);
    vertex(318, 168);
    vertex(323, 160);
    endShape(CLOSE);
    beginShape();
    vertex(320, 160);
    vertex(315, 168);
    vertex(316, 168);
    vertex(321, 160);
    endShape(CLOSE);
    beginShape();
    vertex(318, 160);
    vertex(313, 168);
    vertex(314, 168);
    vertex(319, 160);
    endShape(CLOSE);
    beginShape();
    vertex(316, 160);
    vertex(311, 168);
    vertex(312, 168);
    vertex(317, 160);
    endShape(CLOSE);
    //眼镜
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(317, 150, 40, 40);
    ellipse(275, 150, 40, 40);
    //衣服扣子
    stroke(244,164,96);
    strokeWeight(2);
    rect(297,209,10,40);
    ellipse(302, 215, 3, 3);
    ellipse(302, 224, 3, 3);
    ellipse(302, 233, 3, 3);
    ellipse(302, 242, 3, 3);
    //简易舞台
    stroke(0);
    strokeWeight(2);
    ellipse(300, 360, 200, 70);
    //小圆灯
    strokeWeight(0);
   for(var i=0;i<=10;i++){
   let h = random(0, 360);
   for (let r0 = 40; r0 > 5; --r0) {
   var r=200-showColor*50,g=30+showColor*30,b=100-showColor*20;
    fill(r, g+h, b+h);
    ellipse(50+i*50, 50, r, r);
    h = (h + 1) % 360;
   }}
   textFont("隶书");
   fill(123, 0 , 0);
   stroke(255);
   textSize(25);
   text("鼠标左键点击", 420, 90);
   text("切换灯光颜色", 420, 110);
   }
   function mouseClicked(){ 
 showColor++; 
}