jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add projects and tutorials

Browse Source
This commit is contained in:
John Gatward
2026-03-16 18:03:17 +00:00
parent fc54c3bd4e
commit 4e94902f01
132 changed files with 19170 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
projects/drawing_curves/cLine.js Normal file
View File

@@ -0,0 +1,13 @@
class cLine{
constructor(p1, p2){
this.p1 = p1;
this.p2 = p2;
}
drawLine(){
stroke(255, 50);
strokeWeight(3);
line(this.p1.x, this.p1.y, this.p2.x, this.p2.y);
}
}

14
projects/drawing_curves/cPoint.js Normal file
View File

@@ -0,0 +1,14 @@
class cPoint{
constructor(x,y) {this.x = x; this.y=y;}
drawPoint(){
strokeWeight(14);
stroke(255, 200);
point(this.x, this.y);
}
get getX(){return this.x;}
get getY(){return this.y;}
set changeX(_x){this.x = _x;}
set changeY(_y){this.y = _y;}
}

111
projects/drawing_curves/cubicCurve.js Normal file
View File

@@ -0,0 +1,111 @@
let p = [], v=[];
let lines = [];
let theta=3/2 * Math.PI, t=0, clicks=0;
function setup(){
createCanvas(1000, 800);
initCubicCurve();
}
function draw(){
background(63);
for(let i = 0; i < p.length; i++){
p[i].drawPoint();
}
if(clicks > 3){
for(let i = 0; i < lines.length; i++){
lines[i].drawLine();
}
lerpCubicCurve();
drawCurve();
}
}
function drawCurve(){
if (v.length > 100*Math.PI){v=[];}
stroke(0, 255, 0, 200);
strokeWeight(5);
beginShape(LINES);
for (let i=0; i < v.length; i++){
vertex(v[i].x, v[i].y);
}
endShape();
}
function mouseClicked(){
if (clicks < 5) {
p[clicks].changeX = mouseX;
p[clicks].changeY = mouseY;
} else {
let c = clicks % 4;
p[c].changeX = mouseX;
p[c].changeY = mouseY;
}
v=[];
clicks ++;
t=0;
theta=3/2 * Math.PI;
}
function mouseDragged(){
p[0].changeX = mouseX;
p[0].changeY = mouseY;
return false;
}
function initCubicCurve(){
p[0] = new cPoint(0,0);
p[1] = new cPoint(0,0);
p[2] = new cPoint(0,0);
p[3] = new cPoint(0,0);
p[4] = new cPoint(0, 0);
p[5] = new cPoint(0, 0);
p[6] = new cPoint(0, 0);
p[7] = new cPoint(0, 0);
p[8] = new cPoint(0, 0);
p[9] = new cPoint(0, 0);
lines[0] = new cLine(p[0], p[1]);
lines[1] = new cLine(p[1], p[2]);
lines[2] = new cLine(p[2], p[3]);
lines[3] = new cLine(p[4], p[5]);
lines[4] = new cLine(p[5], p[6]);
lines[5] = new cLine(p[7], p[8]);
}
function lerpCubicCurve(){
p[4].changeX = (1-t)*p[0].x + t * p[1].x;
p[4].changeY = (1-t)*p[0].y + t * p[1].y;
p[5].changeX = (1-t)*p[1].x + t * p[2].x;
p[5].changeY = (1-t)*p[1].y + t * p[2].y;
p[6].changeX = (1-t)*p[2].x + t * p[3].x;
p[6].changeY = (1-t)*p[2].y + t * p[3].y;
p[7].changeX = (1-t)*p[4].x + t * p[5].x;
p[7].changeY = (1-t)*p[4].y + t * p[5].y;
p[8].changeX = (1-t)*p[5].x + t * p[6].x;
p[8].changeY = (1-t)*p[5].y + t * p[6].y;
p[9].changeX = (1-t)*p[7].x + t * p[8].x;
p[9].changeY = (1-t)*p[7].y + t * p[8].y;
v.push(new cPoint(p[9].x, p[9].y));
if (theta > 2*Math.PI){theta=0;}
theta += 0.01;
t = (Math.sin(theta) + 1) / 2;
}

14
projects/drawing_curves/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
<script src="cPoint.js"></script>
<script src="cLine.js"></script>
<!-- <script src="quadCurve.js"></script> -->
<script src="cubicCurve.js"></script>
<!-- <script src="vectorForm.js"></script> -->
</head>
<body>
</body>
</html>

84
projects/drawing_curves/quadCurve.js Normal file
View File

@@ -0,0 +1,84 @@
let p = [], v=[];
let lines = [];
let theta=3/2 * Math.PI, t=0, clicks=0;
function setup(){
createCanvas(1000, 800);
initQuadCurve();
}
function draw(){
background(63);
for(let i = 0; i < p.length; i++){
p[i].drawPoint();
}
if(clicks > 2){
for(let i = 0; i < lines.length; i++){
lines[i].drawLine();
}
lerpQuadCurve();
drawCurve();
}
}
function drawCurve(){
if (v.length > 100*Math.PI){v=[];}
stroke(0, 255, 0, 200);
strokeWeight(5);
beginShape(LINES);
for (let i=0; i < v.length; i++){
vertex(v[i].x, v[i].y);
}
endShape();
}
function mouseClicked(){
if (clicks < 3){
p[clicks].changeX = mouseX;
p[clicks].changeY = mouseY;
} else {
let c = clicks % 3;
p[c].changeX = mouseX;
p[c].changeY = mouseY;
}
v=[];
clicks ++;
t=0;
theta=3/2 * Math.PI;
}
function initQuadCurve(){
p[0] = new cPoint(0,0);
p[1] = new cPoint(0,0);
p[2] = new cPoint(0,0);
p[3] = new cPoint(0, 0);
p[4] = new cPoint(0, 0);
p[5] = new cPoint(p[0].x, p[0].y);
lines[0] = new cLine(p[0], p[1]);
lines[1] = new cLine(p[1], p[2]);
lines[2] = new cLine(p[3], p[4]);
}
function lerpQuadCurve(){
p[3].changeX = (1-t)*p[0].x + t * p[1].x;
p[3].changeY = (1-t)*p[0].y + t * p[1].y;
p[4].changeX = (1-t)*p[1].x + t * p[2].x;
p[4].changeY = (1-t)*p[1].y + t * p[2].y;
p[5].changeX = (1-t)*p[3].x + t * p[4].x;
p[5].changeY = (1-t)*p[3].y + t * p[4].y;
v.push(new cPoint(p[5].x, p[5].y));
if (theta > 2*Math.PI){theta=0;}
theta += 0.01;
t = (Math.sin(theta) + 1) / 2;
}

37
projects/drawing_curves/vectorForm.js Normal file
View File

@@ -0,0 +1,37 @@
let t=0, theta=0;
let t1,t2,t3,t4;
function setup(){
createCanvas(1000, 1000);
}
function draw(){
background(15,26,38);
theta += 0.01;
t = (Math.sin(theta)+1)/2;
t1 = (-t)^3 + 3*t^2 - 3*t + 1;
strokeWeight(5);
textSize(40);
noFill();
stroke(217, 16, 75);
rect(50, 175, 750, 50);
text('1.00', 850, 215);
fill(217, 16, 75);
rect(50, 175, t1*325, 50);
noFill();
stroke(51, 185, 255);
rect(50, 375, 750, 50);
text('1.00', 850, 415);
stroke(16, 255, 171);
rect(50, 575, 750, 50);
text('1.00', 850, 615);
stroke(221, 192, 76);
rect(50, 775, 750, 50);
text('1.00', 850, 815);
}