2019-10-21

主题:用编程方式创作一幅介绍自己的作品

要求:

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

}

效果展示:


2019-10-21_第1张图片
小王子

灵感来自童话故事小王子

人物造型:小王子、标志性玫瑰花

背后其他小型的黄色行星是动态的

围巾可以随着鼠标的移动飘动

你可能感兴趣的:(2019-10-21)