实验要求
编程语言与工具:编程可以用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;
}
实验总结
实验之前设想了很多的人物形象以及配饰,比如翅膀,领带,斗篷等,但是不是最终效果不是很好,就是过于麻烦而放弃了。总体来说,交互以及人物的设计过于简单了,需要继续完善。