作品展示

作品特点

鼠标控制眼珠和眉毛的朝向（始终朝向鼠标位置）
鼠标控制嘴巴大小（根据鼠标Y轴方向的位置决定，鼠标从下到上，嘴巴从小到大）
鼠标控制手挥动（根据鼠标Y轴方向的位置决定，鼠标从下到上，手臂从下到上挥动）
鼠标控制下雪的密度（根据鼠标Y轴方向的位置决定，鼠标从下到上，下雪密度从小到大）
整体做出一个没下雪的时候情绪低落的样子，雪越大越开心的效果（大概吧）

函数作用说明

利用fill()函数控制填充颜色，noFill()不填充；stroke()函数控制边框颜色，strokeWeight()控制边框宽度，noStroke()无边框
line()直线，bezier()曲线,ellipse()椭圆/圆，rect()矩形
beginShape()->vertex()画顶点->quadraticVertex()画曲线顶点->endShape()自定义形状（主要用于画头发）
translate()移动坐标原点，rotate()旋转坐标轴

源代码

let snowflakes = [];function setup() {// put setup code herecreateCanvas(600,600);//创建画布
}function draw() {// put drawing code here  background(139);//背景色设置为灰色 drawMe();drawSnow();
}function drawMe(){drawClothes();//衣服drawStar(300,400,20,40,5);//星星drawLHand();//左手drawRHand();//右手noStroke();fill(255,228,181);//脸ellipse(300,200,200,200);fill(255,228,181);//耳朵ellipse(400,200,50,50);ellipse(200,200,50,50);drawEyes();//眼睛fill(255,150,122);//鼻子triangle(300,190,290,230,310,230);drawMouth();//嘴巴drawBrow();//眉毛drawHair();//头发drawGlasses();//眼镜}function drawEyes(){//眼睛noStroke();fill(255,255,255);ellipse(340,180,30,30);ellipse(260,180,30,30);var deltax=(mouseX-300)/300*7.5;var deltay=(mouseY-200)/400*8;fill(0);ellipse(340+deltax,180+deltay,15,15);ellipse(260+deltax,180+deltay,15,15);
}function drawBrow(){//眉毛noFill();stroke(0);strokeWeight(3);var deltax=(mouseX-300)/300*8;var deltay=(mouseY-200)/400*5;bezier(250+deltax,155+deltay,260+deltax,145+deltay,260+deltax,145+deltay,270+deltax,155+deltay);bezier(330+deltax,155+deltay,340+deltax,145+deltay,340+deltax,145+deltay,350+deltax,155+deltay);
}function drawHair(){//头发noStroke();fill(139,69,0);//头发beginShape();vertex(195,174);vertex(200,210);vertex(210,160);vertex(212,170);vertex(230,130);vertex(230,140);vertex(240,120);vertex(270,130);vertex(270,120);vertex(340,140);vertex(340,130);vertex(380,145);vertex(380,135);vertex(385,150);vertex(385,140);vertex(390,170);vertex(392,160);vertex(400,210);vertex(405,174);quadraticVertex(400,90,300,90);quadraticVertex(200,90,195,174);endShape();
}function drawMouth(){//嘴巴noStroke();fill(255,150,122);var deltay=(600-mouseY)/600*20+10;ellipse(300,260,40,deltay);
}function drawGlasses(){//眼镜noFill();stroke(0);strokeWeight(5);rect(230,160,60,40);rect(310,160,60,40);line(290,180,310,180);line(370,180,396,174);line(230,180,204,174);
}function drawClothes(){//衣服noStroke();fill(135,206,235);triangle(300,100,210,480,390,480);fill(255,165,79);rect(240,480,50,80);rect(310,480,50,80);fill(50,50,50);rect(240,560,50,20);rect(310,560,50,20);ellipse(240,570,20,20);ellipse(360,570,20,20);fill(139);rect(240,280,120,20);fill(255,228,181);ellipse(300,300,40,20);
}function drawStar(x,y,radius1,radius2,npoints){//星星noStroke();fill(238,238,0);translate(300,400);rotate(-PI/2);star(0,0,20,40,5);rotate(PI/2);translate(-300,-400);
}function star(x, y, radius1, radius2, npoints) {let angle = TWO_PI / npoints;let halfAngle = angle / 2.0;beginShape();for (let a = 0; a < TWO_PI; a += angle) {let sx = x + cos(a) * radius2;let sy = y + sin(a) * radius2;vertex(sx, sy);sx = x + cos(a + halfAngle) * radius1;sy = y + sin(a + halfAngle) * radius1;vertex(sx, sy);}endShape(CLOSE);
}function drawRHand(){//右手var angle=(mouseY-300)/600/3*PI;translate(350,340);rotate(angle);stroke(135,206,235);strokeWeight(50);line(0,0,100,0);noStroke();fill(255,228,181);ellipse(100,0,60,60);rotate(-angle);translate(-350,-340);}function drawLHand(){//左手var angle=(mouseY-300)/600/3*PI;translate(250,340);rotate(-angle);stroke(135,206,235);strokeWeight(50);line(0,0,-100,0);  noStroke();fill(255,228,181);ellipse(-100,0,60,60);rotate(angle);translate(-250,-340);}function drawSnow(){//雪let t = frameCount / 60;var density=(600-mouseY)/600*10;for (let i = 0; i < random(density); i++){snowflakes.push(new snowflake());}for (let flake of snowflakes){flake.update(t);flake.display();}
}function snowflake(){this.posX = 0;this.posY = random(-50, 0);this.initialangle = random(0, 2 * PI);this.size = random(2, 5);this.radius = sqrt(random(pow(width / 2, 2)));this.update = function(time) {let w = 0.6;let angle =this.initialangle;this.posX = width / 2 + this.radius * sin(angle);this.posY += pow(this.size, 0.5);if (this.posY > height){let index = snowflakes.indexOf(this);snowflakes.splice(index, 1);}};this.display = function(){fill(240);noStroke();ellipse(this.posX, this.posY, this.size);};
}

心得

最麻烦的还是画头发吧，调整坐标调整到崩溃，其他的部分只需要注意画的时候代码的顺序（图形遮挡顺序）就可以了。自己没什么美术功底，人物比较丑，交互性和动态上也只是做了比较简单的效果，总体来说还是挺有意思的。

创意编程-创意自画像相关推荐

创意编程——卡通自画像设计
创意编程--卡通自画像设计成果展示图像分析: 整体图像分为两部分--背景和人物: 背景部分为动态,整体为粉色以及向上升起的白色泡泡. 任务部分为卡通自画像设计 PART1:背景部分代码分析泡泡初 ...
玩点创意编程，发现另一个世界
知识点什么是创意编程创意编程的应用领域创意编程的常见工具 p5.js 简介什么是创意编程创意编程(Creative Coding)的概念非常宽泛,它是一种以创作表达为主要目的的计算机编程实践 ...
新的JavaScript库邀请程序员使用Canvas进行创意编程
为了模糊技术和艺术之间的界限,Sandpit库使用JavaScript和Canvas 2D元素进行创意编程. 通过GitHub或NPM并内置在ECMAScript 6中,Sandpit仍然使用着一个可 ...
python 创意编程全国-关于举办第五届全国青少年创意编程与智能设计大赛的通知...
各省.自治区.直辖市和新疆生产建设兵团科协青少年科技教育工作机构,青少年科技辅导员协会(科技教育协会): 为深入贯彻落实国务院<新一代人工智能发展规划>的任务要求,向广大青少年普及推广编程 ...
python创意编程比赛-报名了！2019年全国青少年创意编程与智能设计大赛报名开始了...
原标题:报名了!2019年全国青少年创意编程与智能设计大赛报名开始了本文首发于微信公众号逻得岛编程激动人心的时刻来了,2019年全国青少年创意编程与智能设计大赛开始报名了! 那么问题来了,全国青少 ...
python创意编程比赛-关于举办2019年青岛市青少年创意编程与智能设计大赛的通知...
原标题:关于举办2019年青岛市青少年创意编程与智能设计大赛的通知根据青岛市科协.教育局<关于开展2019年青岛市青少年科学教育系列活动的通知>(青科协字[2019]20号)文件相关要求 ...
编程迷宫_少儿创意编程（特23）scratch之迷宫模式探索（上）
上一期的公众号发布了迷宫背景生成的内容,又一次在相关微信群和QQ群引起了大家热烈的讨论,在这里非常感谢大家的支持与参与! 本期内容承接上一期,来介绍几种迷宫的模式吧! 一.碰到颜色返回模式. 这是初学 ...
js高级编程_这位设计师用Processing把创意编程玩到了极致！
Processing作为新媒体从业者的必备工具,近来却越来越成为设计师们的新宠! 今天小编将介绍以为用Processing把创意编程玩到极致的设计师Tim Rodenbröker. "我们的 ...
background 旋转_第4章旋转的圆弧（《Python趣味创意编程》教学视频）
(图书介绍:童晶:<Python趣味创意编程>新书预告) 本章我们将实现旋转的圆弧,如图所示.首先学习圆弧的绘制和旋转:接着利用全局变量实现圆弧逐渐变长,学习if选择语句,实现圆弧长度的重 ...

创意编程-创意自画像

作品展示

作品特点

函数作用说明

源代码

相关参考

心得

创意编程-创意自画像相关推荐

最新文章

热门文章