Yannick/creative-coding
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fin

Browse source
This commit is contained in:
Yannick 2025-06-08 23:53:26 +02:00
commit 117f99087f
36 changed files with 123064 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2/assets/image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
2/assets/image2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
2/assets/image3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
2/assets/image4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.1 MiB

33
2/index.html
View file

@ -1,18 +1,27 @@
<!DOCTYPE html>
<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>
<script src="libraries/p5.sound.min.js"></script>
</head>
<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>
<body>
<script src="sketch.js"></script>
</body>
</html>
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>

187
2/sketch.js
View file

@ -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);
};
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)
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];
}
}
}
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);