## Pen Settings

### CSS

#### Add External Stylesheets/Pens

Any URL's added here will be added as `<link>`s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

### JavaScript

#### JavaScript Preprocessor

Babel includes JSX processing.

#### Add External Scripts/Pens

Any URL's added here will be added as `<script>`s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

### Packages

Search for and use JavaScript packages from npm here. By selecting a package, an `import` statement will be added to the top of the JavaScript editor for this package.

### Behavior

#### Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

#### Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

#### Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

## HTML

```              ```
<input type="range" min="1" max="7" step="1" id="step" value="1">
<section>
<p>Draw a few particles</p>
<p>Calculate the distance between all particles</p>
<p>Draw a line if the distance is below 250px between two particles</p>
<p>Fade the lines based on the distance</p>
<p>Add user interactivity for more fun</p>
</section>
```
```
!

## CSS

```              ```
body {
margin: 0;
overflow: hidden;
display: flex;
height: 100vh;
background: black;
}
canvas {
margin: auto;
touch-action: none;
}

@mixin track {
box-sizing: border-box;
height: 6px;
background: #fff;
-webkit-appearance: none;
appearance: none;
}

@mixin thumb {
box-sizing: border-box;
width: 30px;
height: 30px;
background: #fff;
border: 2px solid black;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}

input {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: 80%;
height: 34px;
max-width: 400px;
background: transparent;
-webkit-appearance: none;
appearance: none;
&::-webkit-slider-runnable-track {@include track }
&::-moz-range-track { @include track }
&::-ms-track { @include track }

&::-webkit-slider-thumb {margin-top: -12px;@include thumb}
&::-moz-range-thumb { @include thumb }
&::-ms-thumb {margin-top:0px;@include thumb}
}

section {
box-sizing: border-box;
font-size: 30px;
color: white;
position: fixed;
left: 0;
top: 20px;
width: 100%;
text-align: center;
pointer-events: none;
p {
margin: 0;
}
@media (max-width: 500px) {
font-size: 24px;
}
}
```
```
!

## JS

```              ```
let particles = [];

class Particle {
constructor (r) {
this.v = createVector(random(width), random(height));
this.r = r || random(4) + 1.5;
this.speedX = random(-1, 1);
this.speedY = random(-1, 1);
}
update () {
this.v.x += this.speedX;
this.v.y += this.speedY;
}
walls () {
if (this.v.x <= -this.r) {
this.v.x = width;
} else if (this.v.x >= width + this.r) {
this.v.x = -this.r;
}
if (this.v.y <= -this.r) {
this.v.y = height;
} else if (this.v.y >= height + this.r) {
this.v.y = -this.r;
}
}
draw () {
noStroke();
fill(255);
circle(this.v.x, this.v.y, this.r);
}
}

function createParticles (amount, radius) {
particles = [];
for (let i=0; i<amount; i++) {
}
}

/* ====== STEP 1 ====== */
function goToStep1 () {
if (particles.length > 10 || particles.length === 0) {
createParticles(10, 10);
}
}
function step1 () {
particles.forEach(p => {
p.update();
p.walls();
p.draw();
});
}

/* ====== STEP 2 ====== */
function goToStep2 () {
if (particles.length > 10) {
createParticles(10, 10);
}
}
function step2 () {
particles.forEach(p => {
p.update();
p.walls();
p.draw();
});

for (let i=0; i<particles.length; i++) {
for (let j=i+1; j<particles.length; j++) {
const p1 = particles[i];
const p2 = particles[j];
stroke(255, 0, 0);
line(p1.v.x, p1.v.y, p2.v.x, p2.v.y);
const distance = floor(p1.v.dist(p2.v));
translate((p2.v.x - p1.v.x) / 2 + p1.v.x, (p2.v.y - p1.v.y) / 2 + p1.v.y);
textAlign(CENTER, CENTER);
let angle = atan2(p2.v.y - p1.v.y, p2.v.x - p1.v.x);
// Flip text if upside down
if (abs(angle) > HALF_PI) {
angle += PI;
}
rotate(angle);
text(floor(distance), 0, 0);
resetMatrix();
}
}
}

/* ====== STEP 3 ====== */
function goToStep3 () {
if (particles.length > 10) {
createParticles(10, 10);
}
}
function step3 () {
particles.forEach(p => {
p.update();
p.walls();
p.draw();
});

for (let i=0; i<particles.length; i++) {
for (let j=i+1; j<particles.length; j++) {
const p1 = particles[i];
const p2 = particles[j];
stroke(255);
const distance = floor(p1.v.dist(p2.v));
if (distance < 250) {
line(p1.v.x, p1.v.y, p2.v.x, p2.v.y);
}
}
}
}

/* ====== STEP 4 ====== */
function goToStep4 () {
if (particles.length > 10) {
createParticles(10, 10);
}
}
function step4 (phase, amplitude) {
particles.forEach(p => {
p.update();
p.walls();
p.draw();
});

for (let i=0; i<particles.length; i++) {
for (let j=i+1; j<particles.length; j++) {
const p1 = particles[i];
const p2 = particles[j];
const distance = floor(p1.v.dist(p2.v));
if (distance < 250) {
stroke(255, map(distance, 0, 250, 255, 0));
line(p1.v.x, p1.v.y, p2.v.x, p2.v.y);
}
}
}
}

/* ====== STEP 5 ====== */
function goToStep5 () {
createParticles(10);
}
function step5 (phase, amplitude) {
particles.forEach(p => {
p.update();
p.walls();
p.draw();
});

for (let i=0; i<particles.length; i++) {
for (let j=i+1; j<particles.length; j++) {
const p1 = particles[i];
const p2 = particles[j];
const distance = floor(p1.v.dist(p2.v));
if (distance < 100) {
stroke(255, map(distance, 0, 100, 255, 0));
line(p1.v.x, p1.v.y, p2.v.x, p2.v.y);
}
}
}
}

/* ====== STEP 6 ====== */
function goToStep6 () {
if (particles.length <= 10) {
createParticles(200);
}
}
function step6 () {
particles.forEach(p => {
p.update();
p.walls();
p.draw();
});

for (let i=0; i<particles.length; i++) {
for (let j=i+1; j<particles.length; j++) {
const p1 = particles[i];
const p2 = particles[j];
const distance = floor(p1.v.dist(p2.v));
if (distance < 100) {
stroke(255, map(distance, 0, 100, 255, 0));
line(p1.v.x, p1.v.y, p2.v.x, p2.v.y);
}
}
}
}

/* ====== STEP 7 ====== */
function goToStep7 () {
if (particles.length <= 200) {
createParticles(300);
}
mouseY = height / 2;
}
function step7 () {
if (particles.length < 250) return;

const mouseAmount = abs((mouseY - height / 2) / (height / 2) * 250) + 49;
particles.forEach((p, i) => {
if (i < mouseAmount) {
p.update();
p.walls();
p.draw();
}
});

const mouseDistance = abs((mouseX - width / 2) / (width / 2) * 300);
for (let i=0; i<mouseAmount; i++) {
for (let j=i+1; j<mouseAmount; j++) {
const p1 = particles[i];
const p2 = particles[j];
const distance = floor(p1.v.dist(p2.v));
if (distance < mouseDistance * 0.5) {
stroke(255, map(distance, 0, mouseDistance * 0.5, 255, 0));
line(p1.v.x, p1.v.y, p2.v.x, p2.v.y);
}
}
}
}

function setup () {
let size = min(windowWidth, windowHeight) * 0.96;
size = floor(size);
mouseX = width / 4;
mouseY = height / 2;
createCanvas(windowWidth, windowHeight);
if (window['goToStep' + step.value]) {
window['goToStep' + step.value]();
}
}
function windowResized () {
let size = min(windowWidth, windowHeight) * 0.96;
size = floor(size);
resizeCanvas(windowWidth, windowHeight);
}

const texts = document.querySelectorAll('section p');
step.oninput = () => {
if (window['goToStep' + step.value]) {
window['goToStep' + step.value]();
}
};

function draw () {
clear();

if (window['step' + step.value]) {
window['step' + step.value]();
}

texts.forEach(text => text.style.display = 'none');
texts[step.value - 1].style.display = 'block';
}
```
```
!
999px
{"ft_lang_label":"__label__en","ft_lang_prob":0.5969092,"math_prob":0.96463615,"size":10276,"snap":"2022-40-2023-06","text_gpt3_token_len":2909,"char_repetition_ratio":0.13259345,"word_repetition_ratio":0.25647348,"special_character_ratio":0.34137797,"punctuation_ratio":0.2514438,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9911302,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2022-09-30T11:01:58Z\",\"WARC-Record-ID\":\"<urn:uuid:d2963e53-c4c5-4cdc-b883-25d4ee73722c>\",\"Content-Length\":\"115665\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:447b89dc-0197-4359-9f7d-5e7f15afa463>\",\"WARC-Concurrent-To\":\"<urn:uuid:05d15625-bfb5-4f2a-b142-a79b147ba4a4>\",\"WARC-IP-Address\":\"104.16.176.44\",\"WARC-Target-URI\":\"https://codepen.io/Mamboleoo/pen/PowKoxe\",\"WARC-Payload-Digest\":\"sha1:IYMWOPCLZFVZM7WJEWCGHPSE7SBCNNAR\",\"WARC-Block-Digest\":\"sha1:FJ6OZFAMUFTGGUNHPDIBS5JVYNQG6UIK\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2022/CC-MAIN-2022-40/CC-MAIN-2022-40_segments_1664030335448.34_warc_CC-MAIN-20220930082656-20220930112656-00780.warc.gz\"}"}