Skip to content

Instantly share code, notes, and snippets.

@hackingmath
Created April 8, 2020 19:52
Show Gist options
  • Save hackingmath/8475b5554a7f5b7053f536482c003314 to your computer and use it in GitHub Desktop.
Save hackingmath/8475b5554a7f5b7053f536482c003314 to your computer and use it in GitHub Desktop.
Wandering Astroid
/* Copy of Bees and Bombs' sketch
https://twitter.com/beesandbombs/status/881857295008882689
*/
var b = 0; //counter for rotation
var sz = 500; //size of triangle
var linelist = [];
var side = 1; //side that's being drawn
function setup(){
createCanvas(600,600);
noFill();
colorMode(HSB);
}
function draw(){
frameRate(15);
background(0);//black
translate(width/2,height/2); //go to center of screen
//create the vertices of the big triangle
var pt1 = createVector(sz/2,sz/(2*sqrt(3)));
var pt2 = createVector(-sz/2,sz/(2*sqrt(3)));
var pt3 = createVector(0,-sz/sqrt(3));
//call the triangle fractal
astroid1 = tri1(pt1,pt2,pt3,3,b);
//draw a line between p4 and p5
//add line to list
linelist.push(astroid1);
for (var i=0; i<linelist.length; i++){
linelist[i].display();
}
//increment b
b += 0.05;
//b can only be between 0 and 1
if (b > 1.0){
b = 0.0;
if (side == 1){
side = 2;
} else if (side == 2){
side = 3;
} else {
side = 1;
}
}
if (linelist.length > 20){
linelist.splice(0,1);
}
}
function tri1(p1,p2,p3,level,b){
strokeWeight(1);
stroke(200,300,300) //color
//draw the main triangle
triangle(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y);
//the rotated points are linear interpolations of the
//vertices of the triangle
var p4 = createVector(lerp(p1.x,p2.x,b),lerp(p1.y,p2.y,b));
var p5 = createVector(lerp(p2.x,p3.x,b),lerp(p2.y,p3.y,b));
var p6 = createVector(lerp(p3.x,p1.x,b),lerp(p3.y,p1.y,b));
if(side == 1){
return new AstroidLine(p4,p5,b);
} else if(side == 2){
return new AstroidLine(p5,p6,b);
} else {
return new AstroidLine(p6,p4,b);
}
//make a triangle fractal of those points
//tri1(p4,p5,p6,level+1,b);
}
function AstroidLine(p1,p2,b){
this.p1 = p1;
this.p2 = p2;
this.b = b;
//lineList.push(this.p1,this.p2);
this.display = function(){
stroke(360-this.b*350,300,300) //color
line(this.p1.x,this.p1.y,this.p2.x,this.p2.y)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment