【p5.js实战】我的自画像

深藏阁楼爱情的钟 2023-05-29 02:57 15阅读 0赞

![自画像][20191102012725385.gif]

### 配着理工男黑框眼镜的我顶着闪耀的秃头；作为一名合格的数媒学子，几乎每天都要爆肝作业到深夜（包括此刻），直至头脑发昏、眼冒金星。 ###

画这个自画像基本就是图形拼凑的过程，首先是画出自己的头型，然后根据头的比例逐渐找到各个部位的位置，绘制相应的图形，再稍微调整一下大小，整个自画像基本就成型了。

接着要实现秃头上固定位置的旋转星星以及围绕秃头依次散开的星星（动态）。

*  定义angle存储**每个凸顶点的间隔角度**：两倍的π / 顶点数（顶点数应作为参数被传入）
 *  定义halfAngle存储**每个凹顶点与相邻凸顶点的间隔角度**：angle / 2
 *  使用beginShape和endShape绘制每个星星：使用 beginShape() 及 endShape() 函数可创造更复杂的形状。beginShape() 将开始记录形状的顶点，而 endShape() 则停止记录。所提供的参数将决定由所提供的顶点该画出怎样的形状。如果模式没有被提供，所定义的形状可以是任何不规则的多边形。  
      
    可提供给 beginShape() 的参数包括 POINTS、LINES、TRIANGLES、TRIANGLE\_FAN、TRIANGLE\_STRIP、QUADS 及 QUAD\_STRIP。在调用 beginShape() 函数之后，一系列 vertex() 函数必须接着调用。调用 endShape() 以停止绘制形状。每个形状都将会有由当时外线色所定义的外线色及当时的填充色。  
      
    变形函数如 translate()、rotate() 及 scale() 在 beginShape() 内不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在beginShape()里面使用。
 *  通过计算式 **x = rx + cos(A) \* r2; y = ry + sin(A) \* r2;** 计算出圆周上各等分点的坐标，rx与ry不相等并不影响最终形状
 *  endShape(ClLOSE)闭合各个顶点。

下面是自画像代码：

function setup() {
        createCanvas(320, 320);
    }
    
    function draw() {
        background("#FA8072");
    
        push();
        translate(width * 0.5, height * 0.5);
        fill("#f8ff6e")
        noStroke();
        for(let i = 60; i <=100; i+=5) {
            oneStar(i);
        }
        pop();
    
        name();
        face();
        glasses();
        nose();
        mouth();
    
        push();
        translate(width * 0.6, height * 0.28);
        rotate(frameCount / -100.0);
        stroke("#FFFFE0");
        fill("#fc722d")
        star(0, 0, 10, 25, 4);
        pop();
    }
    
    function name() {   
        // 名字
        push();
        stroke("#DC143C");
        strokeWeight(5);
        noFill();
        rectMode(CENTER);
        rect(85, 43, 30, 35, 5);
        line(90, 55, 105, 65);
        line(218, 30,208, 60);
        line(218,30,228,60);
        line(228, 60, 238, 30);
        line(238, 30, 248, 60);
        pop();
    }
    
    function face() {
        // 脸
        push();
        noStroke();
        ellipseMode(CENTER);
        fill("#FFDEAD");
        ellipse(160, 160, 150, 180);
        fill("#FF7F50");
        ellipse(120,205,25,20);
        ellipse(200,205,25,20);
        pop();
    }
    
    function cap() {
        // 帽子
        push();
        noStroke();
        fill(100, 125, 128);
        ellipse(160, 110, 140, 60);
        fill("#008080");
        rectMode(CENTER);
        rect(160, 85, 85, 60, 5);
        pop();
    }
    
    function glasses() {
        // 眼镜
        push();
        rectMode(CENTER);
        fill("#F0FFFF");
        strokeWeight(3)
        rect(135, 170, 40, 25);
        rect(185, 170, 40, 25);
        line(155, 170, 165, 170);
        pop();
    }
    
    function nose() {
        // 鼻子
        push();
        stroke("#F4A460");
        fill("#F4A460");
        triangle(160, 190, 155, 202, 165, 202);
        pop();
    }
    
    function mouth() {
        //嘴巴
        push();
        stroke("#A52A2A");
        fill("#A52A2A");
        arc(159, 218, 30, 25, 0, 3 + QUARTER_PI, CHORD);
        pop();
    }
    
    function star(x, y, radius1, radius2, npoints) {
        let angle = TWO_PI / npoints;                // 两倍的PI，圆形周长与直径的比例的两倍
        let halfAngle = angle / 2.0;
        beginShape();
        for (let a = 0; a < TWO_PI; a += angle) {
          let sx = x + cos(a) * radius2;
          let sy = y + sin(a) * radius2;
          vertex(sx, sy);
          sx = x + cos(a + halfAngle) * radius1;
          sy = y + sin(a + halfAngle) * radius1;
          vertex(sx, sy);
        }
        endShape(CLOSE);
    }
    
    function oneStar(frameee) {
        push();
        rotate(frameCount / -frameee);
        star(120, 0, 11, 25, 5);
        pop();
    }

[20191102012725385.gif]: https://img-blog.csdnimg.cn/20191102012725385.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关互动应用开发p5.js——WebGL太阳系

WebGL太阳系一、实验内容：完成一个太阳系场景，其中至少有三个球体，一个表示太阳，一个表示地球，一个表示月亮；地球不停地绕太阳旋转，月亮绕地球旋转，星球本身有

野性酷女/ 2023年10月01日 15:49/ 0 赞/ 20 阅读

相关互动应用开发p5.js——音视频交互

音视频交互一、实验内容：音频可视化，是指一种以视觉为核心，以音频为载体，以大众为诉求对象，借助多种新媒体技术等传播媒介，通过画面、影像来诠释音乐内容的、视听结合

你的名字/ 2023年10月01日 15:49/ 0 赞/ 37 阅读

相关互动应用开发p5.js——星星的运动

星星的运动一、实验内容：按照章节要求使用p5.js实现星星随机向画布边界运动的效果： 1. 星星近大远小；（20分） 2. 能拖出尾迹；（30分） 3.

╰+哭是因爲堅強的太久メ/ 2023年10月01日 15:48/ 0 赞/ 35 阅读

相关【p5.js】实战练习——无规则对称

![20191017161622626.gif][] 无规则对称绘制过程虽然这句话有点多余，不过老实说，我一开始并没想着做出这么复杂的效果，总之就是....

淡淡的烟草味﹌/ 2023年06月08日 06:51/ 0 赞/ 8 阅读

相关【p5.js】实战临摹——国际象棋盘

![变化的国际象棋盘][2019101715381549.gif] 动态的国际象棋盘分析运动规律通过仔细观察可以发现，黑色方格与白色方格轮流放缩，在黑色方

女爷i/ 2023年06月08日 06:49/ 0 赞/ 31 阅读

相关【p5.js实战】我的自画像

![自画像][20191102012725385.gif] 配着理工男黑框眼镜的我顶着闪耀的秃头；作为一名合格的数媒学子，几乎每天都要爆肝作业到深夜（包括此刻），直至头脑发

深藏阁楼爱情的钟/ 2023年05月29日 02:57/ 0 赞/ 16 阅读

相关 p5js语言和html语言,P5.js 外星人语言符号生成器

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 var outerCell, innerCell; var r, sz,

短命女/ 2022年10月05日 13:57/ 0 赞/ 217 阅读

相关 p5.js画爱心环形动画js特效

[下载地址][Link 1]p5.js画爱心环形动画特效 ![1630056578.png][] dd: [Link 1]: https://yy123.ink/fro

╰半夏微凉°/ 2022年09月09日 06:02/ 0 赞/ 272 阅读

相关 p5.js倒三角发光js特效

[下载地址][Link 1]使用p5.js类库实现的倒三角发光特效 ![1630056663.png][] dd: [Link 1]: https://yy123.in

梦里梦外;/ 2022年09月09日 06:02/ 0 赞/ 237 阅读

相关 Processing.js和P5.js的功能简介和区别

什么是Processing Processing是关于数字艺术的编程语言，支持跨平台，语言本身是一个类Java语言，程序文件的后缀为.pde。通过编写processing程序

缺乏、安全感/ 2021年09月16日 05:06/ 0 赞/ 455 阅读