创意编程——卡通自画像设计

成果展示

图像分析：
整体图像分为两部分——背景和人物；
背景部分为动态，整体为粉色以及向上升起的白色泡泡。
任务部分为卡通自画像设计

PART1:背景部分代码分析
泡泡初始化：

var bubbleArray = [];
var c1, c2;
function Bubble(xloc, yloc, zloc, rise, rad){this.xloc = xloc;this.yloc = yloc;this.zloc = zloc;this.rad = rad;this.rise = rise;
}
function CreateBubbles(howManyBubbles) {var count = howManyBubbles;for (i = 0; i < count; i++) {var x = random(0, 640);var y = random(0, 480);var z = random(0.3, 0.7);var r = map(z, 0.3, 0.7, 7, 25);var rise = map(z, 0.3, 0.7, 0.7, 1.7);var b = new Bubble(x, y, z, rise, r);bubbleArray.push(b);}
}

泡泡出现上升

function Show(){for (i = 0; i < bubbleArray.length; i++)
{var x = bubbleArray[i].xloc;var y = bubbleArray[i].yloc;var z = bubbleArray[i].zloc;var r = bubbleArray[i].rad;fill(255, 255, 255, z);ellipse(x, y, r, r);}
}
function Rise()
{for (i = 0; i < bubbleArray.length; i++) {var x = bubbleArray[i].rise;bubbleArray[i].yloc -= x;var zmin = bubbleArray[i].zloc * -1.5;var zmax = bubbleArray[i].zloc * 1.5;var slowy = bubbleArray[i].yloc * .08;bubbleArray[i].xloc += map(cos(slowy), -1, 1, zmin, zmax)}
}
function Edges() {for (i = 0; i < bubbleArray.length; i++) {if (bubbleArray[i].yloc < -10) {bubbleArray[i].yloc = 480 + 20;bubbleArray[i].xloc = random(0, 640);}}
}

背景颜色设置

function back() {c1 = color(171, 252, 171, 1);c2 = color(3, 97, 176, 0.2);colorMode(RGB, 255, 255, 255, 1);setGradient(0, 0, 600, 600, c1, c2);stroke(254, 217, 230);strokeWeight(1);noFill();Show();Rise();Edges();}

整体背景：

var j = 0;
function draw()
{var i = 0;var m = millis();var s1 = millis() / 1000;back();if (s1 > 2.5)i = (parseInt)(s1 / 2.5);s = s1 - 2.5 * i;if (600- s * 1000 >= 260){back();} else if (s < 0.4){back();  } else if (300 + s * 50 <= 330) {back(); } else if (s <= 1.9) {back(); } else if (5080 - s * 2500 >= 0){back(); } else if (s <= 2.5){back(); }
}

PART2:个人自画像设计
这一部分就是随心所欲地创作了，根据自己来绘制卡通头像。

1.要根据图层的图形的上下顺序来改变代码的前后顺序。例如，头发、脸型、刘海，我们知道披散的头发是位于最底层的，脸蛋至于其上，而刘海是在最上面的。
2.填充图形打底，无填充的线框在上。
3.可以从图中看出，这个图形是个对称，所以使用translate(width/2, height/2);将坐标置于画布中央，这样左右两边的坐标是对称的，更加方便。

绘图过程中，用到了begininShape()–vertex()–endShape(),其目的是在定义的几个顶点vertex进行连接，endShape（CLOSE）是指几个顶点形成封闭图形。

rect（）以前我只知道是画长方形，通过此次实验我了解到还可以定义四个顶点的弧度rect(x, y, w, h, [tl], [tr], [br], [bl]); tl、tr、br、bl分别为左上、右上、右下、左下的弧度。

话不多说，上具体代码：

translate(width/2, height/2);//头发
fill(46,32,12);
beginShape();
vertex(-90,-100);
vertex(90,-100);
vertex(95,20);
vertex(125,130);
vertex(-120,130);
vertex(-95,20);
endShape(CLOSE);
fill(249,236,228);
stroke(249,236,228);
ellipse(0,-85,154,230);//左耳
beginShape();
vertex(-80,-80);
vertex(-90,-85);
vertex(-90,-60);
vertex(-85,-55);
vertex(-70,-70);
endShape(CLOSE);//右耳
beginShape();
vertex(80,-80);
vertex(90,-85);
vertex(90,-60);
vertex(85,-55);
vertex(70,-70);
endShape(CLOSE);//耳环
fill(0);
circle(-85,-60,4);
fill(255);
beginShape(LINES);
vertex(-85,-60);
vertex(-85,10);
endShape();
fill(200,0,0);
circle(-85,10,10);
fill(0);
circle(85,-60,4);
beginShape(LINES);
vertex(85,-60);
vertex(85,10);
endShape();
fill(200,0,0);
circle(85,10,10);//头发
fill(46,32,12);
arc(0, -100, 195, 200, PI, TWO_PI);//半圆//脸
fill(249,236,228);
triangle(-68,-100,-62,-100,-60,-120);
triangle(-35,-100,-25,-100,-25,-145);
triangle(-8,-100,8,-100,0,-165);
triangle(35,-100,25,-100,25,-145);
triangle(70,-100,60,-100,62,-120);
//嘴
fill(243,185,180);
arc(0, -20,45,45, 0, PI);//眼睛
fill(255);
ellipse(-40,-65,38,28);
ellipse(40,-65,38,28);
fill(0);
ellipse(-38,-65,22,22);
ellipse(38,-65,22,22);
circle(-64,-50,6);
stroke(225,155,158);//眼镜
noFill();
curve(-30, 65,-11, -65, 11,-65,30,65);
beginShape();
vertex(-60,-90);
vertex(-20,-90);
ertex(-12,-65);
vertex(-22,-40);
vertex(-58,-40);
vertex(-68,-65);
endShape(CLOSE);
beginShape();
vertex(60,-90);
vertex(20,-90);
vertex(12,-65);
vertex(22,-40);
vertex(58,-40);
vertex(68,-65);
endShape(CLOSE);
eginShape(LINES);
vertex(68,-65);
vertex(85,-85);
endShape();
beginShape(LINES);
vertex(85,-85);
vertex(100,-70);
endShape();
beginShape()；
vertex(60,-90);
vertex(20,-90);
vertex(12,-65);
vertex(22,-40);
vertex(58,-40);
vertex(68,-65);
endShape(CLOSE);
beginShape(LINES);
vertex(-68,-65);
vertex(-85,-85);
endShape();
beginShape(LINES);
vertex(-85,-85);
vertex(-100,-70);
endShape();
noStroke();
//眉毛
fill(120,120,120);
quad(-65,-98,-20,-103,-20,-95,-65,-90);
quad(65,-98,20,-103,20,-95,65,-90);//衣服
fill(68,167,255);
rect(-85, 40,170, 90, 20, 20, 0, 0);//脖子
fill(249,236,228);
rect(-25,20,50,20);
arc(0,40,50,45, 0, PI);//衣带
fill(205,229,253);
quad(25,40,50,40,25,130,0,130);
quad(-25,40,-50,40,-25,130,0,130);

总结：这次实验需要更多的创造力与耐心，各细节坐标确实挺繁琐，有些细节线条还是有些生硬，例如眉毛和刘海部分。但是看着自己的成果一步步完善起来还是非常有成就感的。

创意编程——卡通自画像设计相关推荐

python 创意编程全国-关于举办第五届全国青少年创意编程与智能设计大赛的通知...
各省.自治区.直辖市和新疆生产建设兵团科协青少年科技教育工作机构,青少年科技辅导员协会(科技教育协会): 为深入贯彻落实国务院<新一代人工智能发展规划>的任务要求,向广大青少年普及推广编程 ...
python创意编程比赛-报名了！2019年全国青少年创意编程与智能设计大赛报名开始了...
原标题:报名了!2019年全国青少年创意编程与智能设计大赛报名开始了本文首发于微信公众号逻得岛编程激动人心的时刻来了,2019年全国青少年创意编程与智能设计大赛开始报名了! 那么问题来了,全国青少 ...
python创意编程比赛-关于举办2019年青岛市青少年创意编程与智能设计大赛的通知...
原标题:关于举办2019年青岛市青少年创意编程与智能设计大赛的通知根据青岛市科协.教育局<关于开展2019年青岛市青少年科学教育系列活动的通知>(青科协字[2019]20号)文件相关要求 ...
python创意小作品-全国青少年创意编程与智能设计大赛Python创意编程比赛
全国青少年创意编程与智能设计大赛Python创意编程比赛一.作品类型: 1.数字艺术通过程序生成和展示视觉艺术,具备创意.美感和互动性. 2.互动游戏各种竞技类.探险类.角色扮演类.球类. 棋牌 ...
创意编程，所设计的电影字幕
英国Universal Everything工作室,为莫斯科OFFF设计艺术节所设计的电影字幕,这一系列的原型探索了设计和运动图像的新形式,作品中融合了动力学结构.字体排印.和声音构建音频反应建筑等. ...
＜＜2020云南省青少年创意编程与智能设计大赛＞＞参赛作品之变身魔药实验编程设计说明
变身魔药实验编程设计说明第一章设计目的我给大家介绍一下我的作品,我做的是一个变身魔法实验,属于科学实验模拟.这是一个之前老师带领我们做的实验,小苏打与白醋实验,这个实验很有趣,让我知道了小苏打( ...
shell编程1到10求和_重磅|郑州市第四届中小学创意编程暨智能设计大赛初中组真题解析（下）...
温馨提示 : 图片点击可放大噢! 判断题01 考察点:变量解析:答案是A,正确. 新建变量时,勾选仅适用于当前角色是指在本角色内定义的变量,只在本角色程序范围内使用有效:勾选适用与所有角色是指此变量 ...
iTutorGroup学员获2018全国青少年创意编程大赛一等奖
11月26日,2018年全国青少年创意编程与智能设计大赛闭幕式暨颁奖典礼在北京举行,来自全国的300余名青少年编程选手和科技教师.教育专家汇聚一堂,见证最终评选结果揭晓,总计数百位青少年选手获得各分类 ...
python创意turtle作品和代码,python创意编程比赛作品
这篇文章主要介绍了python创意turtle作品和代码,具有一定借鉴价值,需要的朋友可以参考下.希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下. 1.创意编程与python编程区别 ...

创意编程——卡通自画像设计

创意编程——卡通自画像设计

创意编程——卡通自画像设计相关推荐

最新文章

热门文章