随机效果与码绘作品

随机效果与码绘作品

1. 随机游走&颜色向量（向特定方向移动时颜色不一样）
   
   随机数の终结——最后的结果居然是一种稳定的图形，说明P5中随机数的生成是有周期的
   

var x1=250;
var y1=250;
var x2 = 250;
var y2 = 250;
var x3=250;
var y3=250;
var x4 = 250;
var y4 = 250;
var step = 25;

// 函数setup() ：准备阶段
function setup() {
	createCanvas(500,500);

}

// 函数draw()：作画阶段
function draw() {
	p1();
    p2();
    p3();
    p4();
    back();
}

function p2()
{
  var coin2 = 
    random(0,1)>0.5?true:false;
	choice = random(0,4);
	if(choice<1)
	{
      	fill(255,0,0,255);
		x2+=step;
       
	}
	else if(choice>=1&&choice<2)
	{
      	fill(0,255,0,255);
		x2-=step;
      
	}
	else if(choice>=2&&choice<3)
	{
		y2+=step;
    
      	fill(0,0,255,255);
	}
	else if(choice>=3&&choice<4)
	{
      	fill(255,255,0,255);
		y2-=step;
        
	}
  
	noStroke();
	ellipse(x2,y2,10,10);
}

function p1()
{
  var coin2 = 
    random(0,1)>0.5?true:false;
	choice = random(0,4);
	if(choice<1)
	{
      	fill(255,0,0,255);

        x1+=step;
	}
	else if(choice>=1&&choice<2)
	{
      	fill(0,255,0,255);
		
        x1-=step;
	}
	else if(choice>=2&&choice<3)
	{

        y1+=step;
      	fill(0,0,255,255);
	}
	else if(choice>=3&&choice<4)
	{
      	fill(255,255,0,255);
        y1-=step;
	}
  
	noStroke();
	ellipse(x1,y1,10,10);
}

function p3()
{
  var coin2 = 
    random(0,1)>0.5?true:false;
	choice = random(0,4);
	if(choice<1)
	{
      	fill(255,0,0,255);

        x3+=step;
	}
	else if(choice>=1&&choice<2)
	{
      	fill(0,255,0,255);
		
        x3-=step;
	}
	else if(choice>=2&&choice<3)
	{

        y3+=step;
      	fill(0,0,255,255);
	}
	else if(choice>=3&&choice<4)
	{
      	fill(255,255,0,255);
        y3-=step;
	}
  
	noStroke();
	ellipse(x3,y3,10,10);
}
function p4()
{
  var coin2 = 
    random(0,1)>0.5?true:false;
	choice = random(0,4);
	if(choice<1)
	{
      	fill(255,0,0,255);

        x4+=step;
	}
	else if(choice>=1&&choice<2)
	{
      	fill(0,255,0,255);
		
        x4-=step;
	}
	else if(choice>=2&&choice<3)
	{

        y4+=step;
      	fill(0,0,255,255);
	}
	else if(choice>=3&&choice<4)
	{
      	fill(255,255,0,255);
        y4-=step;
	}
  
	noStroke();
	ellipse(x4,y4,10,10);
}
function back()
{
  if(x1<0) x1=500;
  if(x1>500) x1=0;
  if(x2<0) x2=500;
  if(x2>500) x2=0;
  if(x3<0) x1=500;
  if(x3>500) x1=0;
  if(x4<0) x2=500;
  if(x4>500) x2=0;
  if(y1<0) y1=500;
  if(y1>500) y1=0;
  if(y2<0) y2=500;
  if(y2>500) y2=0;
  if(y3<0) y1=500;
  if(y3>500) y1=0;
  if(y4<0) y2=500;
  if(y4>500) y2=0;
    
}

• 柏林噪声的应用 ——所爱隔山海，山海不可移
  通过柏林噪声生成地形，和飞行物的轨迹与飞行角度
  翅膀的震动通过自己编写的库（利用贝塞尔曲线）来实现
  

 xoff=0;
 yoff=10000;

function setup() {
  createCanvas(500, 500);
}

function draw() {
  
  background(240);
  drawmountain();
  move();
  drawbutterfly()
}

function move()
{
  xoff = xoff + 0.005;
  yoff= yoff+0.005;
  x= noise(xoff) * width;
  y= noise(yoff)*height;
  translate(x,y)
  rotate(-PI/2*noise(yoff))
}

function drawmountain()
{
    for(var i=1;i<=9;i++)
      {
    for (let x=0; x < width; x++) 
    {
    let noiseVal = noise(i*10+x/100-xoff*i/3);
    stroke(225/i);
    line(x, height*3/(10-i)+noiseVal*height/2, x, height);
    }
     }
}
function drawbutterfly()
{
  ellipse(0,0,10,13+10*noise(xoff));
  T=millis();
  fill(100+T/10%125,20,20);
  arcline0424(5,0,20+50*noise(yoff),-25+10*noise(yoff),80);
  arcline0424(5,0,20+50*noise(yoff),25+10*noise(yoff),80);
  fill(100+T/10%55,20,20);
  arcline0424(5,0,30+50*noise(yoff),50+10*noise(xoff),80);
  arcline0424(5,0,30+50*noise(yoff),-50+10*noise(xoff),80);
}

function arcline0424(x1,y1,x2,y2,D)
{
  bezier(x1,y1,x1+(x2-x1)/3+D/2-random(D),y1+(y2-y1)/3+D/2-random(D),x1+2*(x2-x1)/3+D/2-random(D),y1+2*(y2-y1)/3+D/2-random(D),x2,y2);
  
}

function arclinepluse0424(x1,y1,x2,y2,D)
{
  x3=x1+(x2-x1)/3+D/2-random(D);y3=y1+(y2-y1)/3+D/2-random(D);
  x4=x1+(x2-x1)/3*2+D/2-random(D);y4=y1+(y2-y1)/3*2+D/2-random(D);
  arcline0424(x1,y1,x3,y3,D);
  arcline0424(x3,y3,x4,y4,D);
   arcline0424(x4,y4,x2,y2,D);
}