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

    2019-11-03 21:34:15
    编程语言的实现就是通过普通的图形搭建,画出的自画像![在这里插入图 上面是代码实现后得出的实验截图 代码放置如下: function setup() { createCanvas(700,700); rectMode(CENTER); } function draw() { ...

    要求:一件变成创意作品,必须实现动态效果或交互效果
    编程语言的实现就是通过普通的图形搭建,画出的自画像![在这里插入图在这里插入图片描述
    上面是代码实现后得出的实验截图
    代码放置如下:
    function setup() {
    createCanvas(700,700);
    rectMode(CENTER);
    }

    function draw() {

    background(220,0,0);
    zihua();
    }
    function zihua(){
    fill(0,0,0);//头发
    circle(350,120,130);

    fill(255,255,160);//耳朵
    circle(285,150,45);
    circle(415,150,45);

    fill(255,255,160);//拳头
    circle(180,305,40);
    circle(520,305,40);

    fill(0,100,255);//手臂
    quad(180,290,280,245,280,275,185,320);
    quad(420,245,520,290,515,320,420,275);

    fill(255,255,160);//脖子
    rect(350,230,56,30);

    fill(255,255,160); //头
    circle(350,150,150);

    fill(0,0,0);//刘海
    arc(310,80,60,60,0.5PI,0.75PI);
    arc(320,70,65,85,0.25PI,0.75PI);
    arc(335,60,79,110,0PI,0.75PI);
    arc(346,70,50,90,0PI,1PI);
    arc(365,60,70,110,0.25PI,0.9PI);
    arc(387,78,70,80,0.4PI,0.87PI);
    arc(400,78,70,80,0.4PI,0.87PI);
    arc(405,85,70,80,0.4PI,0.87PI);

    fill(255,255,255);//眼镜
    rect(320,140,46,20);
    rect(380,140,46,20);

    fill(0,0,0);//镜框
    line(343,140,357,140);
    line(297,140,275,135);
    line(403,140,425,135);

    //fill(0,0,0);//眼睛
    //circle(320,140,10);
    //circle(380,140,10);
    moveeyes();

    fill(0,0,0);//鼻子
    circle(350,170,10);

    fill(255,0,0);//嘴巴
    arc(350,190,50,40,0PI,1PI);

    fill(0,100,255);//衣服
    quad(280,245,420,245,425,400,275,400);

    fill(255,255,180);
    triangle(280,245,420,245,350,285);//绘制三角形(x1,y1,x2,y2,x3,y3)

    fill(0,0,0);
    line(350,285,350,400);
    circle(350,300,10);
    circle(350,330,10);
    circle(350,360,10);

    fill(100,100,255);//鞋子
    ellipse(385,505,60,40);
    ellipse(315,505,60,40);

    fill(0,0,255);//腿
    quad(300,400,350,400,335,500,305,500);
    quad(350,400,400,400,395,500,365,500);
    }
    这边是实现眼睛移动的代码:
    function moveeyes(){
    var x=(mouseX)/3005;
    var y=(mouseY)/300
    5;
    fill(0,0,0);
    circle(320+x,140+y,10);
    circle(380+x,140+y,10);
    }

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

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

    总结

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

    展开全文
  • 创意自画像 工具:processing 这幅图画的是弹尤克里里时的我。 实现音符随帧数飘走的动态效果,即将音符的x,y坐标根据帧数的变化进行相加或相减,实现平移出画面的效果。 ...

    创意自画像

    工具:processing
    这幅图画的是弹尤克里里时的我。
    在这里插入图片描述
    实现音符随帧数飘走的动态效果,即将音符的x,y坐标根据帧数的变化进行相加或相减,实现平移出画面的效果。

    展开全文
  • 创意自画像 主题 用编程方式创作一幅介绍自己的作品 要求 编程语言与工具:编程可以用p5,processing,若想用其他语言或工具,提前向老师说明情况; 作品: 一件编程创意作品,必须实现动态效果或交互效果;作品...

    创意自画像

    主题

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

    要求

    编程语言与工具:编程可以用p5,processing,若想用其他语言或工具,提前向老师说明情况;

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

    报告:写一篇文章,发表为博文/推文等形式,描述运用的规律,若用到了数学/物理/化学等学科中的知识,要用平实易懂的语言介绍原理,尝试运用凝练的数学语言表达(公式、方程、推导等),特别要描述出这些原理如何在作品中呈现的。

    结果展示

    在这里插入图片描述

    实现步骤

    绘制静态

    原图
    非人哉哪吒
    利用bezier曲线工具,绘制出整体线条轮廓(代码又臭又长

    beginShape();
    vertex(x1,y1);
    bezierVertex(x2,y2,x3,y3,x4,y4);
    endShape();
    

    在这里插入图片描述

    上色也比较麻烦,用beginShape和endShape慢慢上色块在这里插入图片描述
    加上背景,这里让背景有一个渐变的效果
    在这里插入图片描述
    渐变效果代码如下

    function drawground(){
        var c1 = color(164,153,195);
        var c2 = color(190,200,220);   
        setGradient(0, 0, 900, 900,c1,c2,1);
    }
    
    function setGradient(x, y, w, h, c1, c2,axis) {
        noFill();
        if (axis == Y_AXIS) {  // Top to bottom gradient
          for (var i = y; i <= y+h; i++) {
            var inter = map(i, y, y+h, 0, 1);
            var c = lerpColor(c1, c2, inter);
            stroke(c);
            line(x, i, x+w, i);
          }
        }  
        else if (axis == X_AXIS) {  
          for (var k = x; k <= x+w; k++) {
            var interk = map(k, x, x+w, 0, 1);
            var ck = lerpColor(c1, c2, interk);
            stroke(ck);
            line(k, y, k, y+h);
          }
        }
     }
    

    交互

    眼睛跟随鼠标移动效果

    比较简单,让圆心坐标随鼠标改变一点即可

    function draweye(){
      var dx=mouseX/50;
      var dy=mouseY/100;
      noStroke();
      fill(255,255,255);
      ellipse(160+dx,409+dy,10,10);
      ellipse(338+dx,421+dy,10,10);
    }
    

    背景雪花效果

    p5.js官网上有源码,稍微改动了下让雪花能与鼠标产生一些互动
    snowflakes
    在这里插入图片描述

    背后光圈点击发光效果

    将上面背景渐变的代码加以修改

    function setgh(x,y,x1,y1,c1,c2)
    {
      if (flag){
      for(var i = 0; i<= x1/5; i++)
      {
        var inter = map(i, 0, 50, 0, 1);
        var c = lerpColor(c1, c2, inter);
        fill(c);
        ellipse(x,y,x1-i,y1-i);
      }
      }
    }
    

    在这里插入图片描述

    总结

    码绘挺不容易的,虽然过程比较艰难,做出结果后还是比较开心。

    展开全文
  • p5js创意自画像

    2019-11-04 16:59:33
    作品: 一件编程创意作品,必须实现动态效果或交互效果;作品录制一段一分钟内的视频;作品可以是具象化地描绘自己的形象,也可以是任何形式表现自己的兴趣、追求、特色、经历等;报告:写一篇文章,发表为博文/推文...
  • 首先是57号的自画像,虽然较为简单,但有着易懂的神态,鼠标拖动能同时影响到背景中的线条; 而13号作品有着不错的整体感,q版的形象也做得不错,背景中的花火和菱形闪光以及人物的眼睛会根据鼠标移动而变化; ...
  • text(mouseX+" "+mouseY,mouseX,mouseY);
  • p5.js 绘制自画像(互动媒体技术作业)作品展示p5.js 代码分析分析几个创意点:走过的弯路拓展总结 作品展示 代码寄存在—>CodePen<—点击体验交互! 灵感来源于小王子B612星球,于是乎绘制了一个自己在星球...
  • void draw(){ …… if(auto){ update_colorImg(random_width()-mouseSize/2,random_height()-mouseSize/2,mouseSize,mouseSize); } …… }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,290
精华内容 6,916
关键字:

创意自画像