diff --git a/archive/v1/index.html b/archive/v1/index.html index 3aab9ad..a9cae6d 100644 --- a/archive/v1/index.html +++ b/archive/v1/index.html @@ -101,38 +101,36 @@

Projects

- +

Game of Life

 - +

Maze Generator

 - +

Oscilations in 3D

 - +

Poisson Distribution

 - +

Approximating PI

Cardioids

 - +

Constructing an ellipse

 - -

Weather App

- +

Tutorials

- +

Travelling salesman problem

 - +

Midpoint displacement terrain generator

 - +

Convex hull generator

 diff --git a/archive/v2/index.html b/archive/v2/index.html index 436325e..4c101d1 100644 --- a/archive/v2/index.html +++ b/archive/v2/index.html @@ -10,114 +10,128 @@

Havox.org V2

-

About havox 

-

This is havox - havox is a collection of my projects and tutorials that I've written over the years. The tutorials written are more to consolidate my knowledge of whatever I've been working on however if they help even one person, I'll consider that a win.

-

Feel free to check out any of my tutorials or one of my various js projects

-

Why V2?

-

-This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a chronic case of spaghetti code. An update with: neater and better code, updated theming and overall cleaner UI was long overdue. -

-

Why is Havox on umbra.cyou?

-

Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since losing the havox.org domain, I will be using umbra.cyou for the foreseeable future

-

Daily Trump Quote

-

+

About havox 

+

This is havox - havox is a collection of my projects and tutorials that I've written over the years. The + tutorials written are more to consolidate my knowledge of whatever I've been working on however if they help + even one person, I'll consider that a win.

+

Feel free to check out any of my tutorials or one of my various js + projects +

+

Why V2?

+

+ This is the second revision of Havox. After havox's initial conception in late 2017, it has suffered from a + chronic case of spaghetti code. An update with: neater and better code, updated theming and + overall cleaner UI was long overdue. +

+

Why is Havox on umbra.cyou?

+

Havox has domain hopped a fair bit since 2017 (where it used to be hosted on jayomayo.host - lol) however since + losing the havox.org domain, I will be using umbra.cyou for the foreseeable future

+

Daily Trump Quote

+

+ +

-

Tutorials 

-
-

3 Jan 2021

- Summed area tables -

This tutorial looks at intergral images and how they're useful.

-
+

Tutorials 

+
+

3 Jan 2021

+ Summed area tables +

This tutorial looks at intergral images and how they're useful.

+
-
-

3 Feb 2019

- Midpoint displacement terrain generation -

This tutorial looks at generating random and natural looking 2D terrains.

-
-
-

14 Feb 2018

- Convex hull Generator -

This tutorial looks at wrapping algorithms.

-
+
+

3 Feb 2019

+ Midpoint displacement terrain + generation +

This tutorial looks at generating random and natural looking 2D terrains.

+
-
-

22 Sep 2018

- Travelling sales person -

This tutorial looks at different implementations of the TSP problem and how different solutions can be implemented.

-
+
+

14 Feb 2018

+ Convex hull Generator +

This tutorial looks at wrapping algorithms.

+
+ +
+

22 Sep 2018

+ Travelling sales person +

This tutorial looks at different implementations of the TSP problem and how different solutions can be + implemented.

+
-

Projects 

-

Please note a lot of these projects use mouseClicked() functions which don't work with mobile :(

+

Projects 

+

Please note a lot of these projects use mouseClicked() functions which don't work with mobile :(

-
-

1 Oct 2021

- Drawing bezier curves -

An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to place points.

-
+
+

1 Oct 2021

+ Drawing bezier curves +

An interactive animated diagram on drawing quadatric and cubic Bezier curves. Click anywhere on the canvas to + place points.

+
-
-

23 Sept 2021

- 2D Marching Squares -

A demonstration of marching squares, click a tile to edit the terrain.

-
+
+

23 Sept 2021

+ 2D Marching Squares +

A demonstration of marching squares, click a tile to edit the terrain.

+
-
-

11 Apr 2020

- Bubble sort visualiser -

A classic bubble sort visualiser where bars are sorted by height. One frame being one loop.

-
+
+

2 Apr 2020

+ Warping lines illusion +

A visualisation of the Müller-Lyer + illusion shown in js

+
-
-

2 Apr 2020

- Warping lines illusion -

A visualisation of the Müller-Lyer illusion shown in js

-
+
+

27 Feb 2019

+ Fourier Series +

A project showing how a square wave can be made with just sin waves.

+
-
-

27 Feb 2019

- Fourier Series -

A project showing how a square wave can be made with just sin waves.

-
+
+

23 Feb 2019

+ Constructing an ellispse +

A visualisation of how an ellipse can be constructed with a circle and radial lines. inspo

+
-
-

23 Feb 2019

- Constructing an ellispse -

A visualisation of how an ellipse can be constructed with a circle and radial lines. inspo

-
+
+

2 May 2018

+ Game of Life +

A js implementation of the classic Game of Life - John Conway.

+
-
-

2 May 2018

- Game of Life -

A js implementation of the classic Game of Life - John Conway.

-
+
+

18 Mar 2018

+ Calculating PI +

A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.

+
-
-

18 Mar 2018

- Calculating PI -

A simulation that looks at the ratio of randomly placed dots between a square and circle to calulate PI.

-
+
+

17 Dec 2017

+ Oscillations in 3D +

A js implementation of Bees and Bomb's gif.

+
-
-

17 Dec 2017

- Oscillations in 3D -

A js implementation of Bees and Bomb's gif.

-
- -
-

13 Nov 2017

- Maze Generator -

A maze generator built in js.

-
+
+

13 Nov 2017

+ Maze Generator +

A maze generator built in js.

+
-

Credits

-

Thank you to @uixmat for inspiration and some code for this webpage, check out his twitter.

-

Also shoutout to Daniel Shiffman and the P5 team. P5 is used extensively in these tutorials & projects

+

Credits

+

Thank you to @uixmat for inspiration and some code for this webpage, check out his twitter.

+

Also shoutout to Daniel Shiffman and the P5 team. P5 is used extensively in these tutorials & projects

+ diff --git a/archive/v3/projects.html b/archive/v3/projects.html index 40e0dbf..1963dbd 100644 --- a/archive/v3/projects.html +++ b/archive/v3/projects.html @@ -1,195 +1,177 @@ - + Projects - + - - - + + + - + - +
- -
-

Projects

-
+ +
+

Projects

+
- -
- -
- -

Projects

-

- Here are some Projects I've worked on over the years, I do this to - further my understanding of a topic. -

-
- -
-

Sam Storey Music

- -

- I designed this website for the client as a portfolio of his - music and achievements. samstoreymusic.com is also hosted by - myself. + +

+ +
+ +

Projects

+

+ Here are some Projects I've worked on over the years, I do this to + further my understanding of a topic.

-

20th Jun 2023

-
- - -
-

Drawing Bezier Curves

- -

- An interactive animated diagram on drawing quadratic and cubic - Bezier curves. Click anywhere on the canvas to place your - points. -

-

1st Oct 2021

-
- - -
-

2D Marching Squares

- -

- A demonstration of marching squares. Click a tile to edit the - terrain. -

-

23rd Sept 2021

-
- - -
-

Bubble Sort Visualiser

- -

- A classic bubble sort visualiser where bars are sorted by - height. Where two elements are swapped each frame. -

-

11th Apr 2020

-
- - - - - - - - - - - - - - - - - -
-

Fourier Series

- -

- A project showing how a square wave can be constructed by - additive sin waves. -

-

27th Feb 2019

-
- - -
-

Constructing an Ellipse

- -

- A visualisation of how an ellipse can be constructed with a - circle and radial lines. Inspired by Feyman's Lost Lecture. - - - - -

-

23rd Feb 2019

-
- - -
-

Game of Life

- -

- An implementation of the classic cellular automata: Game of - Life in javascript. -

-

2nd May 2018

-
- - -
-

Calculating PI

- -

- A simulation that randomly places dots on the canvas, the - ratio of dots that are placed in the cirlce vs not approximate - PI. -

-

14th March 2018

-
- - -
-

Oscillations in 3D

- -

- An implementation of bees and bomb's - - - - - in p5js. -

-

17th Dec 2017

-
- -
-
-
+
+ +
+

Sam Storey Music

+ +

+ I designed this website for the client as a portfolio of his + music and achievements. samstoreymusic.com is also hosted by + myself. +

+

20th Jun 2023

+
+ + +
+

Drawing Bezier Curves

+ +

+ An interactive animated diagram on drawing quadratic and cubic + Bezier curves. Click anywhere on the canvas to place your + points. +

+

1st Oct 2021

+
+ + +
+

2D Marching Squares

+ +

+ A demonstration of marching squares. Click a tile to edit the + terrain. +

+

23rd Sept 2021

+
+ + + + + + + + + + + + + + + + + +
+

Fourier Series

+ +

+ A project showing how a square wave can be constructed by + additive sin waves. +

+

27th Feb 2019

+
+ + +
+

Constructing an Ellipse

+ +

+ A visualisation of how an ellipse can be constructed with a + circle and radial lines. Inspired by Feyman's Lost Lecture. + + + + +

+

23rd Feb 2019

+
+ + +
+

Game of Life

+ +

+ An implementation of the classic cellular automata: Game of + Life in javascript. +

+

2nd May 2018

+
+ + +
+

Calculating PI

+ +

+ A simulation that randomly places dots on the canvas, the + ratio of dots that are placed in the cirlce vs not approximate + PI. +

+

14th March 2018

+
+ + +
+

Oscillations in 3D

+ +

+ An implementation of bees and bomb's + + + + + in p5js. +

+

17th Dec 2017

+
+ +
+ +
- - + +
@@ -200,6 +182,6 @@ - + - \ No newline at end of file + diff --git a/archive/v3/tutorials.html b/archive/v3/tutorials.html index 59dc603..468e459 100644 --- a/archive/v3/tutorials.html +++ b/archive/v3/tutorials.html @@ -1,113 +1,106 @@ - + Tutorials - + - - - + + + - + - +
- -
-

Tutorials

-
+ +
+

Tutorials

+
- -
- -
- -

Tutorials

-

- Here are some tutorials I've worked on over the years, I do this to - further my understanding of a topic. -

-
- -
-

Summed Area Tables

- -

- This tutorial looks at intergral images and how they're - useful. + +

+ +
+ +

Tutorials

+

+ Here are some tutorials I've worked on over the years, I do this to + further my understanding of a topic.

-

3rd Jan 2021

-
- - -
-

Midpoint Displacement Terrain Generation

- -

- This tutorial looks at generating random and natural looking - 2D terrains. -

-

3rd Feb 2019

-
- - -
-

Convex Hull Generator

- -

- This tutorial looks at wrapping algorithms. -

-

14th Feb 2018

-
- - -
-

Travelling Sales Person

- -

- This tutorial looks at different implementations of the TSP - problem and how different solutions can be implemented. -

-

22nd Sept 2018

-
- -
-
-
+
+ +
+

Summed Area Tables

+ +

+ This tutorial looks at intergral images and how they're + useful. +

+

3rd Jan 2021

+
+ + +
+

Midpoint Displacement Terrain Generation

+ +

+ This tutorial looks at generating random and natural looking + 2D terrains. +

+

3rd Feb 2019

+
+ + +
+

Convex Hull Generator

+ +

+ This tutorial looks at wrapping algorithms. +

+

14th Feb 2018

+
+ + +
+

Travelling Sales Person

+ +

+ This tutorial looks at different implementations of the TSP + problem and how different solutions can be implemented. +

+

22nd Sept 2018

+
+ +
+ +
- - + + @@ -118,6 +111,6 @@ - + - \ No newline at end of file + diff --git a/index.html b/index.html index 90578e0..ac39aea 100644 --- a/index.html +++ b/index.html @@ -217,14 +217,12 @@

projects

Things I built

- Mostly p5.js — visualising algorithms in ways that look more interesting than they have any right to. Most - use mouseClicked() - so desktop only, sorry mobile. + Recent projects & things I found interesting. I have gone to painstaking lengths to not edit my older + projects... we all start somewhere.

- + 1 Oct 2021 Drawing Bézier curves Interactive animated diagram for quadratic and cubic Bézier curves. Click to @@ -237,7 +235,7 @@ Marching squares in action — click a tile to edit the terrain. → - + 2 Apr 2020 Müller-Lyer illusion A visualisation of the Müller-Lyer optical illusion rendered in JS. diff --git a/projects/cubic_bezier_curve/cLine.js b/projects/cubic_bezier_curve/cLine.js new file mode 100644 index 0000000..9d06ca9 --- /dev/null +++ b/projects/cubic_bezier_curve/cLine.js @@ -0,0 +1,13 @@ +class cLine { + constructor(a, b, col = color(180, 180, 180, 140), w = 2) { + this.a = a; + this.b = b; + this.col = col; + this.w = w; + } + drawLine() { + stroke(this.col); + strokeWeight(this.w); + line(this.a.x, this.a.y, this.b.x, this.b.y); + } +} diff --git a/projects/cubic_bezier_curve/cPoint.js b/projects/cubic_bezier_curve/cPoint.js new file mode 100644 index 0000000..2f775fd --- /dev/null +++ b/projects/cubic_bezier_curve/cPoint.js @@ -0,0 +1,44 @@ +class cPoint { + constructor(x, y, kind = 'control') { + this.x = x; + this.y = y; + this.kind = kind; + this.r = 9; + } + set changeX(nx) { this.x = nx; } + set changeY(ny) { this.y = ny; } + get changeX() { return this.x; } + get changeY() { return this.y; } + + isHit(mx, my, r = HIT_R) { + return dist(mx, my, this.x, this.y) <= r; + } + + drawPoint(hovered = false, selected = false, styleOverride = null) { + strokeWeight(2); + if (styleOverride) { + stroke(...styleOverride.stroke); + fill(...styleOverride.fill); + } else { + if (this.kind === 'end') { + stroke(0, 220, 90, 240); + fill(40, 240, 120, 200); + } else if (this.kind === 'control') { + stroke(240, 140, 0, 240); + fill(255, 180, 40, 200); + } else { + stroke(140, 160); + fill(190, 160); + } + } + + if (selected) { + stroke(255, 255, 0); + strokeWeight(3); + } else if (hovered) { + stroke(255); + } + + circle(this.x, this.y, this.r * 2); + } +} diff --git a/projects/drawing_curves/index.html b/projects/cubic_bezier_curve/index.html similarity index 61% rename from projects/drawing_curves/index.html rename to projects/cubic_bezier_curve/index.html index 12a05dd..5845d78 100644 --- a/projects/drawing_curves/index.html +++ b/projects/cubic_bezier_curve/index.html @@ -1,14 +1,15 @@ - + + - - - - - - + + + + + + diff --git a/projects/cubic_bezier_curve/sketch.js b/projects/cubic_bezier_curve/sketch.js new file mode 100644 index 0000000..2bdf6b4 --- /dev/null +++ b/projects/cubic_bezier_curve/sketch.js @@ -0,0 +1,239 @@ +let p = [], v = []; +let lines = []; +let theta = (3 / 2) * Math.PI, t = 0; +let paused = false; +let showLabels = false; +let showInterPoints = true; + +let hoverIndex = -1; +let selectedIndex = -1; +let prevMouse = { x: 0, y: 0 }; +let draggingAll = false; +const HIT_R = 10; +const MAX_TRAIL = 1000; + +function setup() { + createCanvas(1000, 800); + initCubicCurve(true); +} + +function draw() { + background(32); + + stroke(120, 120, 120, 180); + strokeWeight(2); + noFill(); + beginShape(); + vertex(p[0].x, p[0].y); + vertex(p[1].x, p[1].y); + vertex(p[2].x, p[2].y); + vertex(p[3].x, p[3].y); + endShape(); + + if (!paused) { + if (theta > TWO_PI) theta = 0; + theta += 0.01; + t = (sin(theta) + 1) / 2; // 0..1 + } + + lerpCubicCurve(); + + for (let i = 0; i < lines.length; i++) { + lines[i].drawLine(); + } + + drawCurve(); + drawPointsAndLabels(); + drawHUD(); +} + +function drawCurve() { + if (v.length > MAX_TRAIL) v.splice(0, v.length - MAX_TRAIL); + + stroke(0, 255, 0, 200); + strokeWeight(5); + noFill(); + beginShape(); + for (let i = 0; i < v.length; i++) { + vertex(v[i].x, v[i].y); + } + endShape(); +} + +function drawPointsAndLabels() { + push(); + noStroke(); + fill(255, 70, 70, 230); + circle(p[9].x, p[9].y, 14); + pop(); + + for (let i = 0; i < 4; i++) { + const hovered = (i === hoverIndex); + const selected = (i === selectedIndex); + p[i].drawPoint(hovered, selected); + if (showLabels) { + noStroke(); + fill(255); + textSize(14); + textAlign(LEFT, BOTTOM); + text(`P${i}`, p[i].x + 10, p[i].y - 10); + } + } + + if (showLabels) { + noStroke(); fill(220); + textSize(12); textAlign(LEFT, BOTTOM); + text(`P4`, p[4].x + 8, p[4].y - 8); + } + + if (showInterPoints) { + const styleMid = { + stroke: [80, 180, 255, 100], + fill: [80, 180, 255, 50] + }; + for (let i = 4; i <= 8; i++) { + p[i].drawPoint(false, false, styleMid); + if (showLabels) { + noStroke(); fill(200); + textSize(12); textAlign(LEFT, BOTTOM); + text(`P${i}`, p[i].x + 8, p[i].y - 8); + } + } + } +} + +function drawHUD() { + noStroke(); + fill(255); + textSize(14); + textAlign(LEFT, TOP); + const hud = [ + `t = ${t.toFixed(3)}`, + `Space = ${paused ? 'Resume' : 'Pause'}`, + `H = Toggle points 5..8 | L = Toggle labels | R = Reset`, + `Drag a handle (P0..P3). Hold Shift to move the entire curve.` + ]; + for (let i = 0; i < hud.length; i++) { + text(hud[i], 12, 12 + i * 18); + } +} + +function initCubicCurve(resetPositions = true) { + p.length = 0; + v.length = 0; + lines.length = 0; + theta = (3 / 2) * Math.PI; + t = 0; + + if (resetPositions) { + p[0] = new cPoint(width * 0.15, height * 0.75, 'end'); + p[1] = new cPoint(width * 0.35, height * 0.20, 'control'); + p[2] = new cPoint(width * 0.65, height * 0.20, 'control'); + p[3] = new cPoint(width * 0.85, height * 0.75, 'end'); + } else { + for (let i = 0; i < 4; i++) { + if (!p[i]) p[i] = new cPoint(width * (0.15 + i * 0.2), height / 2, i === 0 || i === 3 ? 'end' : 'control'); + } + } + + // Derived points + p[4] = new cPoint(0, 0, 'derived'); + p[5] = new cPoint(0, 0, 'derived'); + p[6] = new cPoint(0, 0, 'derived'); + p[7] = new cPoint(0, 0, 'derived'); + p[8] = new cPoint(0, 0, 'derived'); + p[9] = new cPoint(0, 0, 'derived'); + + lines[0] = new cLine(p[4], p[5], color(160, 160, 160, 200), 2); + lines[1] = new cLine(p[5], p[6], color(160, 160, 160, 200), 2); + + lines[2] = new cLine(p[7], p[8], color(200, 200, 200, 220), 3); +} + +function lerpCubicCurve() { + // Level 1 + 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; + + // Level 2 + 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; + + // Final on-curve + 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, 'derived')); +} + +function mouseMoved() { + hoverIndex = -1; + for (let i = 0; i < 4; i++) { + if (p[i].isHit(mouseX, mouseY)) { + hoverIndex = i; + break; + } + } +} + +function mousePressed() { + prevMouse.x = mouseX; + prevMouse.y = mouseY; + + selectedIndex = -1; + for (let i = 0; i < 4; i++) { + if (p[i].isHit(mouseX, mouseY)) { + selectedIndex = i; + break; + } + } + + draggingAll = keyIsDown(SHIFT) && selectedIndex === -1; +} + +function mouseDragged() { + const dx = mouseX - prevMouse.x; + const dy = mouseY - prevMouse.y; + + if (selectedIndex >= 0) { + p[selectedIndex].changeX = mouseX; + p[selectedIndex].changeY = mouseY; + v.length = 0; + } else if (draggingAll) { + for (let i = 0; i < 4; i++) { + p[i].changeX = p[i].x + dx; + p[i].changeY = p[i].y + dy; + } + v.length = 0; + } + + prevMouse.x = mouseX; + prevMouse.y = mouseY; + return false; +} + +function mouseReleased() { + selectedIndex = -1; + draggingAll = false; +} + +function keyPressed() { + if (key === ' ') { + paused = !paused; + } else if (key === 'R' || key === 'r') { + initCubicCurve(true); + } else if (key === 'H' || key === 'h') { + showInterPoints = !showInterPoints; + } else if (key === 'L' || key === 'l') { + showLabels = !showLabels; + } +} diff --git a/projects/drawing_curves/cLine.js b/projects/drawing_curves/cLine.js deleted file mode 100644 index 58faa31..0000000 --- a/projects/drawing_curves/cLine.js +++ /dev/null @@ -1,13 +0,0 @@ -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); - } -} diff --git a/projects/drawing_curves/cPoint.js b/projects/drawing_curves/cPoint.js deleted file mode 100644 index 5c7b041..0000000 --- a/projects/drawing_curves/cPoint.js +++ /dev/null @@ -1,14 +0,0 @@ -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;} -} diff --git a/projects/drawing_curves/cubicCurve.js b/projects/drawing_curves/cubicCurve.js deleted file mode 100644 index ad5da8e..0000000 --- a/projects/drawing_curves/cubicCurve.js +++ /dev/null @@ -1,111 +0,0 @@ -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; -} diff --git a/projects/drawing_curves/quadCurve.js b/projects/drawing_curves/quadCurve.js deleted file mode 100644 index 39f0acf..0000000 --- a/projects/drawing_curves/quadCurve.js +++ /dev/null @@ -1,84 +0,0 @@ -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; -} diff --git a/projects/drawing_curves/vectorForm.js b/projects/drawing_curves/vectorForm.js deleted file mode 100644 index f3030a6..0000000 --- a/projects/drawing_curves/vectorForm.js +++ /dev/null @@ -1,37 +0,0 @@ -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); -} diff --git a/projects/marching_squares.html b/projects/marching_squares.html index 1862d6d..c05c7b6 100755 --- a/projects/marching_squares.html +++ b/projects/marching_squares.html @@ -1,9 +1,59 @@ - + + - + + + + + + + +
+

Marching Squares Field Visualizer

+

+ This sketch uses the Marching Squares algorithm to generate and display contour boundaries + on a grid. Each cell is either active or inactive, the algorithm determines the correct line or triangle to + draw based on the surrounding corners. +

+

+ Left-click toggles a cell between the two states. +

+

+ Right‑click shows or hides the contour lines produced by the algorithm. +

+
+ + diff --git a/projects/poissonDist.php b/projects/poissonDist.php deleted file mode 100644 index fc08570..0000000 --- a/projects/poissonDist.php +++ /dev/null @@ -1,110 +0,0 @@ - - - - - - - diff --git a/projects/poisson_distribution.html b/projects/poisson_distribution.html new file mode 100644 index 0000000..9eeefa2 --- /dev/null +++ b/projects/poisson_distribution.html @@ -0,0 +1,104 @@ + + + + + + diff --git a/projects/sorting_vis.html b/projects/sorting_vis.html deleted file mode 100755 index 6fef429..0000000 --- a/projects/sorting_vis.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/projects/warp_lines.html b/projects/warp_lines.html deleted file mode 100755 index 7b6a3f2..0000000 --- a/projects/warp_lines.html +++ /dev/null @@ -1,133 +0,0 @@ - - - - - - - - - - -
- -
- - - - - diff --git a/projects/warping_lines.html b/projects/warping_lines.html new file mode 100755 index 0000000..3336e96 --- /dev/null +++ b/projects/warping_lines.html @@ -0,0 +1,166 @@ + + + + + + + + + + + + +
+

Oscillating Arrow Field Visualizer

+

+ A sketch to hopefully demonstrate the illusion of the Müller-Lyer Illusion +

+

The lines - that are the same length, should look longer and shorter based on the angle of the arrow heads. +

+

+ Increasing the value adds more horizontal slices, creating a denser and more detailed pattern. + Tap or click to pause and resume the motion. +

+
+
+ +
+ + + + +