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

finish 3

Browse source
This commit is contained in:
Yannick 2025-04-16 10:46:09 +02:00
parent c54b95d716
commit b659283322
5 changed files with 95 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.1 MiB

4
3/index.html
View file

@ -10,8 +10,8 @@
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<div id="filterSketch"></div> <div id="filterSketch"></div>
<div id="sortSketch"></div> <div id="sortSketch"></div>
<div id="resize"></div> <div id="resizeSketch"></div>
<div id="even_odd_pixel"></div> <div id="evenOddPixelSketch"></div>

125
3/sketch.js
View file

@ -1,8 +1,8 @@
const filterSketch = function (p) { const filterSketch = function (p) {
let img; let img;
p.setup = function () { p.setup = function () {
const filterSketch = p.createCanvas(p.windowWidth, p.windowHeight); const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
filterSketch.parent("filterSketch"); sketch.parent("filterSketch");
}; };
p.preload = function () { p.preload = function () {
@ -12,7 +12,7 @@ const filterSketch = function (p) {
p.draw = function () { p.draw = function () {
img.loadPixels(); img.loadPixels();
p.image(img, 0, 0, 400, 400); p.image(img, 0, 0, p.windowHeight / 4, p.windowHeight / 4);
for (let px = 0; px < img.pixels.length; px += 4) { for (let px = 0; px < img.pixels.length; px += 4) {
img.pixels[px] += 50; img.pixels[px] += 50;
} }
@ -20,51 +20,104 @@ const filterSketch = function (p) {
}; };
}; };
const sortSketch = function (p) { // 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; let img;
p.setup = function () { p.setup = function () {
const sortSketch = p.createCanvas(p.windowWidth, p.windowHeight); const sketch = p.createCanvas(p.windowWidth / 4, p.windowHeight / 4);
sortSketch.parent("sortSketch"); sketch.parent("resizeSketch");
}; };
p.preload = function () { p.preload = function () {
// img = p.loadImage("assets/image.png"); img = p.loadImage("assets/image.png");
img = p.createImage(66, 66)
p.pixelDensity(1); p.pixelDensity(1);
}; };
p.draw = function () { p.draw = function () {
img.loadPixels(); p.background(255);
p.image(img, 0, 0, 400, 400); p.image(img, 0, 0, p.mouseX / 8, p.mouseX / 8);
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]); const evenOddPixelSketch = function (p) {
for (let px = 0; px < img.pixels.length; px += 4) { let img;
img.pixels[px] = pixelArray[px / 4][0]; let img2;
img.pixels[px + 1] = pixelArray[px / 4][1]; let finImg;
img.pixels[px + 2] = pixelArray[px / 4][2]; p.setup = function () {
img.pixels[px + 3] = pixelArray[px / 4][3]; const sketch = p.createCanvas(p.windowWidth / 2, p.windowHeight / 2);
} sketch.parent("evenOddPixelSketch");
console.log(img.pixels); };
for (let x = 0; x < img.width; x += 1) { p.preload = function () {
for (let y = 0; y < img.height; y += 1) { img = p.loadImage("assets/image3.jpg");
img.set(x, y, 0); 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];
} }
} }
console.log(img.pixels) finImg.updatePixels();
p.updatePixels(); p.image(finImg, 0, 0, p.windowWidth / 2, p.windowHeight / 2);
p.image(img, 0, 0, 400, 400); noLoop();
p.noLoop();
}; };
}; };
//let test = function (p) { //let test = function (p) {
// let img // let img
// //
@ -98,4 +151,6 @@ const sortSketch = function (p) {
//} //}
p5Filter = new p5(filterSketch); p5Filter = new p5(filterSketch);
p5Filter = new p5(sortSketch); // p5Filter = new p5(sortSketch);
p5Filter = new p5(resizeSketch);
p5Filter = new p5(evenOddPixelSketch);