第一次码绘

最新推荐文章于 2019-12-17 00:25:26 发布

梦在心在

最新推荐文章于 2019-12-17 00:25:26 发布

阅读量215

点赞数

分类专栏：计算机文章标签：码绘

本文链接：https://blog.csdn.net/milk1111/article/details/102658544

版权

计算机专栏收录该内容

3 篇文章 0 订阅

订阅专栏

   大三上这个学期我们上了互动媒体技术这门课，其中有一份作业是要写博客的，故旧写下此篇，
    码绘描摹原图如下![属实闪的脑壳疼但逼格貌似挺高
    ]

在这里插入图片描述

      由于要描摹这幅图so我们对这个图进行分析，
      1.主要是由黑白圆构成，又加入了动态变化，
      2.奇数层黑色偶数层白色。
      3.从第二层开始，每次波动都是第2n层波动到2n+1层（n>=1,n∈N+），也就是白色往黑色扩散，然后再回收。
      4.内圈先动，外圈后动，但并不是里面的圈运动完了外一层的再动
      5.波动的速率可能是正余弦，我们就用正余弦来模拟一下
      6.总共23个圆，12黑11白

经过上述分析后
我们就进入代码实现，
先从一个圆的情况开始，研究其波动

  //白圆
  fill(255);
  ellipse(400,400,100+50*abs(sin(a[0])),100+50*abs(sin(a[0])，因为));
  //黑圆
   fill(0);
  ellipse(400,400,50,50);




//在做完第一个圆之后，我们继续满足上面的分析首先是白圈的波动，由于外面一层比里面一层波动的慢一点，所以我们就用相位进行区分，再就是每个波动的白圆的半径大小不同，这都要进行一些控制。

```bash
i[0]=0;//相位差
//运动时间
if(((frameCount/10*PI)-i[0])<PI){
   a[0]=(frameCount/10*PI-0);
  }
  //静止时间
  else if(((frameCount/10*PI)-i[0])<5*PI)
  { a[0]=0;}
  else
  {i[0]=i[0]+5*PI}

对于第一个圆来说，相位差为0
运动时间为1PI,静止时间为4PI，周期往复

（二）
第一点我们只做到了第一个圆，要做到多个圆的话就得使用用数组来控制相位差

i=[0,0,0,0,0,0,0,0,0,0,0];
  for(j=0;j<=10;j++){
  i[j]=j*PI*1/4;
  }

//第一个白圆
//i[0]=0;

if(((frameCount/10*PI)-i[0])<PI){
   a[0]=(frameCount/10*PI-0);
  }
  else if(((frameCount/10*PI)-i[0])<5*PI)
  { a[0]=0;}
  else
  {i[0]=i[0]+5*PI}
  
 //第二个白圆
//i[1]=1/4PI;相位差为四分之一PI

  if(((frameCount/10*PI)-i[1])<PI){
   a[1]=(frameCount/10*PI-PI/4);
  }
  else if(((frameCount/10*PI)-i[1])<5*PI)
  { a[1]=0;}
  else
  {i[1]=i[1]+5*PI}
  
————————————————

经过上述代码扩展形成的总代码如下

function setup() {
  createCanvas(800, 800);
  frameRate(20);
  i=[0,0,0,0,0,0,0,0,0,0,0];
  for(j=0;j<=10;j++){
  i[j]=j*PI*1/4;
  }
  a=[0,0,0,0,0,0,0,0,0,0,0];
  
}

function draw() {
  background(0);
  
  
  if(((frameCount/10*PI)-i[0])<PI){
   a[0]=(frameCount/10*PI-0);
  }
  else if(((frameCount/10*PI)-i[0])<5*PI)
  { a[0]=0;}
  else
  {i[0]=i[0]+5*PI}

  if(((frameCount/10*PI)-i[1])<PI){
   a[1]=(frameCount/10*PI-PI/4);
  }
  else if(((frameCount/10*PI)-i[1])<5*PI)
  { a[1]=0;}
  else
  {i[1]=i[1]+5*PI}
  
  if(((frameCount/10*PI)-i[2])<PI){
   a[2]=(frameCount/10*PI-PI*2/4);
  }
  else if(((frameCount/10*PI)-i[2])<5*PI)
  { a[2]=0;}
  else
  {i[2]=i[2]+5*PI}
  
  if(((frameCount/10*PI)-i[3])<PI){
   a[3]=(frameCount/10*PI-PI*3/4);
  }
  else if(((frameCount/10*PI)-i[3])<5*PI)
  { a[3]=0;}
  else
  {i[3]=i[3]+5*PI}
  
  if(((frameCount/10*PI)-i[4])<PI){
   a[4]=(frameCount/10*PI-PI*4/4);
  }
  else if(((frameCount/10*PI)-i[4])<5*PI)
  { a[4]=0;}
  else
  {i[4]=i[4]+5*PI}
  
  if(((frameCount/10*PI)-i[5])<PI){
   a[5]=(frameCount/10*PI-PI*5/4);
  }
  else if(((frameCount/10*PI)-i[5])<5*PI)
  { a[5]=0;}
  else
  {i[5]=i[5]+5*PI}
  
  if(((frameCount/10*PI)-i[6])<PI){
   a[6]=(frameCount/10*PI-PI*6/4);
  }
  else if(((frameCount/10*PI)-i[6])<5*PI)
  { a[6]=0;}
  else
  {i[6]=i[6]+5*PI}
  
  if(((frameCount/10*PI)-i[7])<PI){
   a[7]=(frameCount/10*PI-PI*7/4);
  }
  else if(((frameCount/10*PI)-i[7])<5*PI)
  { a[7]=0;}
  else
  {i[7]=i[7]+5*PI}
  
  if(((frameCount/10*PI)-i[8])<PI){
   a[8]=(frameCount/10*PI-PI*8/4);
  }
  else if(((frameCount/10*PI)-i[8])<5*PI)
  { a[8]=0;}
  else
  {i[8]=i[8]+5*PI}
  
  if(((frameCount/10*PI)-i[9])<PI){
   a[9]=(frameCount/10*PI-PI*9/4);
  }
  else if(((frameCount/10*PI)-i[9])<5*PI)
  { a[9]=0;}
  else
  {i[9]=i[9]+5*PI}
  
  if(((frameCount/10*PI)-i[10])<PI){
   a[10]=(frameCount/10*PI-PI*10/4);
  }
  else if(((frameCount/10*PI)-i[10])<5*PI)
  { a[10]=0;}
  else
  {i[10]=i[10]+5*PI}

  noStroke();
  
  for(x=21;x>=0;x--){
    if(x%2==1){
      fill(220);
    ellipse(400,400,50+50*x+50*abs(sin(a[(x-1)/2])),50+50*x+50*abs(sin(a[(x-1)/2])));
    }
    else{
      fill(0);
      ellipse(400,400,50+50*x,50+50*x);
    }
  }
  }

在上述代码运行后结果如下
由于是录频转gif画质不是很好

老师还要求需要下一步扩展，但这个图实在不太清楚如何扩展便制作了上一个动图黑白色换成彩色代码如下

function setup() {
  createCanvas(800, 800);
  frameRate(20);
  i=[0,0,0,0,0,0,0,0,0,0,0];
  for(j=0;j<=10;j++){
  i[j]=j*PI*1/4;
  }
  a=[0,0,0,0,0,0,0,0,0,0,0];
  
}

function draw() {
  background(0);

  if(((frameCount/10*PI)-i[0])<PI){
   a[0]=(frameCount/10*PI-0);
  }
  else if(((frameCount/10*PI)-i[0])<5*PI)
  { a[0]=0;}
  else
  {i[0]=i[0]+5*PI}

  if(((frameCount/10*PI)-i[1])<PI){
   a[1]=(frameCount/10*PI-PI/4);
  }
  else if(((frameCount/10*PI)-i[1])<5*PI)
  { a[1]=0;}
  else
  {i[1]=i[1]+5*PI}
  
  if(((frameCount/10*PI)-i[2])<PI){
   a[2]=(frameCount/10*PI-PI*2/4);
  }
  else if(((frameCount/10*PI)-i[2])<5*PI)
  { a[2]=0;}
  else
  {i[2]=i[2]+5*PI}
  
  if(((frameCount/10*PI)-i[3])<PI){
   a[3]=(frameCount/10*PI-PI*3/4);
  }
  else if(((frameCount/10*PI)-i[3])<5*PI)
  { a[3]=0;}
  else
  {i[3]=i[3]+5*PI}
  
  if(((frameCount/10*PI)-i[4])<PI){
   a[4]=(frameCount/10*PI-PI*4/4);
  }
  else if(((frameCount/10*PI)-i[4])<5*PI)
  { a[4]=0;}
  else
  {i[4]=i[4]+5*PI}
  
  if(((frameCount/10*PI)-i[5])<PI){
   a[5]=(frameCount/10*PI-PI*5/4);
  }
  else if(((frameCount/10*PI)-i[5])<5*PI)
  { a[5]=0;}
  else
  {i[5]=i[5]+5*PI}
  
  if(((frameCount/10*PI)-i[6])<PI){
   a[6]=(frameCount/10*PI-PI*6/4);
  }
  else if(((frameCount/10*PI)-i[6])<5*PI)
  { a[6]=0;}
  else
  {i[6]=i[6]+5*PI}
  
  if(((frameCount/10*PI)-i[7])<PI){
   a[7]=(frameCount/10*PI-PI*7/4);
  }
  else if(((frameCount/10*PI)-i[7])<5*PI)
  { a[7]=0;}
  else
  {i[7]=i[7]+5*PI}
  
  if(((frameCount/10*PI)-i[8])<PI){
   a[8]=(frameCount/10*PI-PI*8/4);
  }
  else if(((frameCount/10*PI)-i[8])<5*PI)
  { a[8]=0;}
  else
  {i[8]=i[8]+5*PI}
  
  if(((frameCount/10*PI)-i[9])<PI){
   a[9]=(frameCount/10*PI-PI*9/4);
  }
  else if(((frameCount/10*PI)-i[9])<5*PI)
  { a[9]=0;}
  else
  {i[9]=i[9]+5*PI}
  
  if(((frameCount/10*PI)-i[10])<PI){
   a[10]=(frameCount/10*PI-PI*10/4);
  }
  else if(((frameCount/10*PI)-i[10])<5*PI)
  { a[10]=0;}
  else
  {i[10]=i[10]+5*PI}


  noStroke();
  
  /*for(x=21;x>=0;x--){
    if(x%2==1){
      fill(220);
    ellipse(400,400,50+50*x+50*abs(sin(a[(x-1)/2])),50+50*x+50*abs(sin(a[(x-1)/2])));
    }
    else{
      fill(0);
      ellipse(400,400,50+50*x,50+50*x);
    }
  }*/
  if(a[10]>0){
  fill(255,0,120);}
  else{
  fill(255);
  }
  ellipse(400,400,1100+50*abs(sin(a[10])),1100+50*abs(sin(a[10])));
  fill(0);
  ellipse(400,400,1050,1050);
  if(a[9]>0){
  fill(255,0,255);}
  else{
  fill(255);
  }
  ellipse(400,400,1000+50*abs(sin(a[9])),1000+50*abs(sin(a[9])));
  fill(0);
  ellipse(400,400,950,950);
  if(a[8]>0){
  fill(120,0,255);}
  else{
  fill(255);
  }
  ellipse(400,400,900+50*abs(sin(a[8])),900+50*abs(sin(a[8])));
  fill(0);
  ellipse(400,400,850,850);
  if(a[7]>0){
  fill(0,0,255);}
  else{
  fill(255);
  }
  ellipse(400,400,800+50*abs(sin(a[7])),800+50*abs(sin(a[7])));
  fill(0);
  ellipse(400,400,750,750);
  if(a[6]>0){
  fill(0,120,255);}
  else{
  fill(255);
  }
  ellipse(400,400,700+50*abs(sin(a[6])),700+50*abs(sin(a[6])));
  fill(0);
  ellipse(400,400,650,650);
  if(a[5]>0){
  fill(0,255,255);}
  else{
  fill(255);
  }
  ellipse(400,400,600+50*abs(sin(a[5])),600+50*abs(sin(a[5])));
  fill(0);
  ellipse(400,400,550,550);
  if(a[4]>0){
  fill(0,255,120);}
  else{
  fill(255);
  }
  ellipse(400,400,500+50*abs(sin(a[4])),500+50*abs(sin(a[4])));
  fill(0);
  ellipse(400,400,450,450);
  if(a[3]>0){
  fill(0,255,0);}
  else{
  fill(255);
  }
  ellipse(400,400,400+50*abs(sin(a[3])),400+50*abs(sin(a[3])));
  fill(0);
  ellipse(400,400,350,350);
  if(a[2]>0){
  fill(120,255,0);}
  else{
  fill(255);
  }
  ellipse(400,400,300+50*abs(sin(a[2])),300+50*abs(sin(a[2])));
  fill(0);
  ellipse(400,400,250,250);
  if(a[1]>0){
  fill(255,120,0);}
  else{
  fill(255);
  }
  ellipse(400,400,200+50*abs(sin(a[1])),200+50*abs(sin(a[1])));
  fill(0);
  ellipse(400,400,150,150);
  
  if(a[0]>0){
  fill(255,0,0);}
  else{
  fill(255);
  }
  ellipse(400,400,100+50*abs(sin(a[0])),100+50*abs(sin(a[0])));
   fill(0);
  ellipse(400,400,50,50);
  
}

最后效果如下``

在这里插入图片描述
至此，该图片临摹及扩展完成。

梦在心在

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一次码绘

大三上这个学期我们上了互动媒体技术这门课，其中有一份作业是要写博客的，故旧写下此篇，码绘描摹原图如下![属实闪的脑壳疼但逼格貌似挺高 ](https://img-blog.csdnimg.cn/20191021102431832.gif) 由于要描摹这幅图so我们对这个图进行分析， 1.主要是由黑白圆构成，又加入了动态变化， 2.奇数层黑...
复制链接

扫一扫