精华内容
下载资源
问答
  • 创意自画像

    2019-11-04 18:51:00
    自画像在我印象里最多用纸画画但这次上了一门互动媒体的课,我就可以用代码来画出自画像了。 但由于自己学习不够深入只能用一些最基本的图形。 最后效果图如下(别问为什么是秃的,头发画的我头秃那就秃吧) 下面...
    自画像在我印象里最多用纸画画但这次上了一门互动媒体的课,我就可以用代码来画出自画像了。
    

    但由于自己学习不够深入只能用一些最基本的图形。
    最后效果图如下(别问为什么是秃的,头发画的我头秃那就秃吧)
    在这里插入图片描述
    下面是代码

    function setup() {
      createCanvas(500, 500);
      rectMode(CENTER);
    }
    
    
    function draw() {
      
      noStroke();
    background(50 ,150 ,50);
      me();
      
      //tools();
    }
    function me(){
       fill(255 ,228 ,181);//头
      circle(250,170,120);
      rect(250,130,120,90,40);
     
      //circle(187,150,30)//耳朵
     // circle(312,150,30)
    
      //brow
      triangle(200,124,230,126,230,128);
      triangle(300,124,270,126,270,128);
      
      moveEARs();//移动
      
         fill(50);   //鼻子
      noStroke();
      circle(250,175,6);
      fill(209,51,26);
      
      //嘴巴
      fill(150,150,150);
      ellipse(250,200,40,20);
    
      
      fill(245, 245, 225);//身体
      quad(200,230,300,230,325,350,175,350);
       
    
      fill(255, 228, 181);//手
      
      circle(105,285,40);
      circle(420,285,40);
      
      fill(245, 245, 220);//arm
      //rect(170,260,60,40);
      //rect(330,260,60,40);
      quad(118, 300, 118, 270, 236, 230, 220, 263);
      quad(408, 300, 408, 270, 236, 230, 236, 263);
      
    
     
      fill(255, 228, 181);//脚
      circle(220,460,45);
      circle(280,460,45);
      fill(0,0,0);//裤子涂色
      rect(220,400,40,100);
      rect(280,400,40,100);//画裤子,并裤子遮住半圆
          
      
      
     
      
      
    
    
       stroke(0);//sunglasses
      fill(0,0,0); 
       arc(215,138,38,12,PI,0);
       arc(285,138,38,12,PI,0);
       arc(285, 138, 40, 60, 0, PI, OPEN);
       arc(215, 138, 40, 60, 0, PI, OPEN);
       line(210, 145, 265, 145);//middle
       line(191, 138, 195, 138);//LEFT sidepiece
       line(300, 138, 310, 138);//right
    
     
    }
    

    基本是按找从上到下的顺序来画的,中间用了几个四边形和圆形相结合,主要问题是头不能用圆画,想了很久,头发也想的很头秃。
    动态弄了个动耳神功,因为耳朵比较大,小时候看大耳朵图图一直比较欣赏动耳神功。
    在这里插入图片描述
    下面是头秃的人曾经有过的头发。
    在这里插入图片描述

    展开全文
  • p5.js绘制创意自画像

    2020-10-16 01:27:03
    主要为大家详细介绍了p5.js绘制创意自画像,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • P5.js创意自画像编程

    2019-10-31 14:40:37
    P5.js创意自画像编程要求自画像创作坐标的计算颜色填充动态背景与交互功能的添加背景动态图添加声音与图片时间停止效果最终代码 要求 主题:用编程方式创作一幅介绍自己的作品 作品: 一件编程创意作品,必须实现动态...

    要求

    主题:用编程方式创作一幅介绍自己的作品

    作品: 一件编程创意作品,必须实现动态效果或交互效果;作品录制一段一分钟内的视频;作品可以是具象化地描绘自己的形象,也可以是任何形式表现自己的兴趣、追求、特色、经历等;

    自画像创作

    想了好久自己的自画像是什么样子,最后决定画一个JOJO的奇妙冒险里的迪奥。不是因为自己长得像,大概是我也不想做人了吧。因为是要码绘,所以过于复杂的图案代码敲起来太浪费时间,就设计了一个Q版的造型。最终图如下:
    在这里插入图片描述
    最终成果图:
    在这里插入图片描述

    坐标的计算

    由于dio爷那飘逸的发型,图像中大部分需要运用曲线。查了查p5的参考https://p5js.org/zh-Hans/reference,p5中的曲线用的是贝塞尔曲线算法。
    在这里插入图片描述
    那么问题就出现了,如何才能准确的找到自己在纸上画的图案的控制点与锚点坐标呢?
    看到贝塞尔曲线,突然想到之前做过的图形学作业,制作一个简单的画图系统。其中的曲线就用到了贝塞尔曲线算法,可以通过移动鼠标在屏幕获取鼠标坐标,就能看到锚点与控制点坐标了。于是就翻了翻之前的作业,虽然简陋了点,但刚好能解决这个问题。不管白猫黑猫,逮到耗子就是好猫。剩下的只是繁重的坐标的记录。鼠标坐标显示左上角

    颜色填充

    用bezier曲线画好图形后,用fill()函数填充。发现并不能达到我们想要的效果。
    在这里插入图片描述
    虽然已经形成封闭的形状,但fill()函数并没有完美的填充,大概是顶点的遍历问题。解救办法是改用bezierVertex()函数。
    在这里插入图片描述

    动态背景与交互功能的添加

    背景动态图

    因为人物来自动漫,并且是dio爷标志性”扣no迪奥哒“动作,所以背景希望添加上漫画的网线效果。具体代码参考了网上的生成光芒线的代码https://wow.techbrood.com/fiddle/32556

    var angle = 0;
    var offset = 30;
    var offset2 = 20000;
    var scalar = 90;
    var speed = 1;
    
    function setup() {
        createCanvas(500, 500);
        background(200);
        stroke(255, 0, 0)
        strokeWeight(.1);
    }
    
    function draw() {
        var y1 = offset + sin(angle) * scalar;
        var y2 = offset2 + sin(angle + 0.4) * scalar;
        for (var i = 0; i < 1; i++) {
            translate(width / 2, height / 2)
            rotate(angle)
            push()
            y1 = offset + sin(angle) * scalar;
            rotate(angle)
            line(0, 10 + angle / 9, 1000, y2);
            angle += speed;
            pop()
        }
    }
    

    添加声音与图片

    通过P5.js官网的在线编辑器,很容易在项目中添加声音与图像资源,具体操作参考https://www.php.cn/js-tutorial-395952.html。但将项目下载并在网页打开就无法加载音频图片资源,还不知道怎么解决。添加好资源后加上鼠标交互就能达到很好打效果。

    
    //点击右键加载不做人了的图片与音频
    //点击右键加载咋瓦鲁多的图片与音频
    function loading() {
      if (mouseIsPressed) {
        if (mouseButton === RIGHT) {
          mySound.setVolume(1);
          mySound.play();
          imageMode(CENTER);
          //绘制图片 
          image(img, 200, 200);
          tint(0, 153, 204, 126); //渲染
        }
        if (mouseButton === LEFT) {
                mySound.setVolume(1);
          mySound1.play();
                imageMode(CENTER);
          //绘制图片 
          image(img2, 200, 200);
                imageMode(CENTER);
          //绘制图片 
          image(img1, 200, 200);
          tint(0, 153, 204, 126); //渲染
        }
    
      }
    }
    
    

    在这里插入图片描述
    在这里插入图片描述

    时间停止效果

    迪奥在动漫中喊出“the world !”会产生时停。所以想着在右上角添加一个时钟,点击左键会加载图片和音频并让始终停止。
    下面是时钟代码,艺术字体参考网上:https://mlln.cn/2018/06/06/p5.js%E6%95%99%E7%A8%8B06-%E6%98%BE%E7%A4%BA%E6%96%87%E5%AD%97/

    var showEllipse = false;
    let value = 0;
    
    function preload() {
      let style = document.createElement('link')
      style.rel = "stylesheet"
      style.href = 'https://fonts.googleapis.com/css?family=Gaegu'
      document.getElementsByTagName('head')[0].appendChild(style)
    }
    
    function setup() {
      createCanvas(800, 800);
      textFont("Gaegu");
      // 设置填充颜色
      fill(123, 0, 0)
      // 设置框线
      stroke(255)
    
    }
    
    function draw() {
      background(220);
      time();
      //if (mouseIsPressed) {
      //sleep(3000);
    
      //}
    
    
    }
    
    function mouseClicked() {
      if (mouseButton === CENTER) {
        showEllipse = !showEllipse;
        if (value === 0) {
          noLoop();
          value = 255;
        } else {
          loop();
          value = 0;
        }
      }
    }
    
    
    function time() {
      let y = year();
      let m = month();
      let d = day();
      let h = hour();
      let mi = minute();
      let s = second();
      let millisecond = millis();
      // 设置字体大小
      textSize(26);
      text('current time: ' + y + '-' + m + '-' + d + '  ' + h + ':' + mi + ':' + s + ':' + millisecond, 25, 60);
    
      if (showEllipse) {
        ellipse(200, height / 2, 50, 50);
        //sleep(3000);
        //setTimeout("time()", 3000);
      }
    
    }
    
    function sleep(milliseconds) {
      setTimeout(function() {
        var start = new Date().getTime();
        while ((new Date().getTime() - start) < milliseconds) {
          // Do nothing
        }
      }, 0);
    }
    

    代码很简单,用了p5中写好的时间函数获取系统当前时间。问题是如何产生时停效果?试了很多方法,什么计时器setTimeout()函数或自定义的sleep()函数都不好使,最后发现p5中有一个noLoop()函数。
    在这里插入图片描述
    通过停止 p5.js 持续重复执行 draw() 内的代码达到时停效果。但又出现了一个问题:通过鼠标交互,左键一下,时间停止,假如停在了当前的15点25分12秒,如果是时停,那么再次点击鼠标时,时间应该从25分13秒开始,然而再次点击,时间只会继续跳到系统当前时间。所以这不是世界的时停,这是绯红之王的时删,感觉我参透了JOJO(捂脸笑哭)。而且我不知道怎么改,觉得最开始我应该画一个迪亚波罗。
    还有一个问题就是显示的时间总是后一秒盖住前一秒,代码在其他跑就没这个问题,不知道怎么回事,有待改良。

    最终代码

    var img;
    var img1;
    var img2;
    var sign;
    let value = 0;
    var angle = 0;
    var offset = 30;
    var offset2 = 20000;
    var scalar = 90;
    var speed = 8;
    
    
    function preload() {
      soundFormats('mp3', 'ogg');
      mySound1 = loadSound('theworld1.mp3');
      mySound = loadSound('buzuorenle.mp3');
      //加载图片文件 
      img = loadImage("buzuoren.png");
      img1 = loadImage("theworld1.png");
        img2 = loadImage("theworld2.png");
      //字体
      let style = document.createElement('link')
      style.rel = "stylesheet"
      style.href = 'https://fonts.googleapis.com/css?family=Gaegu'
      document.getElementsByTagName('head')[0].appendChild(style)
    
    }
    
    function setup() {
      createCanvas(900, 580);
      background(210);
      sign = 0;
      textFont("Gaegu");
    }
    
    function draw() {
      time();
      loading();
      noFill();
    
      stroke(255, 170, 149); //粉线
      //stroke(0);
      strokeWeight(4);
      //手
      beginShape();
      fill(255, 230, 215);
      vertex(283, 405);
      bezierVertex(303, 381, 339, 385, 341, 402); //54
      bezierVertex(274, 426, 309, 474, 256, 503); //55
      bezierVertex(151, 528, 216, 355, 283, 405); //56
      //bezierVertex(523, 398, 391, 433, 391, 433);
      endShape();
    
      //补线
      noFill();
      bezier(283, 405, 301, 428, 275, 448, 250, 415); //57
      bezier(247, 414, 299, 438, 270, 469, 234, 438); //58
      bezier(234, 440, 281, 455, 257, 485, 224, 457); //59
      bezier(224, 456, 271, 475, 251, 501, 213, 480); //60
    
    
      stroke(255, 216, 68);
      //stroke(0);
      strokeWeight(4);
      //身子
      beginShape();
      fill(255, 238, 176);
      vertex(391, 433);
      bezierVertex(367, 437, 338, 460, 321, 478); //50
      bezierVertex(378, 506, 571, 498, 645, 450); //51
      bezierVertex(594, 424, 559, 405, 523, 398); //52
      bezierVertex(523, 398, 391, 433, 391, 433);
      endShape();
    
      //脖子
      beginShape();
      fill(255, 230, 215);
      vertex(402, 381);
      bezierVertex(408, 391, 408, 391, 411, 407); //49
      bezierVertex(317, 483, 611, 419, 492, 388); //53
      bezierVertex(492, 388, 481, 367, 481, 367);
      bezierVertex(481, 367, 402, 381, 402, 381);
      endShape();
    
      stroke(255, 170, 149); //粉线
      //stroke(0);
      strokeWeight(4);
      bezier(402, 381, 411, 400, 416, 413, 417, 423); //49.5
      bezier(482, 376, 488, 384, 492, 392, 499, 400); //
    
      //脸
      beginShape();
      fill(255, 230, 215);
      vertex(588, 285);
      bezierVertex(642, 178, 731, 342, 597, 320); //p2-p1   
      bezierVertex(539, 435, 284, 416, 324, 311); //34  
      bezierVertex(295, 357, 248, 274, 316, 268); //36
      bezierVertex(316, 268, 316, 160, 316, 160);
      bezierVertex(316, 160, 459, 100, 459, 100);
      bezierVertex(459, 100, 592, 153, 592, 153);
      bezierVertex(592, 153, 588, 285, 588, 285);
      endShape();
    
    
      stroke(255, 216, 68);
      //stroke(0);
      strokeWeight(4);
      //头发组1 11-16
      beginShape();
      fill(255, 238, 176);
      vertex(358, 207);
      bezierVertex(346, 196, 336, 214, 337, 251); //11
      bezierVertex(337, 251, 326, 237, 326, 237); //11.5  
      //bezier(341,152,324,186,303,211,337,251);//12
      //bezier(326,237,318,247,328,263,332,294);//13
      bezierVertex(318, 247, 328, 263, 332, 294); //13
      bezierVertex(321, 276, 308, 256, 307, 253); //14  
      bezierVertex(302, 236, 303, 277, 303, 277); //15.5-14
      bezierVertex(289, 264, 274, 267, 272, 250); //15.5
      bezierVertex(262, 231, 283, 210, 259, 189); //15
      bezierVertex(259, 189, 283, 203, 283, 203); //15-16 
      bezierVertex(268, 169, 278, 145, 310, 121); //16
      bezierVertex(310, 121, 309, 151, 309, 151); //16-17	
    
      //头发组2 17-22
      bezierVertex(307, 125, 355, 112, 363, 67); //17
      bezierVertex(363, 67, 379, 107, 379, 107); //17-18
      bezierVertex(385, 63, 455, 76, 478, 40); //18
      bezierVertex(478, 40, 466, 74, 466, 74); //18-19
      bezierVertex(497, 45, 563, 113, 618, 83); //19
      bezierVertex(618, 83, 591, 110, 591, 110); //19-20
      bezierVertex(617, 104, 639, 115, 663, 144); //20
      bezierVertex(663, 144, 624, 138, 624, 138); //20-21    
      bezierVertex(646, 134, 659, 178, 671, 221); //21
      bezierVertex(644, 204, 647, 218, 629, 209); //22	
    
      //头发组3 23-28
      bezierVertex(669, 214, 656, 279, 716, 292); //23
      bezierVertex(698, 308, 674, 308, 665, 308); //24
      bezierVertex(665, 308, 696, 327, 696, 327); //24-25
      bezierVertex(676, 334, 655, 330, 634, 324); //25
      bezierVertex(621, 339, 628, 347, 640, 362); //31
      bezierVertex(625, 362, 611, 356, 602, 351); //32
      bezierVertex(602, 351, 600, 382, 600, 382); //32-33
      bezierVertex(587, 375, 577, 367, 568, 355); //33  
      bezierVertex(582, 342, 590, 330, 597, 320); //33-p1
      bezierVertex(731, 342, 642, 178, 588, 285); //p1-p2
      bezierVertex(589, 258, 575, 237, 561, 230); //28   
      bezierVertex(553, 242, 546, 250, 538, 257); //28-p3    
      bezierVertex(548, 235, 544, 219, 529, 218); //30
      bezierVertex(525, 194, 503, 127, 449, 169); //30-p4
      bezierVertex(424, 124, 384, 167, 358, 207); //p4-11
    
      //bezierVertex(568, 355, 586, 286, 586, 286); //33-28
      //bezierVertex(577, 257, 587, 234, 560, 228); //28  
      //bezierVertex(560, 228, 449, 168, 449, 168); //28-3
      //bezierVertex(449, 168, 358, 207, 358, 207); //3-11 
      endShape();
    
      //补线
      noFill();
      bezier(671, 221, 647, 195, 626, 228, 606, 189); //22
      bezier(358, 207, 346, 196, 336, 214, 337, 251); //11
      bezier(341, 152, 324, 186, 303, 211, 337, 251); //12
      bezier(326, 237, 318, 247, 328, 263, 332, 294); //13
      bezier(544, 149, 591, 184, 565, 218, 540, 257); //29
      bezier(586, 286, 599, 259, 609, 233, 624, 234); //27
      bezier(302, 236, 308, 256, 321, 276, 332, 294); //14  
    
      stroke(0, 128, 64);
      //stroke(0);
      strokeWeight(4);
      //头戴7-8
      beginShape();
      fill(161, 190, 160);
      vertex(507, 193);
      bezierVertex(476, 206, 425, 203, 392, 192); //7
      bezierVertex(392, 192, 390, 225, 390, 225);
      bezierVertex(416, 230, 480, 237, 508, 221); //8
      bezierVertex(508, 221, 502, 193, 507, 193);
      endShape();
      //心9-10
      bezier(448, 245, 410, 223, 405, 180, 450, 196); //9
      bezier(448, 245, 494, 223, 488, 177, 450, 196); //10
    
    
      stroke(255, 216, 68);
      //stroke(0);
      strokeWeight(4);
      //刘海1-6
      beginShape();
      fill(255, 238, 176);
      vertex(398, 244);
      bezierVertex(308, 193, 392, 149, 429, 134); //1
      bezierVertex(442, 124, 440, 155, 449, 168); //3
      bezierVertex(467, 144, 472, 132, 485, 142); //4
      bezierVertex(514, 153, 568, 223, 489, 249); //5
      bezierVertex(527, 203, 489, 149, 449, 176); //6
      bezierVertex(424, 144, 377, 193, 398, 244); //2
      endShape();
    
      stroke(255, 170, 149);
      //stroke(0);
      strokeWeight(4);
      //嘴 34-40
      beginShape();
      fill(255);
      vertex(480, 337);
      bezierVertex(443, 386, 423, 401, 408, 344); //38
      bezierVertex(428, 348, 468, 343, 480, 337); //37
      endShape();
      //牙
      beginShape();
      fill(255, 255, 255);
      vertex(480, 337);
      bezierVertex(487, 342, 491, 353, 494, 361); //39
      bezierVertex(501, 347, 503, 334, 505, 330); //40
      bezierVertex(498, 331, 492, 336, 480, 337);
      endShape();
    
      //眼 41-42
      beginShape();
      fill(242, 43, 1);
      vertex(419, 283);
      bezierVertex(390, 313, 404, 327, 345, 262); //41
      bezierVertex(345, 262, 419, 283, 419, 283);
      endShape();
      beginShape();
      fill(242, 43, 1);
      vertex(573, 267);
      bezierVertex(492, 326, 521, 315, 478, 282); //42
      bezierVertex(478, 282, 573, 267, 573, 267);
      endShape();
    
      stroke(255, 216, 68);
      //stroke(0);
      strokeWeight(4);
      //左眉毛 43-48
      beginShape();
      fill(255, 238, 176);
      vertex(351, 237);
      bezierVertex(351, 237, 408, 272, 408, 272); //43
      bezierVertex(408, 272, 416, 259, 416, 259); //45
      bezierVertex(416, 259, 351, 237, 351, 237); //44
      endShape();
      //右眉毛
      beginShape();
      fill(255, 238, 176);
      vertex(540, 241);
      bezierVertex(540, 241, 477, 260, 477, 260); //46
      bezierVertex(477, 260, 480, 274, 480, 274); //48
      bezierVertex(480, 274, 540, 241, 540, 241); //47
      endShape();
    
      beijing();
    
    }
    
    function beijing() {
      stroke(0);
      strokeWeight(1);
      //背景  
      var y1 = offset + sin(angle) * scalar;
      var y2 = offset2 + sin(angle + 0.4) * scalar;
      for (var i = 0; i < 1; i++) {
        translate(width / 2, height / 2)
        rotate(angle)
        push()
        y1 = offset + sin(angle) * scalar;
        rotate(angle)
        line(0, 10 + angle / 9, 1000, y2);
        angle += speed;
        pop();
      }
    
    }
    
    
    //点击右键加载不做人了的图片与音频
    //点击右键加载咋瓦鲁多的图片与音频
    function loading() {
      if (mouseIsPressed) {
        if (mouseButton === RIGHT) {
          mySound.setVolume(1);
          mySound.play();
          imageMode(CENTER);
          //绘制图片 
          image(img, 200, 200);
          tint(0, 153, 204, 126); //渲染
        }
        if (mouseButton === LEFT) {
                mySound.setVolume(1);
          mySound1.play();
                imageMode(CENTER);
          //绘制图片 
          image(img2, 200, 200);
                imageMode(CENTER);
          //绘制图片 
          image(img1, 200, 200);
          tint(0, 153, 204, 126); //渲染
        }
    
      }
    }
    
    
    function time() {
      //rect(550, 60, 55, 55, 20);
        fill(123, 0, 0)
      // 设置框线
      stroke(255)
    
      //let y = year();
      //let m = month();
      //let d = day();
      let h = hour();
      let mi = minute();
      let s = second();
      let millisecond = millis();
      // 设置字体大小
      textSize(35);
      text(h + ':' + mi + ':' + s, 650, 60);
    
    }
    
    
    function mouseClicked() {
      if (mouseButton === LEFT) {
        if (value === 0) {
          noLoop();
          value = 255;
        } else {
          loop();
          value = 0;
        }
      }
      
    }
    
    
    展开全文
  • 使用p5.js画一幅创意自画像 使用p5.js画一幅创意自画像 用编程方式创作一幅介绍自己的图片,因为我很喜欢五月天,所以我的自画像就是展示我去看演唱会的样子,穿着五月天Logo的stayrealT恤,摇着荧光棒,快乐追星!...

    使用p5.js画一幅创意自画像

    使用p5.js画一幅创意自画像

    用编程方式创作一幅介绍自己的图片,因为我很喜欢五月天,所以我的自画像就是展示我去看演唱会的样子,穿着五月天Logo的stayrealT恤,摇着荧光棒,快乐追星!!

    工具

    网页版p5.js ( https://editor.p5js.org)

    预期效果


    能实现交互效果,鼠标移到荧光棒开关时,荧光棒可以打开,并且随时间变换不同的颜色,鼠标点击任意位置时,背景可以切换到五月天LOGO的皇冠亮起。
    但是我试了一下,我想像的东西要实现的话,过程会很繁琐,以我的能力和耐心,我觉得不行。(dbq五月天)

    最终效果

    链接:https://editor.p5js.org/couchpotatooo/full/W8HeSmo9C
    图片:
    在这里插入图片描述
    在这里插入图片描述
    荧光棒可以变色,但是过程很短只能在刚运行的时候看到变色过程。
    鼠标点击任意位置时,可以进行背景的简单切换,切换的背景可以动态变换(虽然图形很简单)

    步骤及代码

    首先,预设背景:

    function setup() {
      createCanvas(600, 400);
      happy=0;
      i=1;
    }

    happy=0;i=1;是为了后面两种不同情况的背景变换。
    背景变换:

    push();
        if(happy===0){
        background(194,158,199);
     fill(189,125,181);
     noStroke();
        rect(0,50,600,100);
     rect(0,200,600,100);
        rect(0,350,600,100);
        }
      else{
        background(238,180,180);
        fill(205,155,155);
        noStroke();
        y1=50*(i-3); 
        rect(0,y1,600,100);
        rect(0,y1+150,600,100);
        rect(0,y1+300,600,100);  
        rect(0,y1+450,600,100);
        i+=0.03;
        if(y1>50)
        {
          i=1;
        }
          
        }
     pop();

    基本形象绘制:

    //画头发
      fill(205,92,92);
      arc(270,80,70,180,0.5*PI,PI);
       arc(330,125,55,98,1.5*PI,0.5*PI);
    //画帽子
       fill(0,0,0);
      arc(290,80,120,125,PI,2*PI);
      fill(245,245,220);
      rect(230,70,120,10);
      rect(230,70,10,10);
      fill(189,183,107);
      rect(250,70,10,10);
      fill(188,143,143);
      rect(280,70,10,10);
      fill(189,183,107);
      rect(300,70,10,10);
      fill(188,143,143);
      rect(320,70,10,10);
      fill(189,183,107);
      rect(340,70,10,10);  
      fill(0,0,0);
      rect(280,10,10,20);
      //眉毛
      fill(0,0,0);
      rect(270,83,15,3);
      rect(315,83,15,3);
      //眼睛
      fill(255,255,255);
      ellipse(275,105,15,15);
      ellipse(325,105,15,15);
      fill(0,0,0);
      ellipse(275,105,5,5);
      ellipse(325,105,5,5);
      //鼻子
      fill(255,255,255);
      triangle(300,108,305,120,300,120);
      //腮红
      fill(238,99,99);
      arc(270,130,20,20,1.5*PI,0.5*PI);
      arc(330,130,20,20,0.5*PI,1.5*PI);
    //脖子
      fill(255,228,181);
      rect(293,160,13,13);//衣服
      fill(250,240,230);
      arc(300,230,100,130,PI,0);
      fill(0,191,255 );
      line(290,220,280,220);
      line(320,220,310,220);
      line(280,220,280,190);
      line(320,220,320,190);
      line(290,220,300,213);
      line(300,213,310,220);
      line(280,190,300,200);
      line(320,190,300,200);
      line(300,200,300,213);
      line(285,220,300,176);
      line(315,220,300,176);
      //手
      fill(255,228,181);
      ellipse(245,230,25,25);
      ellipse(350,230,25,25);
    //荧光棒
      fill(255,255,255);
      rect(235,230,10,-80);
      rect(350,230,10,-80);
    line(235,210,245,210);
      line(360,210,350,210);
      rect(230,215,3,5);
      rect(360,215,3,5);

    控制荧光棒变色:
    用到ease()方法,使用之前定义参数。

    var hoverR=30;
    var hoverG=144;
    var hoverB=255;
    var exitR=30;
    var exitG=144;
    var exitB=255;
    var R=0;
    var G=0;
    var B=0;
    var ease=0.1;
    var rectX1=235;
    var rectY1=210;
    var rectHeight=-80;
    var rectWidth=10;

    具体ease()方法使用:

    if(rectX1-rectWidth/2 && mouseX<=rectX1+rectWidth/2&&
          mouseY>=rectY1-rectHeight/2 && mouseY<=rectY1+rectHeight/2){
       R+=(hoverR-R)*ease;
        G+=(hoverG-G)*ease;
        B+=(hoverB-B)*ease;
      }
      else{
        R+=(exitR-R)*ease;
        G+=(exitG-G)*ease;
        B+=(exitB-B)*ease;
      }
      fill(R,G,B);
       rect(rectX1,rectY1,rectWidth,rectHeight);
       rect(350,210,10,-80);
    }

    实现鼠标简单交互效果:

    function mouseClicked()
    {
      if(happy===0)
      {
        happy=1;
      }else{
        happy=0;
      }
    }

    参考资料:

    https://editor.p5js.org/kkk0916/sketches/U4X51Jrvf

    总结

    虽然感觉没有手绘的自画像可爱,由于对曲线应用不熟练,码绘出来的形象甚至有点憨,不过还是勉强达到了想要的效果,我还是挺满意的。不过之后的学习过程中还是要学习更多的码绘知识,让码绘出来的形象不要过于生硬。(最后说一句,我永远爱五月天!!!)

    展开全文
  • 创意自画像 主要是人物各个线的坐标,角度等等比较难算,花了一下午加一晚上的时间。 画完这个人物还需要各种微调,最后呈现出来的效果如下。 弧度的角度要调好,不然填充的时候会变成这种效果。 交互功能 1.鼠标...

    创意自画像

    主要是人物各个线的坐标,角度等等比较难算,花了一下午加一晚上的时间。
    画完这个人物还需要各种微调,最后呈现出来的效果如下。

    在这里插入图片描述
    弧度的角度要调好,不然填充的时候会变成这种效果。
    在这里插入图片描述

    交互功能

    1.鼠标点击拖动人物,改变人物位置;
    2.鼠标左击,雪花飘落效果,再点一次,雪花效果消失;
    3.鼠标右击,花瓣飘落效果,再点一次,花瓣效果消失。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    代码

    1.自画像

    function drawmine(x,y){
    
    	push();
    	stroke(139,71,38);
    	fill(255,255,255);
    	ellipse(x,y-4,100,95);
    	ellipse(x,y-15,100,95);
    	pop();
    
    	stroke(139,71,38);
    
    	strokeWeight(1.5);
    
    	arc(x,y-4,100,95,0,PI);//脸
    	//眉毛
    	arc(x-28, y-20,25,10,PI,2*PI);
    	arc(x+28, y-20,25,10,PI,2*PI);
    
    	strokeWeight(3);
    	
    	ellipse(x-28,y,42,42);//左眼镜
    	ellipse(x+28,y,42,42);//右眼镜
    	line(x-5,y,x+5,y);
    
    	//双眼皮
    	strokeWeight(1);
    	arc(x-28, y-8,25,10,PI,2*PI);
    	arc(x+28, y-8,25,10,PI,2*PI);
        //嘴巴
    	arc(x, y+28,18,10,0,0.8*PI);
    
      
    
    
        //眼睛
    	push();
    	noStroke();
    	fill(139,71,38);
    	ellipse(x-28,y,25,25);//左眼
    	ellipse(x+28,y,25,25);//右眼
    	pop();
    
    	//眼睛的高光
    	push();
    	noStroke();
    	fill(255,255,255);
    	ellipse(x-26,y+10,16,10);//
    	ellipse(x+26,y+10,16,10);//
    	ellipse(x-26,y-6,8,8);
    	ellipse(x+26,y-6,8,8);
    	ellipse(x-39,y,4,4);
    	ellipse(x+39,y,4,4);
    	pop();
    
    	//头发
    	push();
        //noFill();
        fill(139,71,38);
        strokeWeight(1.5);
        stroke(255,255,255);
     
    	arc(x, y-26,105,100,PI,1.5*PI);
    	arc(x, y-26,105,100,1.5*PI,2*PI);
    
    	arc(x+64, y+30,59,180,1.44*PI,2.2*PI);
    	arc(x+82, y-40,60,180,0.5*PI,PI);
    	line(x+82,y+49,x+85,y+40);
    	line(x+85,y+40,x+92,y+50);
    
    	arc(x-64, y+30,59,180,0.8*PI,1.56*PI);
    	arc(x-82, y-40,60,180,0,0.5*PI);
    	line(x-82,y+49,x-85,y+40);
    	line(x-85,y+40,x-92,y+50);
    	
    	//刘海
    	strokeWeight(1.5);
    	// arc(x,y-50,50,30,0.3*PI,PI);
    	// arc(x+20,y-50,30,30,0.3*PI,0.9*PI);
    	// arc(x-50, y-45,50,40,0,0.5*PI);
    	// line(x-40,y-28,x-40,y-45);
    	// line(x-20,y-28,x-20,y-50);
    	// line(x,y-28,x,y-53);
    	// line(x+20,y-28,x+20,y-50);
    	// line(x+40,y-28,x+40,y-45);
    	pop();
    
    	//身子
    	strokeWeight(1.5);
    	arc(x, y+45,10,10,0,PI);
    
    	arc(x-10, y+70,15,50,PI,1.5*PI);
    	arc(x+10, y+70,15,50,1.5*PI,2*PI);//肩膀
    	arc(x-10, y+70,15,30,0.6*PI,PI);
    	arc(x+10, y+70,15,30,0,0.4*PI);
    	line(x-13,y+60,x-10,y+80);
    	line(x+13,y+60,x+10,y+80);
    	line(x-10,y+80,x-30,y+120);
    	line(x+10,y+80,x+30,y+120);
     
    	arc(x, y+120,63,5,0,PI);
    
    
    	arc(x-10, y+122,10,40,0,PI);
    	arc(x+10, y+122,10,40,0,PI);
    
    }
    

    2.花瓣

    function hua(x,y) {
    	  angle += 0.1;
        let val = cos(radians(angle)) * 12.0;
        for (let a = 0; a < 360; a += 75) {
          let xoff = cos(radians(a)) * val;
          let yoff = sin(radians(a)) * val;
          fill(255,106,106);
          ellipse(x + xoff, y + yoff, val, val);
        }
        fill(255);
        ellipse(x, y, 2, 2);
    }
    

    3.雪花

    function snowflake() {
    	noStroke();
      // initialize coordinates
      this.posX = 0;
      this.posY = random(-50, 0);
      this.initialangle = random(0, 2 * PI);
      this.size = random(2, 5);
    
      // radius of snowflake spiral
      // chosen so the snowflakes are uniformly spread out in area
      this.radius = sqrt(random(pow(width / 2, 2)));
    
      this.update = function(time) {
        // x position follows a circle
        let w = 0.6; // angular speed
        let angle = w * time + this.initialangle;
        this.posX = width / 2 + this.radius * sin(angle);
    
        // different size snowflakes fall at slightly different y speeds
        this.posY += pow(this.size, 0.5);
    
        // delete snowflake if past end of screen
        if (this.posY > height) {
          let index = snowflakes.indexOf(this);
          snowflakes.splice(index, 1);
        }
      };
    
      this.display = function() {
        ellipse(this.posX, this.posY, this.size);
      };
    }
    

    4.交互,主函数

    // 函数setup() : 准备阶段
    function setup() {
    	// 创建画布,宽度320像素,高度320像素
    	// 画布的坐标系统为,左上角坐标为(0,0),
    	// x方向水平向右,y方向垂直向下,单位像素		
    	createCanvas(window.innerWidth, window.innerHeight);
    }
    
    // 函数draw():作画阶段
    var x=300; 
    var y=300;
    var r=100; 
    let angle = 0;
    var issnow=false;
    var isflower= false;
    var huax = 0;
    var huay = 0;
    
    let snowflakes = []; // array to hold snowflake objects
    let flowers = []; 
    
    
    function draw() {
    	let t = frameCount / 60; // update time
    	background(0,0,40);//背景色
    
    
    	if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r)
    	{ 
            x=mouseX; 
            y=mouseY; 
        } 
        drawmine(x,y);
    
        if (mouseIsPressed) 
        { 
    		if (mouseButton == LEFT) 
    		{
    			if(issnow===false)
    		        issnow=true;
    	        else
    		        issnow=false; 
            }  
    		if (mouseButton == RIGHT) 
    		{   
    			if(isflower===false)
    				isflower=true;
    	        else
    		        isflower=false;
    	    }
    	} 
    			
    
    
    	if(issnow===true)
    	{
    	    for (var i = 0; i < random(5); i++) 
    	    {
    	        snowflakes.push(new snowflake()); 
    	    }
    	    for (let flake of snowflakes) 
    	    {
    	        flake.update(t);
    	        flake.display();  
    	    }
    	}
    
    
        if(isflower===true)
    	{
    			
    		hua(huax+70,huay+100);
    		hua(huax+70,huay+100);
    		hua(huax+200,huay-100);
    		hua(huax+300,huay-200);
    		hua(huax+400,huay+200);
    		hua(huax+500,huay+400);
    		hua(huax+600,huay-300);
    		hua(huax+800,huay-500);
    
    		hua(huax+70,huay);
    			huax+=0.5;
    			huay+=3;
    			if(huax>window.innerWidth)
    				{huax = -10;}
    			if(huay>window.innerHeight)
    				{huay = -10;}
    	 
    	}
    }
    

    参考P5.JS官方文档链接
    雪花飘落

    展开全文
  • P5.js之创意自画像

    2019-11-03 16:09:45
    创意自画像 自画像?用笔我都画不出来,更何况是用代码敲。所谓自画像可以是写实的画也可以是写意的图像,表达自己的特点就可以。 身为理工男,特点就是下面这些: study=["C#","Unity","VS","C/C++","java","QT...
  • 码绘动态创意自画像

    2019-11-04 20:45:45
    码绘动态创意自画像使用的基本知识实现代码代码结果 使用的基本知识 random(a,b)\随机生成a,b间的数字 ellipse(m,n,a,b);\以m,n为圆心生成长a宽b的椭圆 stroke();\图形边缘线的颜色; fill();\填充颜色 line(a1,b1,a2...
  • 创意自画像 工具:processing 这幅图画的是弹尤克里里时的我。 实现音符随帧数飘走的动态效果,即将音符的x,y坐标根据帧数的变化进行相加或相减,实现平移出画面的效果。 ...
  • 【p5.js】 创意自画像

    2019-11-03 11:32:50
    【互动媒体技术】 创意自画像成果展示步骤和代码总结 成果展示 鼠标单机左键可以改变衣服颜色 步骤和代码 从底层到上层的绘画顺序为:身体,耳朵,脸,头发,眼睛眉毛嘴 身体用的四边形和圆 耳朵用的圆 脸用的曲线 ...
  • Originality Self-portrait 创意自画像——p5.js 1.对自己的理解——以便自画。 个人性格比较像熊,平时吃饱喝足还是比较温顺的,但是烦心事比较暴躁,看什么东西都会不爽,所以我觉得我就像头熊,所以我就像画一只...
  • 创意自画像 主题 用编程方式创作一幅介绍自己的作品 要求 编程语言与工具:编程可以用p5,processing,若想用其他语言或工具,提前向老师说明情况; 作品: 一件编程创意作品,必须实现动态效果或交互效果;作品...
  • [课后作业]基于P5.JS的创意自画像 效果图(可以说是很符合自己了): 实现代码: function setup() { createCanvas(400, 400); } function draw() { background(220); fill(255,228,181); ellipse(200,200,...
  • 创意编程-创意自画像

    2019-11-03 13:55:32
    beginShape()->vertex()顶点->quadraticVertex()曲线顶点->endShape()自定义形状(主要用于头发) translate()移动坐标原点,rotate()旋转坐标轴 源代码 let snowflakes = [ ] ; function ...
  • p5.js创意自画像

    2019-11-03 23:23:34
    自画像什么的是不可能的啦,太羞耻了啦。所以我要画《罗小黑战记》里可爱的花精灵!花精灵! 实现过程 1、码绘嘛,就是连点成线,需要不停地算坐标。然后算到后来,我都后悔为什么我要挑这么复杂的图片。其实线条也...
  • p5js创意自画像

    2019-11-04 16:59:33
    作品: 一件编程创意作品,必须实现动态效果或交互效果;作品录制一段一分钟内的视频;作品可以是具象化地描绘自己的形象,也可以是任何形式表现自己的兴趣、追求、特色、经历等;报告:写一篇文章,发表为博文/推文...
  • 这个状态改动的地方就比较多了,首先要墨镜,烟头,金链子,然后把衣服的领口开大,改变衣服的颜色。这里金链子也是用了平移旋转坐标轴之后得到的。 完整代码 function setup ( ) { createCanvas ( 600...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 222
精华内容 88
关键字:

创意自画像