主题:用编程方式创作一幅介绍自己的作品
要求:
编程语言与工具:编程可以用p5,processing,若想用其他语言或工具,提前向老师说明情况;
作品: 一件编程创意作品,必须实现动态效果或交互效果;作品录制一段一分钟内的视频;作品可以是具象化地描绘自己的形象,也可以是任何形式表现自己的兴趣、追求、特色、经历等;
报告:写一篇文章,发表为博文/推文等形式,描述运用的规律,若用到了数学/物理/化学等学科中的知识,要用平实易懂的语言介绍原理,尝试运用凝练的数学语言表达(公式、方程、推导等),特别要描述出这些原理如何在作品中呈现的。
代码:
function setup() {
createCanvas(500, 500);
rectMode(CENTER);
}
function draw() {
noStroke();
background(16,30,70);
stars();
planet();
drawme();
flower();
//tools();
}
///工具函数,便于读取坐标
function tools(){
for(var i=10;i<500;i=i+10){
stroke(250,170,240,100);
line(0,i,500,i);
line(i,0,i,500);
}
fill(0,0,0);
text(mouseY,mouseX+25,mouseY);
text(mouseX,mouseX,mouseY);
}
function stars(){
var cycle =millis()/5;
fill(254,231,138);
circle(cycle%500,cycle%500,20);
circle((cycle-100)%500+200,(cycle-100)%500,20);
circle((cycle-200)%500,(cycle-100)%500+100,10);
circle((cycle-50)%500,(cycle-100)%500+100,12);
circle((cycle-200)%500+50,(cycle-200)%500,20);
circle((cycle-300)%500+150,(cycle-100)%500+100,20);
circle((cycle-300)%500+150,(cycle-400)%500+100,15);
circle((cycle-300)%500+150,(cycle-400)%500,20);
circle((cycle-400)%500+250,(cycle-350)%500+50,20);
circle((cycle-400)%500+50,(cycle-350)%500+50,5);
circle((cycle-300)%500+0,(cycle-400)%500+400,20);
circle((cycle-100)%500,(cycle-400)%500+100,20);
circle((cycle-100)%500+150,(cycle-400)%500+100,10);
circle((cycle-300)%500+150,(cycle-450)%500+100,5);
circle((cycle-50)%500+150,(cycle-450)%500+100,5);
circle((cycle-450)%500+450,(cycle-450)%500+300,15);
}
function planet(){
fill(246,231,102);
ellipse(250,900,1000,1000);
fill(244,192,91);
ellipse(90,470,30,20);
ellipse(350,490,100,50);
ellipse(170,430,50,35);
ellipse(480,490,30,20);
}
function cloth(){
var deltax=(mouseX-250)/250*7.5;
var deltay=(mouseY-150)/350*7.5;
fill(241,162,26);//披风
quad(180+deltax,300+deltay,260,200,300,200,230,280);//根据鼠标位置的不同该点的位置发生变化产生舞动的效果
}
function drawme()
{
//左腿
fill(255, 245, 238);
beginShape();
vertex(264, 275);
vertex(268, 290);
vertex(245, 330);
vertex(260, 360);
vertex(285, 290);
vertex(283, 275);
endShape(CLOSE);
//右腿
beginShape();
vertex(310, 275);
vertex(314, 290);
vertex(291, 330);
vertex(306, 360);
vertex(331, 290);
vertex(329, 275);
endShape(CLOSE);
cloth();
//衣服
fill(130,255,150);
triangle(300,190,240,288, 360,288);
fill(253, 229, 93);
ellipse(300, 150, 110, 110);
//脸
fill(255, 245, 238);
ellipse(300, 150, 80, 85);
//刘海中
fill(253, 229, 93);
beginShape();
vertex(270, 110);
vertex(290, 140);
vertex(300,128);
vertex(306,137);
vertex(310, 124);
vertex(325,132);
vertex(330,120);
vertex(320, 104);
endShape(CLOSE);
//刘海左1
beginShape();
vertex(280, 110);
vertex(280, 140);
vertex(260, 120);
endShape(CLOSE);
//眼睛
fill(54, 54, 54);
ellipse(317, 150, 10, 15);
ellipse(285, 150, 10, 15);
//手
fill(255, 245, 238);
ellipse(255, 239, 45, 20);
ellipse(280, 240, 20, 30);
ellipse(350, 239, 45, 20);
ellipse(330, 240, 20, 30);
fill(245,218,79);//围巾
rect(300,200,100,20);
circle(250,200,20);
circle(350,200,20);
}
function flower(){
fill(51,186,111);
rect(120,430,10,60);
fill(208,50,25);
circle(120,400,25);
ellipse(120,390,30,15);
fill(116,0,0);
ellipse(120,390,20,5);
}
效果展示:
灵感来自童话故事小王子
人物造型:小王子、标志性玫瑰花
背后其他小型的黄色行星是动态的
围巾可以随着鼠标的移动飘动