XiaohanYa/Pin_Mode.js

## Pin_Mode.js
var points = [];
var RESOLUTION = 50;
var rows, cols;

var linePoints = [];

function setup() {
  createCanvas(500, 600);
  background(0);

  rows = floor(width / RESOLUTION);
  cols = floor(height / RESOLUTION);

  for (var c = 0; c <= cols; c++) {
    for (var r = 0; r <= rows; r++) {

      //var index = r + c * rows; // *** x + y * width
      var x = r * RESOLUTION;
      var y = c * RESOLUTION;

      points.push(new Point(x, y));

    }
  }
}

function draw() {
  background(0, 10);
  // lines
  // this can be improved with Vertex Shape!
  noFill();
  stroke(255);
  for (var i = 0; i < linePoints.length - 1; i++) {
    line(linePoints[i].pos.x, linePoints[i].pos.y,
      linePoints[i + 1].pos.x, linePoints[i + 1].pos.y);
  }

  // Pins
  for (var i = 0; i < points.length; i++) {
    points[i].display();
    var v = points[i].select(mouseX, mouseY);
    if (v != 0) {
      linePoints.push(new LinePoint(v));
    }
  }
}


////
"use strict";

class LinePoint {
  constructor(vector) {
    this.pos = vector;
  }
}

"use strict"

class Point {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector();
    this.acc = createVector();
    this.size = 5;
    this.color = color(255);
    this.selected = false;
  }
  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    stroke(this.color);
    strokeWeight(this.size);
    point(0, 0);
    pop();
  }
  select(x, y) {
    var distance = dist(this.pos.x, this.pos.y, x, y);
    if (distance < this.size + 10) {
      this.size = 10;
      this.color = color(255, 0, 0);
      if (mouseIsPressed && this.selected == false) {
        //this.color = color(255, 255, 0);
        //print("Point Selected");
        this.selected = true;
        return this.pos;
      }
    } else {
      this.size = 5;
      this.color = color(255);
    }
    return 0;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Final_ThreadMode3_5.5_02</title>
  <script src="libraries/p5.js" type="text/javascript"></script>

  <script src="libraries/p5.dom.js" type="text/javascript"></script>
  <script src="libraries/p5.sound.js" type="text/javascript"></script>

  <script src="sketch.js" type="text/javascript"></script>
  <script src="Point.js" type="text/javascript"></script>
  <script src="LinePoint.js" type="text/javascript"></script>

  <style>
    body {
      padding: 0;
      margin: 0;
    }
	var points = [];
	var RESOLUTION = 50;
	var rows, cols;

	var linePoints = [];

	function setup() {
	createCanvas(500, 600);
	background(0);

	rows = floor(width / RESOLUTION);
	cols = floor(height / RESOLUTION);

	for (var c = 0; c <= cols; c++) {
	for (var r = 0; r <= rows; r++) {

	//var index = r + c * rows; // *** x + y * width
	var x = r * RESOLUTION;
	var y = c * RESOLUTION;

	points.push(new Point(x, y));

	}
	}
	}

	function draw() {
	background(0, 10);
	// lines
	// this can be improved with Vertex Shape!
	noFill();
	stroke(255);
	for (var i = 0; i < linePoints.length - 1; i++) {
	line(linePoints[i].pos.x, linePoints[i].pos.y,
	linePoints[i + 1].pos.x, linePoints[i + 1].pos.y);
	}

	// Pins
	for (var i = 0; i < points.length; i++) {
	points[i].display();
	var v = points[i].select(mouseX, mouseY);
	if (v != 0) {
	linePoints.push(new LinePoint(v));
	}
	}
	}




	////
	"use strict";

	class LinePoint {
	constructor(vector) {
	this.pos = vector;
	}
	}

	"use strict"

	class Point {
	constructor(x, y) {
	this.pos = createVector(x, y);
	this.vel = createVector();
	this.acc = createVector();
	this.size = 5;
	this.color = color(255);
	this.selected = false;
	}
	update() {
	this.vel.add(this.acc);
	this.pos.add(this.vel);
	this.acc.mult(0);
	}
	display() {
	push();
	translate(this.pos.x, this.pos.y);
	stroke(this.color);
	strokeWeight(this.size);
	point(0, 0);
	pop();
	}
	select(x, y) {
	var distance = dist(this.pos.x, this.pos.y, x, y);
	if (distance < this.size + 10) {
	this.size = 10;
	this.color = color(255, 0, 0);
	if (mouseIsPressed && this.selected == false) {
	//this.color = color(255, 255, 0);
	//print("Point Selected");
	this.selected = true;
	return this.pos;
	}
	} else {
	this.size = 5;
	this.color = color(255);
	}
	return 0;
	}
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Final_ThreadMode3_5.5_02</title>
	<script src="libraries/p5.js" type="text/javascript"></script>

	<script src="libraries/p5.dom.js" type="text/javascript"></script>
	<script src="libraries/p5.sound.js" type="text/javascript"></script>

	<script src="sketch.js" type="text/javascript"></script>
	<script src="Point.js" type="text/javascript"></script>
	<script src="LinePoint.js" type="text/javascript"></script>

	<style>
	body {
	padding: 0;
	margin: 0;
	}