termat/articulated-uneune.markdown

## articulated-uneune.markdown

      
    Raw
  

              articulated-uneune.markdown
            
          
    Articulated:Uneune

A Pen by termat on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=460, user-scalable=no, maximum-scale=1.0">
<title>うねうね</title>
<script data-processing-target="app" type="application/processing">
final int maxNum=30;
float[] xx= new float[maxNum];
float[] yy= new float[maxNum];
float[] aa= new float[maxNum];
float _length = 40;
float tx;
float ty;

void setup() {
  size(460,460);
  for(int i=0; i<maxNum; i++){
  xx[i]=0;
  yy[i]=0;
  aa[i]=0;
  }
  yy[maxNum-1] = 460;
  frameRate(30);
}

void draw() {
  background(255);
  if(px!=-999){
    angle(0,px,py);
  }else{
    angle(0,mouseX,mouseY);
  }
  for(int i=1;i<maxNum;i++)angle(i,tx,ty);
  for(int i=maxNum-1;i>=1;i--)position(i,i-1);
  for(int i=0;i<maxNum;i++)drawElem(xx[i],yy[i],aa[i],(i+1)*2,i);
}

void angle(int i,float _x,float _y){
  float dx = _x - xx[i];
  float dy = _y - yy[i];
  aa[i] = atan2(dy,dx);
  tx = _x - cos(aa[i]) * _length;
  ty = _y - sin(aa[i]) * _length;
}

void position(int a,int b){
  xx[b] = xx[a] + cos(aa[a]) * _length;
  yy[b] = yy[a] + sin(aa[a]) * _length;
}

void drawElem(float _x,float _y,float _a,int _s,int i){
  color c = color(0,0,0,126);
  stroke(c);
  strokeWeight(_s);
  float dx=_length*cos(_a);
  float dy=_length*sin(_a);
  line(_x,_y,_x+dx,_y+dy);
}
</script>
</head>
<body>
<table border="1"><tr><td>
<canvas id="app" width="460" height="460"></canvas>
</td></tr></table>
</body>
</html>

## script.js
var px=-999;
var py=-999;
function touchDown(event) {
  px=event.touches[0].pageX;
  py=event.touches[0].pageY;
  isPress=true;
  event.preventDefault();
}
function touchMove(event) {
  px=event.touches[0].pageX;
  py=event.touches[0].pageY;
  isPress=true;
  event.preventDefault();
}
function touchUp(event) {
  isPress=false;
  event.preventDefault();
}

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=460, user-scalable=no, maximum-scale=1.0">
	<title>うねうね</title>
	<script data-processing-target="app" type="application/processing">
	final int maxNum=30;
	float[] xx= new float[maxNum];
	float[] yy= new float[maxNum];
	float[] aa= new float[maxNum];
	float _length = 40;
	float tx;
	float ty;

	void setup() {
	size(460,460);
	for(int i=0; i<maxNum; i++){
	xx[i]=0;
	yy[i]=0;
	aa[i]=0;
	}
	yy[maxNum-1] = 460;
	frameRate(30);
	}

	void draw() {
	background(255);
	if(px!=-999){
	angle(0,px,py);
	}else{
	angle(0,mouseX,mouseY);
	}
	for(int i=1;i<maxNum;i++)angle(i,tx,ty);
	for(int i=maxNum-1;i>=1;i--)position(i,i-1);
	for(int i=0;i<maxNum;i++)drawElem(xx[i],yy[i],aa[i],(i+1)*2,i);
	}

	void angle(int i,float _x,float _y){
	float dx = _x - xx[i];
	float dy = _y - yy[i];
	aa[i] = atan2(dy,dx);
	tx = _x - cos(aa[i]) * _length;
	ty = _y - sin(aa[i]) * _length;
	}

	void position(int a,int b){
	xx[b] = xx[a] + cos(aa[a]) * _length;
	yy[b] = yy[a] + sin(aa[a]) * _length;
	}

	void drawElem(float _x,float _y,float _a,int _s,int i){
	color c = color(0,0,0,126);
	stroke(c);
	strokeWeight(_s);
	float dx=_length*cos(_a);
	float dy=_length*sin(_a);
	line(_x,_y,_x+dx,_y+dy);
	}
	</script>
	</head>
	<body>
	<table border="1"><tr><td>
	<canvas id="app" width="460" height="460"></canvas>
	</td></tr></table>
	</body>
	</html>
	var px=-999;
	var py=-999;
	function touchDown(event) {
	px=event.touches[0].pageX;
	py=event.touches[0].pageY;
	isPress=true;
	event.preventDefault();
	}
	function touchMove(event) {
	px=event.touches[0].pageX;
	py=event.touches[0].pageY;
	isPress=true;
	event.preventDefault();
	}
	function touchUp(event) {
	isPress=false;
	event.preventDefault();
	}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>