p5js创意自画像

2023-10-29

实验要求

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

实验总结

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)