AnweshGangula/Prime Numbers - Visualization.md

## index.html
<!DOCTYPE html><html lang="en"><head>
  <script src="p5.js"></script>
  <script src="p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">

</head>

<body>
  <script src="prime.js"></script>
  <script src="particle.js"></script>
  <script src="sketch_rotated.js"></script>
  <div>
    <h1>Change Path when n is Prime</h1>
  <p>Inspired from the following Reddit post showcasing <a href="https://www.reddit.com/r/dataisbeautiful/comments/jfinu9/oc_prime_numbers_over_20_million_prime_numbers/">20 million Prime number graph</a></p><p></p></div>
  <p> And the <a href="https://www.youtube.com/watch?v=vqE8DMfOajk">Object Trails video</a> from The Coding Train (Daniel Shiffman)</p>


</body></html>

## particle.js
// https://github.com/CodingTrain/website/tree/main/Tutorials/P5JS/p5.js/09/9.07_p5.js_Drawing_Object_Trails
// https://www.youtube.com/watch?v=vqE8DMfOajk

function Particle(x, y) {
  this.x = x;
  this.y = y;

  this.history = [createVector(this.x, this.y)];

  this.update = function(a, b) {
    this.x += a;
    this.y += b;

    var v = createVector(this.x, this.y);
    this.history.push(v);
    // if (this.history.length > 100) {
    //   this.history.splice(0, 1);
    // }
    // print(this.x, this.y);
  };

  this.show = function() {
    stroke(50);
    fill(0, 50);
    ellipse(this.x, this.y, 20, 20);

    noFill();
    beginShape();
    for (var i = 0; i < this.history.length; i++) {
      var pos = this.history[i];
      //fill(random(255));
      //ellipse(pos.x, pos.y, i, i);
      vertex(pos.x, pos.y);
    }
    endShape();
  };

}

## Prime Numbers - Visualization.md

      
    Raw
  

              Prime Numbers - Visualization.md
            
          
    Source Code for Prime Numbers Visualization

https://editor.p5js.org/AnweshGangula/sketches/QZR9s66j4


## prime.js
function isPrime(n) {
    // Corner case
    if (n <= 1)  return false;

    // Check from 2 to n-1
    for (i=2; i<n; i++)
        if (n%i == 0)
            return false;

    return true;
}

## sketch.js
var particles = [];

function setup() {
  createCanvas(1500, 800);
  background(200);
  particle = new Particle(width - 100, height - 100);
  // frameRate(10);
  noLoop();
}

a = 1;
b = 1;
j = 2;
k = 0;

function draw() {
  // scale(2);
  // for (j = 1; j < 200; j++) {

  if (isPrime(j)) {
    [a, b] = [1 * b, -1 * a];
  }
  Curr_X = particle.x;
  Curr_Y = particle.y;
  background(200);
  particle.update((a * (j - k)) * 5, (b * (j - k)) * 5);
  particle.show();

  k = j
  // noLoop();
  j++;
  scale(1);
  // line(frameCount, 0, frameCount, height);
  fill(0, 0, 0);
  textSize(25);
  text("Current Number (n):  " + j, 10, 30);
  textSize(15);
  text("Click anywhere and hold to start", 10, 60);


  // }
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

## sketch_rotated.js
function setup() {
  createCanvas(1000, 800);
  background(200);
  particle = new Particle(0, 0);
  // frameRate(10);
  noLoop();
}

a = 1;
b = 1;
j = 2;
k = 0;

function draw() {
  translate(width - 100, height / 2)
  rotate(-PI / 4);
  // scale(2);
  // for (j = 1; j < 200; j++) {

  if (isPrime(j)) {
    [a, b] = [1 * b, -1 * a];
  }
  Curr_X = particle.x;
  Curr_Y = particle.y;
  background(200);
  particle.update((a * (j - k)) * 5, (b * (j - k)) * 5);
  particle.show();

  k = j
  // noLoop();
  j++;
  rotate(PI / 4);
  translate(-width + 100, -height / 2 )

  scale(1);
  // line(frameCount, 0, frameCount, height);
  fill(0, 0, 0);
  textSize(25);
  text("Current Number (n):  " + j, 10, 30);
  textSize(15);
  text("Click anywhere and hold to start", 10, 60);

  // }
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

## style.css
html, body {
  display: grid;
  margin: auto;
  padding: 0;
}
h1{
    text-align: center;
}
canvas {
  display: block;
}

p{
  margin-top:0;
}
	<!DOCTYPE html><html lang="en"><head>
	<script src="p5.js"></script>
	<script src="p5.sound.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">

	</head>

	<body>
	<script src="prime.js"></script>
	<script src="particle.js"></script>
	<script src="sketch_rotated.js"></script>
	<div>
	<h1>Change Path when n is Prime</h1>
	<p>Inspired from the following Reddit post showcasing <a href="https://www.reddit.com/r/dataisbeautiful/comments/jfinu9/oc_prime_numbers_over_20_million_prime_numbers/">20 million Prime number graph</a></p><p></p></div>
	<p> And the <a href="https://www.youtube.com/watch?v=vqE8DMfOajk">Object Trails video</a> from The Coding Train (Daniel Shiffman)</p>


	</body></html>
	// https://github.com/CodingTrain/website/tree/main/Tutorials/P5JS/p5.js/09/9.07_p5.js_Drawing_Object_Trails
	// https://www.youtube.com/watch?v=vqE8DMfOajk

	function Particle(x, y) {
	this.x = x;
	this.y = y;

	this.history = [createVector(this.x, this.y)];

	this.update = function(a, b) {
	this.x += a;
	this.y += b;

	var v = createVector(this.x, this.y);
	this.history.push(v);
	// if (this.history.length > 100) {
	// this.history.splice(0, 1);
	// }
	// print(this.x, this.y);
	};

	this.show = function() {
	stroke(50);
	fill(0, 50);
	ellipse(this.x, this.y, 20, 20);

	noFill();
	beginShape();
	for (var i = 0; i < this.history.length; i++) {
	var pos = this.history[i];
	//fill(random(255));
	//ellipse(pos.x, pos.y, i, i);
	vertex(pos.x, pos.y);
	}
	endShape();
	};

	}
	function isPrime(n) {
	// Corner case
	if (n <= 1) return false;

	// Check from 2 to n-1
	for (i=2; i<n; i++)
	if (n%i == 0)
	return false;

	return true;
	}
	var particles = [];

	function setup() {
	createCanvas(1500, 800);
	background(200);
	particle = new Particle(width - 100, height - 100);
	// frameRate(10);
	noLoop();
	}

	a = 1;
	b = 1;
	j = 2;
	k = 0;

	function draw() {
	// scale(2);
	// for (j = 1; j < 200; j++) {

	if (isPrime(j)) {
	[a, b] = [1 * b, -1 * a];
	}
	Curr_X = particle.x;
	Curr_Y = particle.y;
	background(200);
	particle.update((a * (j - k)) * 5, (b * (j - k)) * 5);
	particle.show();

	k = j
	// noLoop();
	j++;
	scale(1);
	// line(frameCount, 0, frameCount, height);
	fill(0, 0, 0);
	textSize(25);
	text("Current Number (n): " + j, 10, 30);
	textSize(15);
	text("Click anywhere and hold to start", 10, 60);


	// }
	}

	function mousePressed() {
	loop();
	}

	function mouseReleased() {
	noLoop();
	}
	function setup() {
	createCanvas(1000, 800);
	background(200);
	particle = new Particle(0, 0);
	// frameRate(10);
	noLoop();
	}

	a = 1;
	b = 1;
	j = 2;
	k = 0;

	function draw() {
	translate(width - 100, height / 2)
	rotate(-PI / 4);
	// scale(2);
	// for (j = 1; j < 200; j++) {

	if (isPrime(j)) {
	[a, b] = [1 * b, -1 * a];
	}
	Curr_X = particle.x;
	Curr_Y = particle.y;
	background(200);
	particle.update((a * (j - k)) * 5, (b * (j - k)) * 5);
	particle.show();

	k = j
	// noLoop();
	j++;
	rotate(PI / 4);
	translate(-width + 100, -height / 2 )

	scale(1);
	// line(frameCount, 0, frameCount, height);
	fill(0, 0, 0);
	textSize(25);
	text("Current Number (n): " + j, 10, 30);
	textSize(15);
	text("Click anywhere and hold to start", 10, 60);

	// }
	}

	function mousePressed() {
	loop();
	}

	function mouseReleased() {
	noLoop();
	}
	html, body {
	display: grid;
	margin: auto;
	padding: 0;
	}
	h1{
	text-align: center;
	}
	canvas {
	display: block;
	}

	p{
	margin-top:0;
	}