Skip to content

Instantly share code, notes, and snippets.

@termat

termat/index.html

Created March 12, 2019 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save termat/812bf07bacbe24b9faa9995c46d76f91 to your computer and use it in GitHub Desktop.
Save termat/812bf07bacbe24b9faa9995c46d76f91 to your computer and use it in GitHub Desktop.
Download ZIP
Line Art
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Line Art</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
<script data-processing-target="app" type="application/processing">
final float RA=120;
final float RB=120;
final float AX=-100;
final float AY=565;
final float BX=565;
final float BY=-100;
final float OMEGAA=0.16;
final float OMEGAB=0.12345;
final int N=40;
float _t=random(-99999999,0);
void setup() {
size(480,480);
frameRate(30);
}
void draw() {
background(0);
colorMode(HSB, 360, 100, 100);
for(int i=0;i<N;i++){
float theta=2*PI*i/N;
color c=color(360*i/N, 100, 100);
stroke(c);
strokeWeight(10);
double x0=AX + RA * Math.cos(theta + OMEGAA * _t);
double y0=AY + RA * Math.sin(theta + OMEGAA * _t);
double x1=BX + RB * Math.cos(theta + OMEGAB * _t);
double y1=BY + RB * Math.sin(theta + OMEGAB * _t);
line(x0,y0,x1,y1);
}
_t++;
}
</script>
</head>
<body>
<table border="1"><tr><td>
<canvas id="app" width="400" height="400"></canvas>
</td></tr></table>
</body>
</html>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment