commit
71b77df011
9 changed files with 77 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||||||
|
.idea |
||||||
|
|
||||||
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"display_name": "Circles", |
||||||
|
"info_text": "Inspired by the CodingTrain (useless).", |
||||||
|
"visible": false, |
||||||
|
"tags": ["Maths"] |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js" type="text/javascript"></script> |
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js" type="text/javascript"></script> |
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js" type="text/javascript"></script> |
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script> |
||||||
|
<script src="scripts/sketch.js" type="text/javascript"></script> |
||||||
|
<script src="scripts/Circle.js" type="text/javascript"></script> |
||||||
|
<link href="stylesheets/styles.css" rel="stylesheet"> |
||||||
|
<link href="pictures/favicon.ico" rel="icon" type="image/x-icon"> |
||||||
|
<title>Filling Circles</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 172 KiB |
@ -0,0 +1,27 @@ |
|||||||
|
class Circle{ |
||||||
|
|
||||||
|
constructor(x, y, r){ |
||||||
|
this.x = x; |
||||||
|
this.y = y; |
||||||
|
this.r = r; |
||||||
|
this.done = false; |
||||||
|
this.valid = true; |
||||||
|
} |
||||||
|
|
||||||
|
draw(){ellipse(this.x, this.y, this.r * 2, this.r * 2);} |
||||||
|
|
||||||
|
grow(){this.r ++;} |
||||||
|
|
||||||
|
touchesEdges(){ |
||||||
|
if (this.x + this.r > windowWidth || this.x - this.r < 0 |
||||||
|
|| this.y + this.r > windowHeight || this.y - this.r < 0) return true; |
||||||
|
} |
||||||
|
|
||||||
|
touchesCircle(){ |
||||||
|
for (var c of circles){ |
||||||
|
if (c == this) continue; |
||||||
|
if (dist(this.x, this.y, c.x, c.y) < this.r + c.r) return true; |
||||||
|
}
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
var circles = []; |
||||||
|
|
||||||
|
function setup(){ |
||||||
|
setFrameRate(60); |
||||||
|
createCanvas(windowWidth, windowHeight); |
||||||
|
strokeWeight(1); |
||||||
|
} |
||||||
|
|
||||||
|
function draw(){ |
||||||
|
fill(55); |
||||||
|
while (true){ |
||||||
|
var circle = new Circle(random(windowWidth), random(windowHeight), 1); |
||||||
|
if (circle.touchesCircle()) circle.valid = false; |
||||||
|
if (circle.valid) circles.push(circle); break; |
||||||
|
} |
||||||
|
for (var c of circles){ |
||||||
|
if (c.touchesEdges() || c.touchesCircle()) c.done = true; |
||||||
|
if (!c.done) c.grow(); |
||||||
|
c.draw(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,3 @@ |
|||||||
|
a:link, a:hover, a:active, a:visited{color: #000;} |
||||||
|
|
||||||
|
body{margin: 0; padding: 0;} |
||||||
|
After Width: | Height: | Size: 368 KiB |
Loading…
Reference in new issue