fin
This commit is contained in:
parent
d6c8ae6f21
commit
117f99087f
36 changed files with 123064 additions and 249 deletions
97
1/sketch.js
97
1/sketch.js
|
|
@ -1,16 +1,91 @@
|
|||
function drawCanvasContent(){
|
||||
createCanvas(windowWidth, windowHeight)
|
||||
background(255)
|
||||
const sketch = function (p) {
|
||||
p.drawCanvasContent = function () {
|
||||
p.background(255);
|
||||
for (let i = 0; i <= 50; i++) {
|
||||
fill(0, 0, 0, 0)
|
||||
square(random(width/2), random(height/2), random(width/8, width/2))
|
||||
}
|
||||
p.fill(0, 0, 0, 0);
|
||||
p.square(
|
||||
p.random(p.width / 2),
|
||||
p.random(p.height / 2),
|
||||
p.random(p.width / 8, p.width / 2)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function setup() {
|
||||
drawCanvasContent();
|
||||
}
|
||||
p.setup = function () {
|
||||
p.createCanvas(400, 400);
|
||||
p.drawCanvasContent();
|
||||
};
|
||||
|
||||
function mouseMoved() {
|
||||
drawCanvasContent();
|
||||
p.mouseMoved = function () {
|
||||
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 |
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -7,6 +8,13 @@
|
|||
<title>Sketch</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<div id="filterSketch"></div>
|
||||
<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>
|
||||
|
|
@ -15,4 +23,5 @@
|
|||
<body>
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
|
||||
</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() {
|
||||
randomnessSeed = random(100)
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image.png");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
img.loadPixels();
|
||||
p.image(img, 0, 0, 400, 400);
|
||||
for (let px = 0; px < img.pixels.length; px += 4) {
|
||||
img.pixels[px] += 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];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const size = 50
|
||||
randomSeed(randomnessSeed)
|
||||
createCanvas(windowWidth, windowHeight);
|
||||
background(255)
|
||||
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.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);
|
||||
|
|
|
|||
32
3/index.html
32
3/index.html
|
|
@ -1,26 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Sketch</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<div id="filterSketch"></div>
|
||||
<div id="sortSketch"></div>
|
||||
<div id="resizeSketch"></div>
|
||||
<div id="evenOddPixelSketch"></div>
|
||||
|
||||
|
||||
<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>
|
||||
166
3/sketch.js
166
3/sketch.js
|
|
@ -1,121 +1,75 @@
|
|||
const filterSketch = function (p) {
|
||||
let img;
|
||||
const sketch = function (p) {
|
||||
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 () {
|
||||
const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
|
||||
sketch.parent("filterSketch");
|
||||
};
|
||||
const sketch = p.createCanvas(
|
||||
gridSize[0] * cellSize,
|
||||
gridSize[1] * cellSize
|
||||
);
|
||||
sketch.parent("sketch");
|
||||
cols = p.width / cellSize;
|
||||
rows = p.height / cellSize;
|
||||
|
||||
p.preload = function () {
|
||||
img = p.loadImage("assets/image.png");
|
||||
p.pixelDensity(1);
|
||||
};
|
||||
|
||||
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;
|
||||
for (let i = 0; i < cols; i++) {
|
||||
grid[i] = [];
|
||||
for (let j = 0; j < rows; j++) {
|
||||
grid[i][j] = 0;
|
||||
}
|
||||
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);
|
||||
cActive = p.color(255, 105, 180, 255);
|
||||
cInactive = p.color(0, 0, 0, 255);
|
||||
p.background(0);
|
||||
p.frameRate(1000);
|
||||
};
|
||||
|
||||
p.draw = function () {
|
||||
p.background(255);
|
||||
p.image(img, 0, 0, p.mouseX / 8, p.mouseX / 8);
|
||||
};
|
||||
};
|
||||
// console.log(p.frameRate());
|
||||
p.noStroke();
|
||||
|
||||
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];
|
||||
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 {
|
||||
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];
|
||||
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;
|
||||
}
|
||||
finImg.updatePixels();
|
||||
p.image(finImg, 0, 0, p.windowWidth / 2, p.windowHeight / 2);
|
||||
noLoop();
|
||||
|
||||
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);
|
||||
p5Filter = new p5(sortSketch);
|
||||
p5Filter = new p5(resizeSketch);
|
||||
p5Filter = new p5(evenOddPixelSketch);
|
||||
p5Sketch = new p5(sketch);
|
||||
|
|
|
|||
|
|
@ -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