p5js创意自画像

实验要求

编程语言与工具:编程可以用p5,processing,若想用其他语言或工具,提前向老师说明情况;作品: 一件编程创意作品,必须实现动态效果或交互效果;作品录制一段一分钟内的视频;作品可以是具象化地描绘自己的形象,也可以是任何形式表现自己的兴趣、追求、特色、经历等;报告:写一篇文章,发表为博文/推文等形式,描述运用的规律,若用到了数学/物理/化学等学科中的知识,要用平实易懂的语言介绍原理,尝试运用凝练的数学语言表达(公式、方程、推导等),特别要描述出这些原理如何在作品中呈现的。

成果图

咱们先来看一下成果图,实现效果可以实现用户交互,分别点击鼠标左,中,右键可以改变小人的形象,即小人所穿戴的衣服和配饰,滑动滚轮可以实现手持星星的上下位置。
画图的灵感来自于自己想创造一个追逐星星,或者说是漫步于太空,有着星空梦想的人物角色,也算是小时候的一个梦想,虽然做出来的效果有点不如人意。。。。
在这里插入图片描述

实验过程以及代码展示

1.星星帽子

星星帽子的设计隐含了这是一个梦想的寓意,它在构图上是由一些基本的图形拼接而成的,帽子主体是两个三角形和一个圆形,装饰是由好几个星星图形以及两个圆弧截出的月亮图案,代码如下:

function maozi(){
   //画帽子主体
  push();
  fill(cmaozi);
  noStroke();
  triangle(240, 220, 360, 220, 300, 100);
  triangle(300,100,380,75,325,150);
  pop();
  //画帽子边缘
  push();
  strokeWeight(2);
  stroke(255,255,0);
  line(240,220,360,220);
  line(240,220,300,100);
  line(300,100,380,75);
  line(380,75,325,150);
  line(325,150,360,220);
  pop();
  //帽子球
  fill(cball);
  ellipse(380,75,20);
  //画星星
  push();
  fill(255,255,0);
  stroke(255,255,0);
  star(320,120,5,10);
  star(300,140,6,13);
  star(330,190,4,10); 
  //画月亮
  arc(290, 180, 32, 32, PI/3, 5*PI/3, OPEN);
  fill(cmaozi);
  arc(306, 180, 32, 32, 2*PI/3, 4*PI/3, OPEN);
  pop();
  }

星星图案:

function star(x, y, radius1, radius2) {
  let angle = PI*2/5;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < PI*2; a += angle) {
    let sx = x + cos(a) * radius1;
    let sy = y + sin(a) * radius1;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius2;
    sy = y + sin(a + halfAngle) * radius2;
    vertex(sx, sy);
  }
    endShape(CLOSE);
}

2.背景以及人物设计

背景利用深蓝以及黄色的圆形,星星,月亮等图表现出一种星海的感觉,仿佛小人置身于太空中,灵感来自于小王子。

function draw() {
  background(100);
  fill(0,0,150);
  rect(0,0,600,600);
  push();
  noStroke();
  fill(255,255,0);
  arc(300,800,700,700,0,2*PI,OPEN);
  arc(0,200,180,180,0,2*PI,OPEN);
  arc(500,100,50,50,0,2*PI,OPEN);
  star(500,300,20,40);
  star(300,50,10,20);
  arc(100, 400, 80, 80, PI/3, 5*PI/3, OPEN);
  fill(0,0,150);
  arc(140, 400, 80, 80, 2*PI/3, 4*PI/3, OPEN);
  fill(200,255,0);
  arc(300,800,660,660,0,2*PI,OPEN);
  pop();
  fill(200,255,200);
  //画脖子
  rect(290,390,20,20);
  //画头
  ellipse(300,300,180,200);
  
  //画身体
  fill(cbody);
  rect(240,405,120,100,20,20,20,20);
  //画手
  fill(200,255,200);
  rect(240,425,40,20,2,10,10,2);
  rect(320,425,40,20,10,2,2,10);
 
  //画腿
  fill(clegs)
  rect(260,505,20,70,0,0,10,10);
  rect(320,505,20,70,0,0,10,10);
  //画眼
  fill(255,255,255)
  ellipse(250,300,30,20);
  ellipse(350,300,30,20);
  fill(0,0,0);
  ellipse(250,300,18,15);
  ellipse(350,300,18,15);
  //画嘴
  push();
  fill(255,0,80);
  arc(300, 366, 32, 32, -PI/6, 7*PI/6, OPEN);
  pop()
  //画耳朵
  fill(200,255,200);
  arc(210,300,32,32,PI/2,3*PI/2,OPEN);
  arc(390,300,32,32,-PI/2,PI/2,OPEN);
  //画帽子
  maozi();
  //画头发
  push()
  fill(chair);
  noStroke();
  rect(280, 220, 40, 40, 0, 0, 30, 30);
  rect(240, 220, 40, 40, 0, 0, 30, 30);
  rect(320, 220, 40, 40, 0, 0, 30, 30);
  arc(240,220,40,40, 0, 2*PI,OPEN);
  arc(360,220,40,40, 0, 2*PI,OPEN);
  arc(240,240,40,40, 0, 2*PI,OPEN);
  arc(360,240,40,40, 0, 2*PI,OPEN);
  pop()
  //手拿星星
  fill(255,255,0);
  star(300,pos,15,30);
}

交互设计

点击鼠标左,中,右键给人物换装其实就是给图像填充不同的颜色:

if(mouseIsPressed){
  if(mouseButton===LEFT){
    cmaozi=color(255,0,0);
    cball=color(255,255,0);
    chair=color(0,255,0);
    cbody=color(255,0,0);
    clegs=color(0,255,0);
  }
 if(mouseButton===CENTER){
    cmaozi=color(255,0,255);
    cball=color(255,0,0);
    chair=color(200,0,80);
    cbody=color(0,0,0);
    clegs=color(100,200,0);
  }
  if(mouseButton===RIGHT){
    cmaozi=color(0,0,255);
    cball=color(255,0,0);
    chair=color(0,0,0);
    cbody=color(0,0,255);
    clegs=color(0,0,0);
  }
  }

滚轮控制星星运动就是改变星星的y坐标:

let pos=425;
//手拿星星
  fill(255,255,0);
  star(300,pos,15,30);
function mouseWheel(event) {
  pos += event.delta/10;
}

实验总结

实验之前设想了很多的人物形象以及配饰,比如翅膀,领带,斗篷等,但是不是最终效果不是很好,就是过于麻烦而放弃了。总体来说,交互以及人物的设计过于简单了,需要继续完善。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值