Last active
November 19, 2025 18:35
-
-
Save Luna-Klatzer/8d84a7df094694bdd81b3252fcd8cb62 to your computer and use it in GitHub Desktop.
Simple reconstruction of an artwork with diamonds using p5.js as an assignment for a university course.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const bg_color = "#DBD5CF"; | |
| const dim_height = 170; | |
| const dim_width = 130; | |
| const scale_factor = 4; | |
| const real_width = dim_width * scale_factor; | |
| const real_height = dim_height * scale_factor; | |
| const triW = (dim_width / 6) * scale_factor; | |
| const triH = (dim_height / 17) * scale_factor; | |
| function setup() { | |
| createCanvas(real_width, real_height); | |
| } | |
| function draw() { | |
| background(bg_color); | |
| drawTriangles(); | |
| stroke(bg_color); | |
| strokeWeight(25); | |
| line(real_width, 0, 0, 0); | |
| line(0, 0, 0, real_height); | |
| line(real_width, 0, real_width, real_height); | |
| line(0, real_height, real_width, real_height); | |
| noFill(); | |
| strokeWeight(4); | |
| const spacing = 10; | |
| const frequency = 0.01; | |
| for (let x = 0; x < width; x += spacing) { | |
| beginShape(); | |
| for (let y = 0; y < height; y++) { | |
| // A sine wave offset by x, so each line looks different | |
| let offset = Math.sin(y * frequency + x * 0.2) * 20; | |
| vertex(x + offset, y); | |
| } | |
| endShape(); | |
| } | |
| } | |
| function drawTriangles() { | |
| noStroke(); | |
| fill("black"); | |
| for (let y = -triH * 2, c = 0; y < real_height; y += 2 * triH + 20, c++) { | |
| drawDiamondRow(0, y, 0); | |
| drawDiamondRow(-triW / 2, y + triH + 10, 0); | |
| } | |
| } | |
| function drawDiamondRow(xOffset, yOffset) { | |
| drawTriangleRow(xOffset, yOffset, true); | |
| drawTriangleRow(xOffset, yOffset + triH, false); | |
| } | |
| function drawTriangleRow(initX, yOffset, isUp) { | |
| for (var x = initX; x < real_width; x += triW) { | |
| if (isUp) { | |
| triangle(x, yOffset + triH, x + triW / 2, yOffset, x + triW, yOffset + triH); | |
| } else { | |
| triangle(x, yOffset, x + triW / 2, yOffset + triH, x + triW, yOffset); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment