【p5.js】作业二——创意自画像

p5.js&课程作业 专栏收录该内容
7 篇文章 0 订阅

创意自画像

主题

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

要求

编程语言与工具:编程可以用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);
  }
  }
}

在这里插入图片描述

总结

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

  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值