2. 程式人生 > >手繪vs碼繪（動態）

手繪vs碼繪（動態）

阿新 • • 發佈：2018-11-22

手繪vs碼繪（動態）

主題

用手繪和碼繪兩種方式創作“運動”主題的作品，對比二者在表現“動態”方面的異同。

碼繪展示

碼繪一
在這裡插入圖片描述
碼繪二
在這裡插入圖片描述
這裡實現了兩幅碼繪作品，GIF圖製作的不好，但也能看出效果。這個的設計不是我的原創，原圖來源於圖形學課狄蘭老師提供的數字媒體藝術的學生做的一些動圖，我不知道原作者，他們應該是畫出來的，我偷了個懶，把他們的兩個作品用程式碼實現出來。這裡附上原圖。我實現了第三列的一二兩個。
參考素材
參考素材

手繪展示

在這裡插入圖片描述
做的時候我一直都沒明白手繪怎麼展示動態，我首先完成的是六邊形迴圈的那個碼繪圖，之後才突然想到了什麼，然後做了正方體，最後才完成手繪，實際上，做完我仍然是用我自己的理解表現的動態，至於對不對我就不清楚了。

程式碼

float speed=1.732;
float xspeed=1.5;     ///?1.5
float yspeed=3*15*1.732/2/30;

float radius=20;
float rspeed=0.667;

float x1=50,y1=50;
//float x2=50,y2=50+30*1.732;

float x3=95,y3=50+15*1.732;
int n=
 
0;
void setup() {
  size(265,300);
  frameRate(30);
  smooth();
  
  println(rspeed);
}

void draw() {
  background(255);
  int timer=millis();
  
  if(timer<=1000+n)
  {
   
  }
  else if(timer>1000+n&&timer<=2000+n)
  {
    x1+=xspeed;
    radius-=rspeed;
    
    x3-=xspeed;
   // x2+=xspeed;
   // y2-=yspeed;
 

  }
  else if(timer>2000+n&&timer<=3000+n)
  {
   // y-=speed;
  }
  else if(timer>3000+n&&timer<=4000+n)
  {
   // x-=speed;
   y1+=yspeed;
   
   radius+=rspeed;
   println(radius);
   y3-=yspeed;
  // x2+=xspeed;
  }
  else if(timer>4000+n&&timer<=5000+n)
  {
    
  }
  else if(timer>5000+n&&timer<=6000+n)
  {
    x1-=xspeed;
    x3+=xspeed;
    
    radius-=rspeed;
   // y2+=yspeed;
  }
  else if(timer>6000+n&&timer<=7000+n)
  {
    
  }
  else if(timer>7000+n&&timer<8000+n)
  {
    y1-=yspeed;
    y3+=yspeed;
    
    radius+=rspeed;
    //x2-=xspeed;
  }
  else /*if(timer==8000+n)8*/
  {
    n=n+8000;
  }
  
//  loopdraw(x1,y1);
  back(x3,y3);
  loopdraw(x3,y3,radius);
//  back(x3,y3);
  loopdraw(x1,y1,radius);

}

void back(float x,float y)
{
  fill(26,56,85); //blue
  rect(0,0,300,y+30*1.732+15*1.732);
  
  fill(253,186,95); //yellow
  rect(0,y+30*1.732+15*1.732,300,300);
}

void loopdraw(float x,float y,float r)
{
  for(int j=-1;j<3;j=j+1)
  {
    for(int i=-2;i<10;i=i+2)
    {
      fill(72,192,208); //little blue
      drawSix(x+90*j,y+30*1.732*i,30);
    
      fill(26,56,85);
      drawSix(x+90*j,y+30*1.732*i,r);
    
      fill(253,186,95);
      drawSix(x+90*j,y+30*1.732*i,20-r);
    }
  }
  for(int j=-1;j<3;j=j+1){
  for(int i=-1;i<10;i=i+2)
  {
    fill(224,84,74);
    drawSix(x+90*j,y+30*1.732*i,30);
  
    fill(253,186,95);
    drawSix(x+90*j,y+30*1.732*i,r);
  
    fill(26,56,85);
    drawSix(x+90*j,y+30*1.732*i,20-r);
  }
  }
}
void drawSix(float x,float y,float a)
{
  beginShape();
  vertex(x-a/2,y-a/2*1.732);
  vertex(x+a/2,y-a/2*1.732);
  vertex(x+a,y);
  vertex(x+a/2,y+a/2*1.732);
  vertex(x-a/2,y+a/2*1.732);
  vertex(x-a,y);
  vertex(x-a/2,y-a/2*1.732);
  endShape();
}

碼繪二

PVector location;
PVector velocity;
PVector Clocationleft;
PVector Cvelocityleft;
PVector Clocationfront;
PVector Cvelocityfront;
void setup() {
  size(265,300);
  frameRate(30);
  smooth();
  
  location=new PVector(50,250);
  velocity=new PVector(1,-1);
  Clocationleft=new PVector(50-100,250);
  Cvelocityleft=new PVector(1.5,0);
  Clocationfront=new PVector(50+50,250+50*1.732);
  Cvelocityfront=new PVector(-0.5,-1.732*0.5);
}

void draw() {
  background(253,186,95);
  
  location.add(velocity);
  
  Clocationleft.add(velocity);
  Clocationleft.add(Cvelocityleft);
  
  Clocationfront.add(velocity);
  Clocationfront.add(Cvelocityfront);
  
  for(int i=0;i<=0;i++)
  {
    drawbox(location.x+i*50,location.y-i*50,30,Clocationleft.x+i*50*2.5,Clocationleft.y-i*50,Clocationfront.x+i*50*0.5,Clocationfront.y-i*(50+50*0.5*1.732));
  }
}

void drawbox(float x,float y,float a,float x1,float y1,float x2,float y2)
{
  float dx=a/6*0.8;
  float dy=a/6*1.732*0.8;
//  int timer=millis();
  
  if(x1>x+50)
  {
  //front
  fill(224,84,74);
  stroke(224,84,74);
  quad(x+dx,y+dy, x+a-3*dx,y+dy, x+a/2-dx,y+a/2*1.732-dy ,x-a/2+3*dx,y+a/2*1.732-dy);
  
  fill(72,192,208);   
  stroke(72,192,208);
  quad(x+a,y, x+a/2,y+a/2*1.732, x+a/2-dx,y+a/2*1.732-dy, x+a-3*dx,y+dy);
  quad(x+a/2,y+a/2*1.732, x-a/2,y+a/2*1.732,  x-a/2+3*dx,y+a/2*1.732-dy, x+a/2-dx,y+a/2*1.732-dy);
  drawcuboidfront(x2,y2,a);
  fill(72,192,208);   
  stroke(72,192,208);
  quad(x,y, x+a,y, x+a-3*dx,y+dy, x+dx,y+dy);
  quad(x,y, x-a/2,y+a/2*1.732, x-a/2+3*dx,y+a/2*1.732-dy, x+dx,y+dy);
  
  //left
  fill(224,84,74);//red  
  stroke(224,84,74);
  quad(x-a/2,y-a/2*1.732+dy*2, x-dx*2,y, x-a/2,y+a/2*1.732-dy*2, x-a+dx*2,y);
 
  fill(26,56,85); 
  stroke(26,56,85);
  quad(x-a/2,y+a/2*1.732, x-a,y, x-a+dx*2,y,  x-a/2,y+a/2*1.732-dy*2);
  quad(x-a,y, x-a/2,y-a/2*1.732, x-a/2,y-a/2*1.732+dy*2, x-a+dx*2,y); 
  drawcuboidleft(x1,y1,a);
  fill(26,56,85); 
  stroke(26,56,85);
  quad(x-a/2,y-a/2*1.732,x,y,x-dx*2,y,x-a/2,y-a/2*1.732+dy*2);
  quad(x,y, x-a/2,y+a/2*1.732, x-a/2,y+a/2*1.732-dy*2, x-dx*2,y);
  }
  else
  {
  //left
  fill(224,84,74);//red  
  stroke(224,84,74);
  quad(x-a/2,y-a/2*1.732+dy*2, x-dx*2,y, x-a/2,y+a/2*1.732-dy*2, x-a+dx*2,y);
 
  fill(26,56,85); 
  stroke(26,56,85);
  quad(x-a/2,y+a/2*1.732, x-a,y, x-a+dx*2,y,  x-a/2,y+a/2*1.732-dy*2);
  quad(x-a,y, x-a/2,y-a/2*1.732, x-a/2,y-a/2*1.732+dy*2, x-a+dx*2,y); 
  drawcuboidleft(x1,y1,a);
  fill(26,56,85); 
  stroke(26,56,85);
  quad(x-a/2,y-a/2*1.732,x,y,x-dx*2,y,x-a/2,y-a/2*1.732+dy*2);
  quad(x,y, x-a/2,y+a/2*1.732, x-a/2,y+a/2*1.732-dy*2, x
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
手繪vs碼繪（動態）

     
  
  
  
 
 
  手繪vs碼繪（動態）
  
   
    主題
    碼繪展示
    手繪展示
    程式碼
    製作過程
    總結
   
  
 
  
 主題 
 用手繪和碼繪兩種方式創作“運動”主題的作品，對比二者在表現“動態”方面的異同。 
 碼繪展示 
 碼繪一  碼繪 



  
 

    


    
    
手繪VS碼繪（一）：靜態圖繪製(碼繪使用P5.js)

     
 
							
							
							首先讓我們來看看原圖：

出於想要簡單一點的考慮，手繪和碼繪就都不畫右下角的頭啦！
手繪：
先來看看手繪的效果圖吧（手殘ing…）

emmmm大概是真的有點醜
碼繪

先來看看效果圖，然後再一部分一部分的來看繪圖過程吧！

還是挺像的對吧！！！
就是腦袋好像小 



  
 

    


    
    
手繪VS碼繪（靜態）

     
  
 
 第一次把手繪和碼繪放到一起比較，在此之前我即使是知道可以用程式碼進行繪畫，但是還是從來沒有想過認真的對他們進行對比，這次作業算是給我打來了一個新的思路，讓我認識到了程式碼中的一些樂趣。 
 首先是手繪: 
   
 我發四這不是我的真實水平！但是由於碼程式碼技術太差，第一次接觸到這個軟體就 



  
 

    


    
    
手繪vs碼繪

     
  
  
  
 
 
  手繪vs碼繪
  
   
    主題
    手繪作品
    碼繪作品
    碼繪程式碼
    體會
    新的體會
   
  
 
  
 主題 
 比較用程式碼與手繪創作靜態畫的異同 
 手繪作品 
  
 碼繪作品 
  
 碼繪程式碼 
 使用processi 



  
 

    


    
    
手繪與碼繪的對比（靜態）

     
  
  
  
 在這次對比用程式碼和用手繪創作靜態繪畫的實驗中，選擇的程式設計工具是p5.js,p5.js語法和使用上較為簡單，入門很快,繪製的作品為一個簡單的卡通小黃人。下面按要求從思路、技術、創作體驗、創作偏好等方面比較一下二者，以及它們的異同。 碼繪程式碼如下： 
 function setup()  



  
 

    


    
    
地圖動態標繪--B/S應用（二）

     
 
							
							
							
  作者：Sniper


動態標繪廣泛應用於電力、通訊和應急等多個行業和領域。它可以用形象生動的向量符號描述各種業務物件，表示各種資源，還可以動態渲染業務進度和流程。

在地圖動態標繪–B/S應用（一）這篇部落格中我們介紹了在B/S應用中使用SuperMap 



  
 

    


    
    
canvas一周一練 -- canvas繪制馬尾圖案 （5）

     
 gre   doc   dom   clas   ret   rect   img   png   com   運行效果：


<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas i 



  
 

    


    
    
使用高德地圖繪制多邊形區域（轉）

     
 ctype   color   點擊   create   user   ins   .com   stroke   簡單   轉自：http://www.cnblogs.com/mengxingxinqing/p/6087201.html
最近遇到一個需求，在網頁上面編輯多邊形的區域，並且需要能夠判斷一個 



  
 

    


    
    
P5.JS 手繪和碼繪兩種方式“運動”主題作品的對比研究

     
  
 
 這次作業我針對的主題是“斐波那契螺旋線” 
 背景知識：斐波那契螺旋線，也稱“黃金螺旋”，是根據斐波那契數列畫出來的螺旋曲線，自然界中存在許多斐波那契螺旋線的圖案，是自然界最完美的經典黃金比例。作圖規則是在以斐波那契數為邊的正方形拼成的長方形中畫一個90度的扇形，連起來的弧線就是斐波那契螺旋線。在這 



  
 

    


    
    
p5.js:手繪與碼繪，靜態

     
  
  
  
 手繪和碼繪———靜態繪圖 
 碼繪圖： 
  
 手繪：  程式碼： 
 function setup() 
{  
createCanvas(600, 1200);
} 
function draw() 
{  
background(255,255,0)；
stroke(0,0,0);	 



  
 

    


    
    
手繪與碼繪————讓畫面動起來!

     
  
  
  
 簡介 
 和上次使用靜態畫來比較手繪和碼繪的區別不同，本次我們要用“動態”的影象來更深的體會藝術的不同表現方法和形式。 第一次實驗我們僅僅通過對手繪和碼繪的靜態作品進行了比較，從感官上來看似乎區別不大。在這一篇博文中，我將以一個非常有名的圖形作為線索，圍繞它來展開論述。 
 創作靈感 
 創 



  
 

    


    
    
手繪與碼繪————靜態對比

     
  
  
  
 手繪與碼繪——靜態對比 
 畫畫的工具不僅僅是紙和筆，還有螢幕和程式碼~ 下面分別通過紙筆和程式碼來繪製同一幅圖，我們將在最後比較兩者的區別。 繪畫的主角就是這位：  
 手繪 
 （只是大概描了一下輪廓） 
 碼繪 
  這是用P5.js繪製的上色版，已經和原版非常像了。 下面貼上P5.j 



  
 

    


    
    
手繪與碼繪(二)

     
 
                程式設計與手繪的對比

上一篇文章我們簡單的進行了程式設計與手繪的對比，但是僅僅停止在靜態的畫上，這次我將使用p5.js程式讓畫動起來！

執行環境

JavaScript+p5.js



手繪

手繪如圖：



使用P5.js進行繪製





使用P5.js動態化

 



  
 

    


    
    
手繪和碼繪兩種方式創作“運動”主題

     
 
                藝術的展現形式有多種多樣，繪畫的方式也有很多。這篇文章主要來比較一下手繪與碼繪。

什麼是碼繪？用程式語言即程式碼來畫畫。一般人更多接觸到的是手繪，只有從事或研究相關方面的才會比較瞭解碼繪。聽說現在的藝術生都要學點程式設計呢。





上面兩張就是用processing作的 



  
 

    


    
    
手繪和碼繪比較之“運動”主題：Magic of Rotation

     
 
							
							
							都說processing是程式設計藝術或者技術家的程式語言，繼上次比較了靜態的手繪和碼繪之後，這次我們來比較動態，於是此次本人利用processing畫了一幅動態效果的圖，n層圓弧，每一層以不同速度旋轉形成了一種視覺上的奇幻效果,下面現看圖：
3層


7層

 



  
 

    


    
    
手繪&碼繪 P2

     
  
  
  
 前言：上一篇文章我們對比了同一幅畫手繪與碼繪的不同，本文著重考慮動態圖的繪製。 
 PS：考慮到p5與processing區別不大，這裡參考資料都出自p5 
 背景知識：noise(),返回所定義座標的柏林噪聲值。柏林噪聲是個用來生成比 random() 所能生成更自然及更諧波的隨機數字系列 



  
 

    


    
    
手繪&碼繪 P1

     
  
  
  
 
 
  靜態對比
   
  碼繪：簡單而言，碼繪即用程式碼繪圖，通過對不同圖形的應用達到繪製圖像的結果。
 
  
 手繪作品： 首先介紹下我的手繪作品，由於本人水平欠佳，藝術細胞匱乏，如果不是作業要求，我只想敝帚自珍，不對外公佈TT，外加使用彩鉛作為繪圖工具，色彩不夠鮮豔，拍照效果極為 



  
 

    


    
    
MFC對話方塊如何使用工具欄並修改工具欄的背景顏色與自繪對話方塊統一（二）

     
 
                
    寫這篇文章只是為了解決我上一篇文章遺留的一個問題，本來覺得這個問題可以不用管，但是在我寫的程式中發現並不能置之不理，先來重現這個問題
    工具欄有一部分沒有繪上


    看紅色框包圍的地方，是背後 VS2010 的介面，因為程式擦成透明的啦，上一篇文章我錯誤 



  
 

    


    
    
手繪和碼繪對比

     
  
  
  
 作業的主題是“運動” 
 碼繪 
 吃豆人靜態圖 這是第一幅p5作業，當時就看到了吃豆人的圖片立馬就想做一個吃豆人的靜態圖。  吃豆人動圖  既然吃豆人的圖片已經制作出來了，就緊接著讓他能動起來吃豆子。   程式碼 
  var x=0;
	var y=0;
	var t=0;
	var p 



  
 

    


    
    
WPF  GDI+字符串繪制成圖片（一）

     
 inf   lan   acc   []   isp   tails   mea   summary   blog   原文:WPF  GDI+字符串繪制成圖片（一）