[go: up one dir, main page]
Skip to content

Commit

Permalink
updating content
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmccreary
dmccreary committed Oct 6, 2024
1 parent 23e1c0d commit fa041fc
Show file tree
Hide file tree
Showing 9 changed files with 386 additions and 2 deletions.
24 changes: 24 additions & 0 deletions docs/sims/animated-wire/animated-wire.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Wire Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Put your script file name here -->
<script src="./animated-wire.js"></script>
</head>
<body>
<!-- Put the following lines in your setup() function
const canvas = createCanvas(400, 400);
var mainElement = document.querySelector('main');
canvas.parent(mainElement);
-->
<main></main>
<a href="./">Back to Lesson Plan</a>
</body>
</html>
106 changes: 106 additions & 0 deletions docs/sims/animated-wire/animated-wire.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
let canvasWidth = 500;
let canvasHeight = 500;

// the top region for drawing animations
let plotAreaWidth = canvasWidth;
let plotAreaHeight = 400;
let plotAreaMargin = 50;

// the lower region for placing controls like sliders
let controlAreaWidth = canvasWidth;
let controlHeight = 100;

let state = false;
let button;
let speedSlider;
// margin for the wire
let wireMargin = 50;
let lineWidth = 10;

function setup() {
createCanvas(canvasWidth, canvasHeight); // Set the canvas size
frameRate(30);
textSize(16);

// Create the slider that controls the speed of the current dots
speedSlider = createSlider(0.02, .5, .25, 0.03);
speedSlider.position(120, plotAreaHeight+20);
speedSlider.size(200);

// Create the slider that controls the spacing of the current dots
spacingSlider = createSlider(0.15, 1.5, 1, 0.05);
spacingSlider.position(120, plotAreaHeight+50);
spacingSlider.size(200);

// Create the on/off button
button = createButton('ON/OFF');
button.position(350, plotAreaHeight+20);
button.mousePressed(toggleState);
}

function draw() {
// draw the background for the plot area in very light blue color
noStroke();
fill("aliceblue"); // DodgerBlue background
rect(0,0,canvasWidth, plotAreaHeight)

// Draw the background in a light tan color
fill('cornsilk')
stroke(1);
strokeWeight(1);
rect(0,plotAreaHeight,canvasWidth,controlHeight)

// get any updates from the slider values
let currentSeed = speedSlider.value();
let currentSpacing = spacingSlider.value();

// Draw the four wires in a square
rightEdge = plotAreaWidth - wireMargin;
bottomEdge = plotAreaHeight - wireMargin;

// top wire
drawAnimatedWire(wireMargin, wireMargin, rightEdge, wireMargin, currentSeed, currentSpacing, "black", state);

// right wire
drawAnimatedWire(rightEdge, wireMargin, rightEdge, bottomEdge, currentSeed, currentSpacing, "black", state);

// lower wire
drawAnimatedWire(rightEdge, bottomEdge, wireMargin, bottomEdge, currentSeed, currentSpacing, "black", state);

// left wire from bottom to top
drawAnimatedWire(wireMargin, bottomEdge, wireMargin, wireMargin, currentSeed, currentSpacing, "black", state);

fill('black');
noStroke();
text('Speed:' + currentSeed, 10, plotAreaHeight+33);
text('Spacing:' + currentSpacing, 10, plotAreaHeight + 66);
}

// Function for drawing an animated wire with adjustable circle spacing
function drawAnimatedWire(x1, y1, x2, y2, speed, spacing, color, state) {
let distance = dist(x1, y1, x2, y2);
let numCircles = Math.floor(distance / (spacing * 50)); // Spacing scale factor for better visual control

stroke(0);
strokeWeight(lineWidth);
line(x1, y1, x2, y2); // Draw the wire

if (state) {
for (let i = 0; i <= numCircles; i++) {
// Calculate the position of each circle
let circlePos = (millis() * speed + i * spacing * 50) % distance; // Space circles along the wire

let x = lerp(x1, x2, circlePos / distance);
let y = lerp(y1, y2, circlePos / distance);

fill(255, 0, 0);
noStroke();
circle(x, y, 9); // Draw each circle (electron)
}
}
}

// Function to toggle state
function toggleState() {
state = !state;
}
30 changes: 30 additions & 0 deletions docs/sims/animated-wire/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Animated Wire MicroSim

[Run the Animated Wire MicroSim](./animated-wire.html)

## Sample Animate Wire Function

```js
// Function for drawing an animated wire
function drawAnimatedWire(x1, y1, x2, y2, speed1, state) {
if (state) {
let distance = dist(x1, y1, x2, y2);
let circlePos = map((millis() * speed1) % distance, 0, distance, 0, 1);

let x = lerp(x1, x2, circlePos);
let y = lerp(y1, y2, circlePos);

stroke(0);
strokeWeight(lineWidth)
line(x1, y1, x2, y2);

fill(255, 0, 0);
noStroke();
circle(x, y, 10);
} else {
stroke(0);
strokeWeight(lineWidth)
line(x1, y1, x2, y2);
}
}
```
24 changes: 24 additions & 0 deletions docs/sims/background-grid/background-grid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Controlling the Background Grid</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Put your script file name here -->
<script src="./background-grid.js"></script>
</head>
<body>
<!-- Put the following lines in your setup() function
const canvas = createCanvas(400, 400);
var mainElement = document.querySelector('main');
canvas.parent(mainElement);
-->
<main></main>
<a href="./">Back to Lesson Plan</a>
</body>
</html>
85 changes: 85 additions & 0 deletions docs/sims/background-grid/background-grid.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
// Standard sizes for Smartboard with controls at the bottom
let canvasWidth = 600;
let canvasHeight = 600;

let plotWidth = canvasWidth;
let plotHeight = 500;
let plotMargin = 50;

let controlWidth = canvasWidth;
let controlHeight = 100;

let thicknessSlider, spacingSlider;
let gridThickness = 1;
let gridSpacing = 50;

function setup() {
createCanvas(canvasWidth, canvasHeight); // Set the canvas size

// Create thickness slider (range from 1 to 10)
thicknessSlider = createSlider(.1, 1.25, .25, .05);
thicknessSlider.position(190, plotHeight + 20);
thicknessSlider.size(canvasWidth / 2);

// Create spacing slider (range from 5 to 100, step of 5)
spacingSlider = createSlider(5, 100, 25, 5);
spacingSlider.position(190, plotHeight + 50);
spacingSlider.size(canvasWidth / 2);

// Call the function to draw the grid initially
drawGrid();
}

function draw() {
noStroke();
fill("DodgerBlue"); // DodgerBlue background
rect(0,0,canvasWidth, plotHeight)
drawGrid(25); // Call the drawGrid function with a grid spacing of 25

// Draw the Controls Area
fill('cornsilk')
stroke(1);
strokeWeight(1);
rect(0,plotHeight,canvasWidth,controlHeight)

// Get values from sliders
gridThickness = thicknessSlider.value();
gridSpacing = spacingSlider.value();

// Draw grid using the current slider values
drawGrid();

// Display slider labels and values
fill('black');
noStroke();
textSize(16);
textAlign(LEFT, CENTER);
text("Grid Thickness: " + gridThickness, 10, plotHeight + 30);
text("Grid Spacing: " + gridSpacing, 10, plotHeight + 60);
}

function drawGrid() {
for (let x = 0; x < plotWidth; x += gridSpacing) {
if (x % 100 === 0) {
strokeWeight(gridThickness * 4); // Adjust thickness for every 100th line
} else if (x % 50 === 0) {
strokeWeight(gridThickness * 2); // Adjust thickness for every 50th line
} else {
strokeWeight(gridThickness); // Standard line thickness
}
stroke(255); // Set the grid color to white
line(x, 0, x, plotHeight); // Draw vertical grid lines within the plot area
}

for (let y = 0; y < plotHeight; y += gridSpacing) {
if (y % 100 === 0) {
strokeWeight(gridThickness * 4); // Adjust thickness for every 100th line
} else if (y % 50 === 0) {
strokeWeight(gridThickness * 2); // Adjust thickness for every 50th line
} else {
strokeWeight(gridThickness); // Standard line thickness
}
stroke(255); // Set the grid color to white
line(0, y, plotWidth, y); // Draw horizontal grid lines within the plot area
}
}
100 changes: 100 additions & 0 deletions docs/sims/background-grid/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
# Background Grid Controls

[Run the Background Grid Control Demo](./background-grid.html){ .md-button .md-button--primary }

## Key Points

1. The simulations have two regions
2. The plot region holds the animation
3. The controls region holds the interactive controls

## Sample Code

```js
// Standard sizes for Smartboard with controls at the bottom
let canvasWidth = 600;
let canvasHeight = 600;

let plotWidth = canvasWidth;
let plotHeight = 500;
let plotMargin = 50;

let controlWidth = canvasWidth;
let controlHeight = 100;

let thicknessSlider, spacingSlider;
let gridThickness = 1;
let gridSpacing = 50;

function setup() {
createCanvas(canvasWidth, canvasHeight); // Set the canvas size

// Create thickness slider (range from 1 to 10)
thicknessSlider = createSlider(.1, 1.25, .25, .05);
thicknessSlider.position(190, plotHeight + 20);
thicknessSlider.size(canvasWidth / 2);

// Create spacing slider (range from 5 to 100, step of 5)
spacingSlider = createSlider(5, 100, 25, 5);
spacingSlider.position(190, plotHeight + 50);
spacingSlider.size(canvasWidth / 2);

// Call the function to draw the grid initially
drawGrid();
}

function draw() {
noStroke();
fill("DodgerBlue"); // DodgerBlue background
rect(0,0,canvasWidth, plotHeight)
drawGrid(25); // Call the drawGrid function with a grid spacing of 25

// Draw the Controls Area
fill('cornsilk')
stroke(1);
strokeWeight(1);
rect(0,plotHeight,canvasWidth,controlHeight)

// Get values from sliders
gridThickness = thicknessSlider.value();
gridSpacing = spacingSlider.value();

// Draw grid using the current slider values
drawGrid();

// Display slider labels and values
fill('black');
noStroke();
textSize(16);
textAlign(LEFT, CENTER);
text("Grid Thickness: " + gridThickness, 10, plotHeight + 30);
text("Grid Spacing: " + gridSpacing, 10, plotHeight + 60);
}

function drawGrid() {
for (let x = 0; x < plotWidth; x += gridSpacing) {
if (x % 100 === 0) {
strokeWeight(gridThickness * 4); // Adjust thickness for every 100th line
} else if (x % 50 === 0) {
strokeWeight(gridThickness * 2); // Adjust thickness for every 50th line
} else {
strokeWeight(gridThickness); // Standard line thickness
}
stroke(255); // Set the grid color to white
line(x, 0, x, plotHeight); // Draw vertical grid lines within the plot area
}

for (let y = 0; y < plotHeight; y += gridSpacing) {
if (y % 100 === 0) {
strokeWeight(gridThickness * 4); // Adjust thickness for every 100th line
} else if (y % 50 === 0) {
strokeWeight(gridThickness * 2); // Adjust thickness for every 50th line
} else {
strokeWeight(gridThickness); // Standard line thickness
}
stroke(255); // Set the grid color to white
line(0, y, plotWidth, y); // Draw horizontal grid lines within the plot area
}
}

```
12 changes: 12 additions & 0 deletions docs/sims/galton-board/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Galton Board

Create a p5.js sketch that simulates a Galton Board.The sketch has "New Ball" button that triggers a ball with radius=5 falling from the top middle of a canvas. Below it is a set of pins in a triangular pattern. The ball will bounce on the top pin. There is a 50% chance the ball bounces left and 50% on the right. There is a second row of two pins, each with the same odds. On the third row, there are four pins. Continue this pattern for 6 rows. Add a button for "new ball".
This is all called a Plinko game.


[Simon Tiger's Galton Board](https://editor.p5js.org/simontiger/sketches/h7p-wZCw8)

Other sketches by Simon Tiger
https://editor.p5js.org/simontiger/sketches

[Plinko by Coding Train](https://editor.p5js.org/codingtrain/sketches/wAe_oPVHo)
Loading

0 comments on commit fa041fc

Please sign in to comment.