fin
This commit is contained in:
parent
d6c8ae6f21
commit
117f99087f
36 changed files with 123064 additions and 249 deletions
103
1/sketch.js
103
1/sketch.js
|
|
@ -1,16 +1,91 @@
|
||||||
function drawCanvasContent(){
|
const sketch = function (p) {
|
||||||
createCanvas(windowWidth, windowHeight)
|
p.drawCanvasContent = function () {
|
||||||
background(255)
|
p.background(255);
|
||||||
for (let i = 0; i <= 50; i++) {
|
for (let i = 0; i <= 50; i++) {
|
||||||
fill(0, 0, 0, 0)
|
p.fill(0, 0, 0, 0);
|
||||||
square(random(width/2), random(height/2), random(width/8, width/2))
|
p.square(
|
||||||
}
|
p.random(p.width / 2),
|
||||||
}
|
p.random(p.height / 2),
|
||||||
|
p.random(p.width / 8, p.width / 2)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
function setup() {
|
p.setup = function () {
|
||||||
drawCanvasContent();
|
p.createCanvas(400, 400);
|
||||||
}
|
p.drawCanvasContent();
|
||||||
|
};
|
||||||
|
|
||||||
function mouseMoved() {
|
p.mouseMoved = function () {
|
||||||
drawCanvasContent();
|
p.drawCanvasContent();
|
||||||
}
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const sketch2 = function (p) {
|
||||||
|
let x, y, xconst, yconst;
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
p.setup = function () {
|
||||||
|
p.createCanvas(400, 400);
|
||||||
|
p.background(255);
|
||||||
|
x = p.width / 2;
|
||||||
|
y = p.height / 2;
|
||||||
|
xconst = 0;
|
||||||
|
yconst = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
i++;
|
||||||
|
if (i > 50) {
|
||||||
|
i = 0;
|
||||||
|
yconst = p.random(-2, 2);
|
||||||
|
xconst = p.random(-2, 2);
|
||||||
|
}
|
||||||
|
x += p.random(-5, 5) + xconst;
|
||||||
|
y += p.random(-5, 5) + yconst;
|
||||||
|
p.fill(p.random(255), p.random(255), p.random(255));
|
||||||
|
p.noStroke();
|
||||||
|
p.ellipse(x, y, 5, 5);
|
||||||
|
if (x < 0) x = p.width;
|
||||||
|
if (x > p.width) x = 0;
|
||||||
|
if (y < 0) y = p.height;
|
||||||
|
if (y > p.height) y = 0;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const sketch3 = function (p) {
|
||||||
|
let randomnessSeed;
|
||||||
|
|
||||||
|
p.setup = function () {
|
||||||
|
randomnessSeed = p.random(100);
|
||||||
|
p.createCanvas(400, 400);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
const size = 50;
|
||||||
|
p.randomSeed(randomnessSeed);
|
||||||
|
p.background(255);
|
||||||
|
p.noStroke();
|
||||||
|
for (let i = 0; i <= p.width; i += size) {
|
||||||
|
for (let j = 0; j <= p.height; j += size) {
|
||||||
|
p.colorMode(p.HSL);
|
||||||
|
p.fill(
|
||||||
|
p.random(180) +
|
||||||
|
(p.mouseX / p.width) * p.random(90) +
|
||||||
|
(p.mouseY / p.height) * p.random(90),
|
||||||
|
p.keyIsPressed ? 0 : 100,
|
||||||
|
p.random(50) + (p.mouseX / p.width) * 25 + (p.mouseY / p.height) * 25
|
||||||
|
);
|
||||||
|
let randomsize = 0;
|
||||||
|
do {
|
||||||
|
randomsize = p.randomGaussian(size / 20) * 20;
|
||||||
|
} while (randomsize >= size + size / 10 || randomsize < size / 10);
|
||||||
|
p.circle(i, j, randomsize / 2 + (p.mouseY / p.height) * 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
p5Sketch = new p5(sketch);
|
||||||
|
p5Sketch2 = new p5(sketch2);
|
||||||
|
p5Sketch3 = new p5(sketch3);
|
||||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 5.1 MiB After Width: | Height: | Size: 5.1 MiB |
|
Before Width: | Height: | Size: 7.1 MiB After Width: | Height: | Size: 7.1 MiB |
31
2/index.html
31
2/index.html
|
|
@ -1,18 +1,27 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<title>Sketch</title>
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<title>Sketch</title>
|
||||||
|
|
||||||
<script src="libraries/p5.min.js"></script>
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
<script src="libraries/p5.sound.min.js"></script>
|
<div id="filterSketch"></div>
|
||||||
</head>
|
<div id="sortSketch"></div>
|
||||||
|
<div id="resizeSketch"></div>
|
||||||
|
<div id="evenOddPixelSketch"></div>
|
||||||
|
<div id="imageGlitchSketch"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="libraries/p5.min.js"></script>
|
||||||
|
<script src="libraries/p5.sound.min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script src="sketch.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
<body>
|
|
||||||
<script src="sketch.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
187
2/sketch.js
187
2/sketch.js
|
|
@ -1,28 +1,165 @@
|
||||||
let randomnessSeed
|
const filterSketch = function (p) {
|
||||||
|
let img;
|
||||||
|
p.setup = function () {
|
||||||
|
const sketch = p.createCanvas(400, 400);
|
||||||
|
sketch.parent("filterSketch");
|
||||||
|
};
|
||||||
|
|
||||||
function setup() {
|
p.preload = function () {
|
||||||
randomnessSeed = random(100)
|
img = p.loadImage("assets/image.png");
|
||||||
}
|
p.pixelDensity(1);
|
||||||
|
};
|
||||||
|
|
||||||
function draw() {
|
p.draw = function () {
|
||||||
const size = 50
|
img.loadPixels();
|
||||||
randomSeed(randomnessSeed)
|
p.image(img, 0, 0, 400, 400);
|
||||||
createCanvas(windowWidth, windowHeight);
|
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||||
background(255)
|
img.pixels[px] += 50;
|
||||||
noStroke()
|
|
||||||
for(let i = 0; i <= innerWidth; i += size){
|
|
||||||
for(let j = 0; j <= innerWidth; j += size){
|
|
||||||
colorMode(HSL)
|
|
||||||
fill(random(180) + mouseX / windowWidth * random(90) + mouseY / windowHeight * random(90),
|
|
||||||
keyIsPressed ? 0 : 100,
|
|
||||||
random(50) + mouseX / windowWidth * 25 + mouseY / windowHeight * 25
|
|
||||||
)
|
|
||||||
let randomsize = 0
|
|
||||||
do {
|
|
||||||
randomsize = randomGaussian(size / 20) * 20
|
|
||||||
}
|
|
||||||
while (randomsize >= size + size / 10 || randomsize < size / 10)
|
|
||||||
circle(i, j, randomsize / 2 + mouseY / windowHeight * 50)
|
|
||||||
}
|
}
|
||||||
}
|
img.updatePixels();
|
||||||
}
|
p.noLoop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortSketch = function (p) {
|
||||||
|
let img;
|
||||||
|
p.setup = function () {
|
||||||
|
const sortSketch = p.createCanvas(400, 400);
|
||||||
|
sortSketch.parent("sortSketch");
|
||||||
|
};
|
||||||
|
|
||||||
|
p.preload = function () {
|
||||||
|
img = p.loadImage("assets/image2.jpg");
|
||||||
|
p.pixelDensity(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
img.loadPixels();
|
||||||
|
p.image(img, 0, 0, 400, 400);
|
||||||
|
let pixelArray = [];
|
||||||
|
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||||
|
pixelArray.push([
|
||||||
|
img.pixels[px],
|
||||||
|
img.pixels[px + 1],
|
||||||
|
img.pixels[px + 2],
|
||||||
|
img.pixels[px + 3],
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
pixelArray.sort((a, b) => a[0] - b[0]);
|
||||||
|
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||||
|
img.pixels[px] = (pixelArray[px / 4][0] * 9 + img.pixels[px]) / 10;
|
||||||
|
img.pixels[px + 1] =
|
||||||
|
(pixelArray[px / 4][1] * 9 + img.pixels[px + 1]) / 10;
|
||||||
|
img.pixels[px + 2] =
|
||||||
|
(pixelArray[px / 4][2] * 9 + img.pixels[px + 2]) / 10;
|
||||||
|
img.pixels[px + 3] =
|
||||||
|
(pixelArray[px / 4][3] * 9 + img.pixels[px + 3]) / 10;
|
||||||
|
}
|
||||||
|
img.updatePixels();
|
||||||
|
img.filter(p.BLUR, 100);
|
||||||
|
p.image(img, 0, 0, 400, 400);
|
||||||
|
p.noLoop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const resizeSketch = function (p) {
|
||||||
|
let img;
|
||||||
|
p.setup = function () {
|
||||||
|
const sketch = p.createCanvas(400, 400);
|
||||||
|
sketch.parent("resizeSketch");
|
||||||
|
};
|
||||||
|
|
||||||
|
p.preload = function () {
|
||||||
|
img = p.loadImage("assets/image.png");
|
||||||
|
p.pixelDensity(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
p.background(255);
|
||||||
|
p.image(img, 0, 0, p.mouseX / 8, p.mouseX / 8);
|
||||||
|
// Keep looping since resizing depends on mouse movement
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const evenOddPixelSketch = function (p) {
|
||||||
|
let img;
|
||||||
|
let img2;
|
||||||
|
let finImg;
|
||||||
|
p.setup = function () {
|
||||||
|
const sketch = p.createCanvas(400, 400);
|
||||||
|
sketch.parent("evenOddPixelSketch");
|
||||||
|
};
|
||||||
|
|
||||||
|
p.preload = function () {
|
||||||
|
img = p.loadImage("assets/image3.jpg");
|
||||||
|
img2 = p.loadImage("assets/image4.jpg");
|
||||||
|
finImg = p.createImage(3840, 2160);
|
||||||
|
p.pixelDensity(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
img.loadPixels();
|
||||||
|
img2.loadPixels();
|
||||||
|
finImg.loadPixels();
|
||||||
|
for (let i = 0; i < img.pixels.length; i += 4) {
|
||||||
|
if (i % 8 == 0) {
|
||||||
|
finImg.pixels[i] = img.pixels[i];
|
||||||
|
finImg.pixels[i + 1] = img.pixels[i + 1];
|
||||||
|
finImg.pixels[i + 2] = img.pixels[i + 2];
|
||||||
|
finImg.pixels[i + 3] = img.pixels[i + 3];
|
||||||
|
} else {
|
||||||
|
finImg.pixels[i] = img2.pixels[i];
|
||||||
|
finImg.pixels[i + 1] = img2.pixels[i + 1];
|
||||||
|
finImg.pixels[i + 2] = img2.pixels[i + 2];
|
||||||
|
finImg.pixels[i + 3] = img2.pixels[i + 3];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
finImg.updatePixels();
|
||||||
|
p.image(finImg, 0, 0, 400, 400);
|
||||||
|
p.noLoop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageGlitchSketch = function (p) {
|
||||||
|
let img;
|
||||||
|
|
||||||
|
p.setup = function () {
|
||||||
|
const sketch = p.createCanvas(400, 400);
|
||||||
|
sketch.parent("imageGlitchSketch");
|
||||||
|
};
|
||||||
|
|
||||||
|
p.preload = function () {
|
||||||
|
img = p.loadImage("assets/image3.jpg");
|
||||||
|
p.pixelDensity(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
img.loadPixels();
|
||||||
|
const glitchAmount = Math.floor(p.random(5, 20));
|
||||||
|
|
||||||
|
for (let y = 0; y < img.height; y++) {
|
||||||
|
if (p.random() < 0.2) {
|
||||||
|
const offset = Math.floor(p.random(-glitchAmount, glitchAmount));
|
||||||
|
for (let x = 0; x < img.width; x++) {
|
||||||
|
const index = (y * img.width + x) * 4;
|
||||||
|
const shiftedIndex = (y * img.width + ((x + offset + img.width) % img.width)) * 4;
|
||||||
|
|
||||||
|
img.pixels[shiftedIndex] = img.pixels[index];
|
||||||
|
img.pixels[shiftedIndex + 1] = img.pixels[index + 1];
|
||||||
|
img.pixels[shiftedIndex + 2] = img.pixels[index + 2];
|
||||||
|
img.pixels[shiftedIndex + 3] = img.pixels[index + 3];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img.updatePixels();
|
||||||
|
p.image(img, 0, 0, 400, 400);
|
||||||
|
p.noLoop();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
p5Filter = new p5(filterSketch);
|
||||||
|
p5Sort = new p5(sortSketch);
|
||||||
|
p5Resize = new p5(resizeSketch);
|
||||||
|
p5EvenOdd = new p5(evenOddPixelSketch);
|
||||||
|
p5Glitch = new p5(imageGlitchSketch);
|
||||||
|
|
|
||||||
48
3/index.html
48
3/index.html
|
|
@ -1,26 +1,38 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
<head>
|
<title>Sketch</title>
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<title>Sketch</title>
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<script src="libraries/p5.min.js"></script>
|
||||||
<div id="filterSketch"></div>
|
<script src="libraries/p5.sound.min.js"></script>
|
||||||
<div id="sortSketch"></div>
|
<style>
|
||||||
<div id="resizeSketch"></div>
|
body {
|
||||||
<div id="evenOddPixelSketch"></div>
|
background-color: black;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#sketch {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
#defaultCanvas0 {
|
||||||
|
border: solid white 1px;
|
||||||
|
width: auto;
|
||||||
|
align-content: center;
|
||||||
|
margin: auto auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="sketch"></div>
|
||||||
|
|
||||||
|
<script src="sketch.js"></script>
|
||||||
<script src="libraries/p5.min.js"></script>
|
</body>
|
||||||
<script src="libraries/p5.sound.min.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<script src="sketch.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
182
3/sketch.js
182
3/sketch.js
|
|
@ -1,121 +1,75 @@
|
||||||
const filterSketch = function (p) {
|
const sketch = function (p) {
|
||||||
let img;
|
const gridSize = [200, 200]; // min ~31, smaller is faster
|
||||||
|
const cellSize = 4; // Smaller is also faster
|
||||||
|
|
||||||
|
let agent = { x: cellSize * 30, y: cellSize * 30, angle: 0 };
|
||||||
|
let cols, rows;
|
||||||
|
let grid = [];
|
||||||
|
let cActive, cInactive;
|
||||||
|
|
||||||
p.setup = function () {
|
p.setup = function () {
|
||||||
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
const sketch = p.createCanvas(
|
||||||
sketch.parent("filterSketch");
|
gridSize[0] * cellSize,
|
||||||
};
|
gridSize[1] * cellSize
|
||||||
|
);
|
||||||
|
sketch.parent("sketch");
|
||||||
|
cols = p.width / cellSize;
|
||||||
|
rows = p.height / cellSize;
|
||||||
|
|
||||||
p.preload = function () {
|
for (let i = 0; i < cols; i++) {
|
||||||
img = p.loadImage("assets/image.png");
|
grid[i] = [];
|
||||||
p.pixelDensity(1);
|
for (let j = 0; j < rows; j++) {
|
||||||
};
|
grid[i][j] = 0;
|
||||||
|
|
||||||
p.draw = function () {
|
|
||||||
img.loadPixels();
|
|
||||||
p.image(img, 0, 0, p.windowHeight / 4, p.windowHeight / 4);
|
|
||||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
|
||||||
img.pixels[px] += 50;
|
|
||||||
}
|
|
||||||
img.updatePixels();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortSketch = function (p) {
|
|
||||||
let img;
|
|
||||||
p.setup = function () {
|
|
||||||
const sortSketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
|
||||||
sortSketch.parent("sortSketch");
|
|
||||||
};
|
|
||||||
p.preload = function () {
|
|
||||||
img = p.loadImage("assets/image2.jpg");
|
|
||||||
p.pixelDensity(1);
|
|
||||||
};
|
|
||||||
p.draw = function () {
|
|
||||||
img.loadPixels();
|
|
||||||
p.image(img, 0, 0, 1920, 1080);
|
|
||||||
let pixelArray = [];
|
|
||||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
|
||||||
pixelArray.push([
|
|
||||||
img.pixels[px],
|
|
||||||
img.pixels[px + 1],
|
|
||||||
img.pixels[px + 2],
|
|
||||||
img.pixels[px + 3],
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
pixelArray.sort((a, b) => a[0] - b[0]);
|
|
||||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
|
||||||
img.pixels[px] = (pixelArray[px / 4][0] * 9 + img.pixels[px]) / 10;
|
|
||||||
img.pixels[px + 1] =
|
|
||||||
(pixelArray[px / 4][1] * 9 + img.pixels[px + 1]) / 10;
|
|
||||||
img.pixels[px + 2] =
|
|
||||||
(pixelArray[px / 4][2] * 9 + img.pixels[px + 2]) / 10;
|
|
||||||
img.pixels[px + 3] =
|
|
||||||
(pixelArray[px / 4][3] * 9 + img.pixels[px + 3]) / 10;
|
|
||||||
}
|
|
||||||
console.log(img.pixels);
|
|
||||||
img.updatePixels();
|
|
||||||
img.filter(p.BLUR, 100);
|
|
||||||
p.image(img, 0, 0, 1920, 1080);
|
|
||||||
p.noLoop();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const resizeSketch = function (p) {
|
|
||||||
let img;
|
|
||||||
p.setup = function () {
|
|
||||||
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
|
||||||
sketch.parent("resizeSketch");
|
|
||||||
};
|
|
||||||
|
|
||||||
p.preload = function () {
|
|
||||||
img = p.loadImage("assets/image.png");
|
|
||||||
p.pixelDensity(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
p.draw = function () {
|
|
||||||
p.background(255);
|
|
||||||
p.image(img, 0, 0, p.mouseX / 8, p.mouseX / 8);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const evenOddPixelSketch = function (p) {
|
|
||||||
let img;
|
|
||||||
let img2;
|
|
||||||
let finImg;
|
|
||||||
p.setup = function () {
|
|
||||||
const sketch = p.createCanvas(p.windowWidth / 2, p.windowHeight / 2);
|
|
||||||
sketch.parent("evenOddPixelSketch");
|
|
||||||
};
|
|
||||||
p.preload = function () {
|
|
||||||
img = p.loadImage("assets/image3.jpg");
|
|
||||||
img2 = p.loadImage("assets/image4.jpg");
|
|
||||||
finImg = p.createImage(3840, 2160);
|
|
||||||
p.pixelDensity(1);
|
|
||||||
};
|
|
||||||
p.draw = function () {
|
|
||||||
img.loadPixels();
|
|
||||||
img2.loadPixels();
|
|
||||||
finImg.loadPixels();
|
|
||||||
for (let i = 0; i < img.pixels.length; i += 4) {
|
|
||||||
if (i % 8 == 0) {
|
|
||||||
finImg.pixels[i] = img.pixels[i];
|
|
||||||
finImg.pixels[i + 1] = img.pixels[i + 1];
|
|
||||||
finImg.pixels[i + 2] = img.pixels[i + 2];
|
|
||||||
finImg.pixels[i + 3] = img.pixels[i + 3];
|
|
||||||
} else {
|
|
||||||
finImg.pixels[i] = img2.pixels[i];
|
|
||||||
finImg.pixels[i + 1] = img2.pixels[i + 1];
|
|
||||||
finImg.pixels[i + 2] = img2.pixels[i + 2];
|
|
||||||
finImg.pixels[i + 3] = img2.pixels[i + 3];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
finImg.updatePixels();
|
|
||||||
p.image(finImg, 0, 0, p.windowWidth / 2, p.windowHeight / 2);
|
cActive = p.color(255, 105, 180, 255);
|
||||||
noLoop();
|
cInactive = p.color(0, 0, 0, 255);
|
||||||
|
p.background(0);
|
||||||
|
p.frameRate(1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
// console.log(p.frameRate());
|
||||||
|
p.noStroke();
|
||||||
|
|
||||||
|
const col = agent.x / cellSize;
|
||||||
|
const row = agent.y / cellSize;
|
||||||
|
|
||||||
|
if (grid[col][row] === 1) {
|
||||||
|
agent.angle += 90;
|
||||||
|
grid[col][row] = 0;
|
||||||
|
p.fill(cInactive);
|
||||||
|
} else {
|
||||||
|
agent.angle -= 90;
|
||||||
|
grid[col][row] = 1;
|
||||||
|
p.fill(cActive);
|
||||||
|
}
|
||||||
|
|
||||||
|
agent.angle = (agent.angle + 360) % 360;
|
||||||
|
|
||||||
|
p.rect(agent.x, agent.y, cellSize, cellSize);
|
||||||
|
|
||||||
|
switch (agent.angle) {
|
||||||
|
case 0:
|
||||||
|
agent.y -= cellSize;
|
||||||
|
break;
|
||||||
|
case 90:
|
||||||
|
agent.x += cellSize;
|
||||||
|
break;
|
||||||
|
case 180:
|
||||||
|
agent.y += cellSize;
|
||||||
|
break;
|
||||||
|
case 270:
|
||||||
|
agent.x -= cellSize;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (agent.x < 0) agent.x = p.width - cellSize;
|
||||||
|
if (agent.x >= p.width) agent.x = 0;
|
||||||
|
if (agent.y < 0) agent.y = p.height - cellSize;
|
||||||
|
if (agent.y >= p.height) agent.y = 0;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
p5Filter = new p5(filterSketch);
|
p5Sketch = new p5(sketch);
|
||||||
p5Filter = new p5(sortSketch);
|
|
||||||
p5Filter = new p5(resizeSketch);
|
|
||||||
p5Filter = new p5(evenOddPixelSketch);
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
html, body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
19
5/index.html
Normal file
19
5/index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>Sketch</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
|
||||||
|
<script src="libraries/p5.min.js"></script>
|
||||||
|
<script src="libraries/p5.sound.min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
If banana on a wall can be art, then an unfinished JavaScipt project can be art too.
|
||||||
|
<script src="sketch.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
5/shake.txt
Normal file
7
5/shake.txt
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
word word word word
|
||||||
|
|
||||||
|
From fairest creatures we desire increase,
|
||||||
|
That thereby beauty's rose might never die,
|
||||||
|
But as the riper should by time decease,
|
||||||
|
His tender heir might bear his memory:
|
||||||
|
word
|
||||||
122185
5/shakespeare.txt
Normal file
122185
5/shakespeare.txt
Normal file
File diff suppressed because it is too large
Load diff
56
5/sketch.js
Normal file
56
5/sketch.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
let shakespeareArray;
|
||||||
|
function preload() {
|
||||||
|
loadStrings("shakespeare.txt", handleShakespeare);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(400, 400);
|
||||||
|
console.log(shakespeareArray);
|
||||||
|
const shakespeareTable = new Map();
|
||||||
|
for (i = 0; i < shakespeareArray.length; i++) {
|
||||||
|
const word = shakespeareArray[i];
|
||||||
|
|
||||||
|
// prettier-ignore
|
||||||
|
if (!(shakespeareTable.get(word))) { // in => all object keys
|
||||||
|
shakespeareTable.set(word, new Map());
|
||||||
|
}
|
||||||
|
wordMap = shakespeareTable.get(word);
|
||||||
|
let nextWord;
|
||||||
|
if (shakespeareArray.length > i) {
|
||||||
|
nextWord = shakespeareArray[i + 1];
|
||||||
|
}
|
||||||
|
if (wordMap.get(nextWord)) {
|
||||||
|
wordMap.set(nextWord, wordMap.get(nextWord) + 1);
|
||||||
|
} else {
|
||||||
|
wordMap.set(nextWord, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(shakespeareTable);
|
||||||
|
const probabilityPostfix = "___PROBABILITY___"
|
||||||
|
shakespeareTable.forEach((meowmeowmeow) => { // CONTINUE HERE
|
||||||
|
console.log("UWU")
|
||||||
|
let combinedAmount = 0
|
||||||
|
for (nextWord in word) {
|
||||||
|
combinedAmount += word.get(nextWord)
|
||||||
|
}
|
||||||
|
for (nextWord in word) {
|
||||||
|
probabilityNextWord = word.get(nextWord) / combinedAmount
|
||||||
|
word.set(nextWord + probabilityPostfix, probabilityNextWord)
|
||||||
|
console.log(probabilityNextWord)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(shakespeareTable);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(220);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleShakespeare(data) {
|
||||||
|
joinedShakespeareString = data.join(" ");
|
||||||
|
cleanedShakespearString = joinedShakespeareString.replaceAll(/\s+/g, " ");
|
||||||
|
shakespeareArray = joinedShakespeareString
|
||||||
|
.split(/\s*(\b|\W|\s)\s*/)
|
||||||
|
.filter((item) => item !== "");
|
||||||
|
}
|
||||||
38
6/index.html
Normal file
38
6/index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<title>Sketch</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
|
||||||
|
<script src="libraries/p5.min.js"></script>
|
||||||
|
<script src="libraries/p5.sound.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#sketch {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
#defaultCanvas0 {
|
||||||
|
border: solid white 1px;
|
||||||
|
width: auto;
|
||||||
|
align-content: center;
|
||||||
|
margin: auto auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="sketch"></div>
|
||||||
|
|
||||||
|
<script src="sketch.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
6/libraries/p5.min.js
vendored
Normal file
2
6/libraries/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
6/libraries/p5.sound.min.js
vendored
Normal file
3
6/libraries/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
157
6/sketch.js
Normal file
157
6/sketch.js
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
// GAME OF LIFE PLUS LANGTON'S ANT
|
||||||
|
const sketch = function (p) {
|
||||||
|
const gridSize = [200, 200];
|
||||||
|
const cellSize = 4;
|
||||||
|
const ant_val = 20;
|
||||||
|
const game_val = 1;
|
||||||
|
const mouse_val = 20;
|
||||||
|
const fill_randomly = false;
|
||||||
|
const random_fill_value = 1;
|
||||||
|
|
||||||
|
let agent = { x: cellSize * 30, y: cellSize * 30, angle: 0 };
|
||||||
|
let cols, rows;
|
||||||
|
let grid = [];
|
||||||
|
let nextGrid = [];
|
||||||
|
let cActive, cInactive, cAnt;
|
||||||
|
|
||||||
|
p.setup = function () {
|
||||||
|
p.createCanvas(gridSize[0] * cellSize, gridSize[1] * cellSize).parent(
|
||||||
|
"sketch"
|
||||||
|
);
|
||||||
|
cols = p.width / cellSize;
|
||||||
|
rows = p.height / cellSize;
|
||||||
|
|
||||||
|
// Initialize grid
|
||||||
|
if (fill_randomly) {
|
||||||
|
grid = Array.from({ length: cols }, () =>
|
||||||
|
// Array.from => arg1: length of array, arg2: function for each item
|
||||||
|
Array.from({ length: rows }, () => ({
|
||||||
|
val: p.random() < 0.5 ? random_fill_value : 0,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
grid = Array.from({ length: cols }, () =>
|
||||||
|
Array.from({ length: rows }, () => ({ val: 0 }))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
nextGrid = Array.from({ length: cols }, () => Array(rows).fill(0));
|
||||||
|
|
||||||
|
cActive = p.color(127, 0, 127, 255);
|
||||||
|
cInactive = p.color(0, 0, 0, 255);
|
||||||
|
cAnt = p.color(0, 255, 255, 255);
|
||||||
|
p.background(0);
|
||||||
|
p.frameRate(10);
|
||||||
|
};
|
||||||
|
|
||||||
|
p.draw = function () {
|
||||||
|
p.noStroke();
|
||||||
|
|
||||||
|
// Draw the grid
|
||||||
|
for (let i = 0; i < cols; i++) {
|
||||||
|
for (let j = 0; j < rows; j++) {
|
||||||
|
if (grid[i][j].val > 0) {
|
||||||
|
const brightness = p.map(grid[i][j].val, 0, ant_val, 50, 255); // Map range t0 50-255
|
||||||
|
p.fill(127, 0, brightness, 255);
|
||||||
|
} else {
|
||||||
|
p.fill(cInactive);
|
||||||
|
}
|
||||||
|
p.rect(i * cellSize, j * cellSize, cellSize, cellSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p.fill(cAnt);
|
||||||
|
p.rect(agent.x, agent.y, cellSize, cellSize);
|
||||||
|
|
||||||
|
// Langton's Ant logic
|
||||||
|
const col = Math.floor(agent.x / cellSize);
|
||||||
|
const row = Math.floor(agent.y / cellSize);
|
||||||
|
|
||||||
|
if (grid[col][row].val > 0) {
|
||||||
|
agent.angle += 90;
|
||||||
|
grid[col][row].val = 0;
|
||||||
|
} else {
|
||||||
|
agent.angle -= 90;
|
||||||
|
grid[col][row].val = ant_val;
|
||||||
|
}
|
||||||
|
|
||||||
|
agent.angle = (agent.angle + 360) % 360;
|
||||||
|
|
||||||
|
switch (agent.angle) {
|
||||||
|
case 0:
|
||||||
|
agent.y -= cellSize;
|
||||||
|
break;
|
||||||
|
case 90:
|
||||||
|
agent.x += cellSize;
|
||||||
|
break;
|
||||||
|
case 180:
|
||||||
|
agent.y += cellSize;
|
||||||
|
break;
|
||||||
|
case 270:
|
||||||
|
agent.x -= cellSize;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
agent.x = (agent.x + p.width) % p.width;
|
||||||
|
agent.y = (agent.y + p.height) % p.height;
|
||||||
|
|
||||||
|
// Game of Life logic
|
||||||
|
for (let i = 0; i < cols; i++) {
|
||||||
|
for (let j = 0; j < rows; j++) {
|
||||||
|
const neighbors = countNeighbors(i, j);
|
||||||
|
|
||||||
|
if (grid[i][j].val > 0) {
|
||||||
|
switch (neighbors) {
|
||||||
|
case 2:
|
||||||
|
case 3:
|
||||||
|
nextGrid[i][j] = grid[i][j].val;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
nextGrid[i][j] = grid[i][j].val - 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (neighbors === 3) {
|
||||||
|
nextGrid[i][j] = game_val;
|
||||||
|
} else {
|
||||||
|
nextGrid[i][j] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swap grids
|
||||||
|
for (let i = 0; i < cols; i++) {
|
||||||
|
for (let j = 0; j < rows; j++) {
|
||||||
|
grid[i][j].val = nextGrid[i][j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function countNeighbors(x, y) {
|
||||||
|
let count = 0;
|
||||||
|
for (let i = -1; i <= 1; i++) {
|
||||||
|
for (let j = -1; j <= 1; j++) {
|
||||||
|
if (i === 0 && j === 0) continue;
|
||||||
|
const col = (x + i + cols) % cols;
|
||||||
|
const row = (y + j + rows) % rows;
|
||||||
|
count += grid[col][row].val > 0 ? 1 : 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.mouseClicked = function () {
|
||||||
|
const x = Math.floor(p.mouseX / cellSize);
|
||||||
|
const y = Math.floor(p.mouseY / cellSize);
|
||||||
|
if (x >= 0 && x < cols && y >= 0 && y < rows) {
|
||||||
|
grid[x][y].val = grid[x][y].val > 0 ? 0 : mouse_val;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
p.keyPressed = function () {
|
||||||
|
if (p.keyCode === 32) {
|
||||||
|
p.isLooping() ? p.noLoop() : p.loop();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
new p5(sketch);
|
||||||
0
6/style.css
Normal file
0
6/style.css
Normal file
10
7/jsconfig.json
Normal file
10
7/jsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es6"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"*.js",
|
||||||
|
"**/*.js",
|
||||||
|
"/home/melody/.var/app/com.visualstudio.code/data/vscode/extensions/samplavigne.p5-vscode-1.2.16/p5types/global.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
2
7/libraries/p5.min.js
vendored
Normal file
2
7/libraries/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
7/libraries/p5.sound.min.js
vendored
Normal file
3
7/libraries/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
165
7/sketch.js
Normal file
165
7/sketch.js
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
const numBars = 100;
|
||||||
|
const barWidth = 20;
|
||||||
|
const maxBarHeight = 200;
|
||||||
|
const barColor = [255, 127, 127];
|
||||||
|
const barSpacing = 5;
|
||||||
|
const swapRate = 10;
|
||||||
|
let oldBars = [];
|
||||||
|
let osc;
|
||||||
|
|
||||||
|
function isSorted(arr) {
|
||||||
|
for (let i = 0; i < arr.length - 1; i++) {
|
||||||
|
if (arr[i] > arr[i + 1]) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshBars(p, bars) {
|
||||||
|
const barX = (i) => i * (barWidth + barSpacing) + barSpacing;
|
||||||
|
p.clear();
|
||||||
|
p.background(10);
|
||||||
|
for (let i = 0; i < numBars; i++) {
|
||||||
|
p.fill(barColor);
|
||||||
|
p.rect(barX(i), p.height - bars[i], barWidth, bars[i]);
|
||||||
|
}
|
||||||
|
diffIndexArray = bars
|
||||||
|
.map((val, i) => (val !== oldBars[i] ? i : -1))
|
||||||
|
.filter((i) => i !== -1);
|
||||||
|
for (bar of diffIndexArray) {
|
||||||
|
p.fill(180, 0, 180);
|
||||||
|
p.rect(barX(bar), p.height - bars[bar], barWidth, bars[bar]);
|
||||||
|
}
|
||||||
|
oldBars = [...bars];
|
||||||
|
}
|
||||||
|
|
||||||
|
const sketch = function (p) {
|
||||||
|
let bars = [];
|
||||||
|
p.setup = function () {
|
||||||
|
p.createCanvas(
|
||||||
|
numBars * (barWidth + barSpacing) + barSpacing,
|
||||||
|
maxBarHeight * 1.25
|
||||||
|
);
|
||||||
|
p.background(10);
|
||||||
|
for (let i = 0; i < numBars; i++) {
|
||||||
|
bars[i] = p.random(10, maxBarHeight);
|
||||||
|
}
|
||||||
|
oldBars = [...bars];
|
||||||
|
p.noLoop();
|
||||||
|
p.userStartAudio();
|
||||||
|
osc = new p5.Oscillator("sine");
|
||||||
|
executeSortingFunction("insertionSort", bars, p);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function mousePressed() {
|
||||||
|
console.log(p.getAudioContext());
|
||||||
|
userStartAudio();
|
||||||
|
console.log(p.getAudioContext());
|
||||||
|
}
|
||||||
|
|
||||||
|
async function executeSortingFunction(functionAsString, bars, p) {
|
||||||
|
switch (functionAsString) {
|
||||||
|
case "bogoSort":
|
||||||
|
await bogoSort(bars, p);
|
||||||
|
break;
|
||||||
|
case "bozoSort":
|
||||||
|
await bozoSort(bars, p);
|
||||||
|
break;
|
||||||
|
case "stalinSort":
|
||||||
|
await stalinSort(bars, p);
|
||||||
|
break;
|
||||||
|
case "bubbleSort":
|
||||||
|
await bubbleSort(bars, p);
|
||||||
|
break;
|
||||||
|
case "insertionSort":
|
||||||
|
await insertionSort(bars, p);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
refreshBars(p, bars);
|
||||||
|
p.colorMode(p.HSL);
|
||||||
|
osc.start();
|
||||||
|
for (let i = 0; i < bars.length; i++) {
|
||||||
|
p.fill((i / bars.length) * 360, 100, 50);
|
||||||
|
p.rect(
|
||||||
|
i * (barWidth + barSpacing) + barSpacing,
|
||||||
|
p.height - bars[i],
|
||||||
|
barWidth,
|
||||||
|
bars[i]
|
||||||
|
);
|
||||||
|
osc.freq(((bars[i] * maxBarHeight) / 20 ) + 500);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||||
|
}
|
||||||
|
osc.stop();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function bogoSort(arr, p) {
|
||||||
|
while (!isSorted(arr)) {
|
||||||
|
for (let i = arr.length - 1; i > 0; i--) {
|
||||||
|
// Fisher-Yates-Shuffle
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[arr[i], arr[j]] = [arr[j], arr[i]];
|
||||||
|
}
|
||||||
|
refreshBars(p, arr);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, swapRate));
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function bozoSort(arr, p) {
|
||||||
|
while (!isSorted(arr)) {
|
||||||
|
const bar1 = Math.floor(Math.random() * arr.length);
|
||||||
|
const bar2 = Math.floor(Math.random() * arr.length);
|
||||||
|
[arr[bar1], arr[bar2]] = [arr[bar2], arr[bar1]];
|
||||||
|
refreshBars(p, arr);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, swapRate));
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function stalinSort(arr, p) {
|
||||||
|
for (let i = 0; i < arr.length; i++) {
|
||||||
|
if (arr[i] < arr[i - 1]) {
|
||||||
|
arr.splice(i, 1);
|
||||||
|
i -= 1;
|
||||||
|
refreshBars(p, arr);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, swapRate));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function bubbleSort(arr, p) {
|
||||||
|
while (!isSorted(arr)) {
|
||||||
|
for (let i = 0; i < arr.length; i++) {
|
||||||
|
if (arr[i] > arr[i + 1]) {
|
||||||
|
[arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
|
||||||
|
refreshBars(p, arr);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, swapRate));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function insertionSort(arr, p) {
|
||||||
|
for (let i = 0; i <= arr.length - 1; i++) {
|
||||||
|
let currentBarIndex = i;
|
||||||
|
while (
|
||||||
|
currentBarIndex > 0 &&
|
||||||
|
arr[currentBarIndex - 1] > arr[currentBarIndex]
|
||||||
|
) {
|
||||||
|
[arr[currentBarIndex], arr[currentBarIndex - 1]] = [
|
||||||
|
arr[currentBarIndex - 1],
|
||||||
|
arr[currentBarIndex],
|
||||||
|
];
|
||||||
|
currentBarIndex--;
|
||||||
|
refreshBars(p, arr);
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, swapRate));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sketch2 = function (p) {};
|
||||||
|
|
||||||
|
p5Sketch = new p5(sketch);
|
||||||
8
7/style.css
Normal file
8
7/style.css
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es6"
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"*.js",
|
|
||||||
"**/*.js",
|
|
||||||
"/home/melody/.vscode-oss/extensions/samplavigne.p5-vscode-1.2.16/p5types/global.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
47
99/sketch.js
47
99/sketch.js
|
|
@ -1,47 +0,0 @@
|
||||||
const frameRateNumber = 60
|
|
||||||
const cycleLenght = 600
|
|
||||||
let pointArray1
|
|
||||||
let pointArray2
|
|
||||||
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(windowWidth, windowHeight);
|
|
||||||
|
|
||||||
frameRate(frameRateNumber)
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
const currentCyclePos = frameCount % cycleLenght
|
|
||||||
switch (true) {
|
|
||||||
case (currentCyclePos === 1):
|
|
||||||
pointArray1 = []
|
|
||||||
//pointArrStart = [{x:1, y: 1},{}];
|
|
||||||
|
|
||||||
background(255)
|
|
||||||
strokeWeight(10)
|
|
||||||
x1 = windowWidth / 2
|
|
||||||
y1 = windowHeight
|
|
||||||
x2 = windowWidth / 2
|
|
||||||
y2 = windowHeight * 3 / 4
|
|
||||||
pointArray1.push({x: x1, y: y1})
|
|
||||||
pointArray1.push({x: x2, y: y2})
|
|
||||||
console.log(pointArray1)
|
|
||||||
line(x1, y1, x2, y2)
|
|
||||||
break
|
|
||||||
|
|
||||||
case (currentCyclePos < cycleLenght * 3 / 4):
|
|
||||||
const lastPoint = pointArray1[pointArray1.length-1]
|
|
||||||
|
|
||||||
console.log(lastPoint)
|
|
||||||
x1 = lastPoint.x
|
|
||||||
y1 = lastPoint.y
|
|
||||||
x2 =
|
|
||||||
y1 =
|
|
||||||
console.log(x1 + " " + y1)
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
background(255)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
5
anleitung.md
Normal file
5
anleitung.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# How to set up this project.
|
||||||
|
Copy root directory into webroot directory of webserver of your choice.
|
||||||
|
Start webserver, optionally set up reverse proxy for HTTPS.
|
||||||
|
Done.
|
||||||
|
Source of this project: https://git.shork.ch/Yannick/creative-coding
|
||||||
BIN
anleitung.pdf
Normal file
BIN
anleitung.pdf
Normal file
Binary file not shown.
26
index.html
Normal file
26
index.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Creative Coding Project</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: hotpink;
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Creative Coding Project</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./1/">01</a></li>
|
||||||
|
<li><a href="./2/">02</a></li>
|
||||||
|
<li><a href="./3/">03</a></li>
|
||||||
|
<li><a href="./5/">05</a></li>
|
||||||
|
<li><a href="./6/">06</a></li>
|
||||||
|
<li><a href="./7/">07</a></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
projektbeschrieb.md
Normal file
7
projektbeschrieb.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
## Function
|
||||||
|
Visualizes different sorting alogrithms.
|
||||||
|
## How it works
|
||||||
|
The project sorts an array of bars with a chosen algorithm.
|
||||||
|
It highlights the switched bars by comparing the old and new bars array.
|
||||||
|
It plays the sound at the end via the p5js sound library. The frequency depends on the height of the bar.
|
||||||
|
Sound context must be activated with a click on the canvas.
|
||||||
BIN
projektbeschrieb.pdf
Normal file
BIN
projektbeschrieb.pdf
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue