/* Christmas by Senbaku https://twitter.com/senbaku https://openprocessing.org/user/207560/ */ let t = 0.0; let vel = 1; let seed; let wSize; let palette_selected,palette_selected2,palette_selected3; function setup() { seed = random(100000); createCanvas(1920, 970); wSize = min(width, height) pixelDensity(2) angleMode(DEGREES); rectMode(CENTER) //texture pg = createGraphics(width, height); pg.noStroke(); for (let i = 0; i < 300000; i++) { let x = random(width); let y = random(height); let n = noise(x * 0.01, y * 0.01) * wSize * 0.002; let textureCol = color('#f8ca00'); textureCol.setAlpha(30) pg.fill(textureCol); pg.rect(x, y, n, n); } //background_grid bg_ribbon = createGraphics(width, height); let bg_ribbonnum = 20; let iteration = min(width, height) / bg_ribbonnum; bg_ribbon.drawingContext.setLineDash([wSize * 0.002, wSize * 0.005]); bg_ribbon.strokeWeight(wSize * 0.001) let cc = color('#ff4e50') bg_ribbon.stroke(cc) for (let i = 0; i < width; i += iteration) { for (let j = 0; j < height; j += iteration) { bg_ribbon.line(0, j, width, j) bg_ribbon.line(i, 0, i, height) } } } function draw() { randomSeed(seed); background(0); image(bg_ribbon, 0, 0) circlePacking() image(pg, 0, 0) t += vel; } function circlePacking() { noStroke(); push(); let points = []; const count = 600; for (let i = 0; i < count; i++) { let s = random(wSize * 0.01, wSize * 0.2); let x = random(width); let y = random(height); let add = true; for (let j = 0; j < points.length; j++) { let p = points[j]; if (dist(x, y, p.x, p.y) < (s + p.z) * 0.6) { add = false; break; } } if (add) points.push(createVector(x, y, s)); } for (let i = 0; i < points.length; i++) { let p = points[i]; let r = p.z - 5; r = constrain(r, wSize * 0.04, wSize * 0.4) let direction = random([-1, 1]) let randTime = random(30) push(); translate(p.x, p.y); rotate(random(-5, 5) + (5 * sin(t + randTime) * direction)) let ran = random(); if (ran < 0.5) { push(); palette_selected = random(palettes); ribbons_bold(0, 0, r) pop(); } else if (ran < 0.7) { push(); palette_selected2 = random(palettes); ribbons_thin(0, 0, r) pop(); } else if (ran < 0.8) { let redCol = ["#641220", "#6e1423", "#85182a", "#a11d33", "#a71e34", "#b21e35", "#bd1f36", "#c71f37", "#da1e37", "#e01e37"]; palette_selected3 = redCol; ribbons_giftBow(0, 0, r) } else { //star push(); let starCol = ["#fff75e", "#ffe94e", "#ffda3d", "#fdc43f", "#fdb833"]; fill(random(starCol)); r = constrain(r, wSize * 0.001, wSize * 0.05) rotate(random(45)) let angle = 360 / 6; let r2 = r / 2; beginShape(); for (let a = 0; a < 360; a += angle) { let x = cos(a) * r; let y = sin(a) * r; vertex(x, y); x = cos(a + (angle / 2)) * r2; y = sin(a + (angle / 2)) * r2; vertex(x, y); } endShape(CLOSE); //halo let radius = r; for (let i = 0; i < 360; i += 360 / 40) { let haloRaidus = radius * random(1.2, 1.5) stroke(random(starCol)); let ex = radius * sin(i); let ey = radius * cos(i); let outEx = haloRaidus * sin(i); let outEy = haloRaidus * cos(i); line(ex, ey, outEx, outEy); } pop(); } pop(); } } function giftBowParts(x, y, size) { noStroke(); push(); translate(x, y) fill(random(palette_selected3)) beginShape(); vertex(-size / 2, size / 2) vertex(-size * 0.15, -size * 0.55); bezierVertex(0, -size * 0.6, 0, -size * 0.6, size * 0.15, -size * 0.55) vertex(size / 2, size / 2) bezierVertex(0, size * 0.7, 0, size * 0.7, -size / 2, size / 2) endShape(); pop(); } function drawBowSegment(adjustment, randomSize, num, partsSize, sizes) { push(); let psize = sizes * 0.5 rotate(adjustment) for (let i = 0; i < 360; i += 360 / num) { let radius = sizes * randomSize; let ex = radius * sin(i); let ey = radius * cos(i); let angle = atan2(ey, ex) push(); translate(ex, ey) rotate(angle + 90) giftBowParts(0, 0, psize * partsSize); pop(); } pop(); } function ribbons_giftBow(x, y, sizes) { let psize = sizes * 0.5; push(); translate(x, y); drawBowSegment(20, random(0.5, 0.6), 8, 0.8, sizes) drawBowSegment(0, random(0.4, 0.5), 4, 1, sizes) drawBowSegment(40, random(0.3, 0.4), 4, 1, sizes) push(); translate(sizes * 0.1, -sizes * 0.1) rotate(55) giftBowParts(0, 0, psize * 0.9); pop(); pop(); } function draw_tail_bold(sizes, hsize) { push(); let tailRLength; if (random() < 0.7) { tailRLength = sizes * random(0.8, 1.2) } else { tailRLength = sizes * random(2, 4.2) } let ribbonWidth = hsize * 0.5; fill(random(palette_selected)) translate(ribbonWidth / 4, 0); let pos2 = createVector(random(-hsize / 2, hsize / 2), tailRLength / 2); let pos3 = createVector(random(-hsize / 2, hsize / 2), tailRLength / 2); let pos4 = createVector(random(-hsize / 2, -hsize), tailRLength) beginShape(); vertex(0, 0); bezierVertex(pos2.x, pos2.y, pos3.x, pos3.y, pos4.x, pos4.y) let steps = 16; push(); let mx = bezierPoint(pos4.x, pos3.x, pos2.x, 0, 1 / steps); let my = bezierPoint(pos4.y, pos3.y, pos2.y, 0, 1 / steps); let mtx = bezierTangent(pos4.x, pos3.x, pos2.x, 0, 1 / steps); let mty = bezierTangent(pos4.y, pos3.y, pos2.y, 0, 1 / steps); let ma = atan2(mty, mtx); vertex(cos(ma) * (-ribbonWidth * 0.5) + mx, sin(ma) * (ribbonWidth * 0.5) + my) pop(); for (let i = 0; i <= steps; i++) { let t = i / steps; let x = bezierPoint(pos4.x, pos3.x, pos2.x, 0, t); let y = bezierPoint(pos4.y, pos3.y, pos2.y, 0, t); let tx = bezierTangent(pos4.x, pos3.x, pos2.x, 0, t); let ty = bezierTangent(pos4.y, pos3.y, pos2.y, 0, t); let a = atan2(ty, tx); a -= 90; vertex(cos(a) * ribbonWidth + x, sin(a) * ribbonWidth + y) } vertex(0, 0) endShape(); pop(); } function draw_bow_bold(sizes, hsize, ribbonWidth) { push(); let bowWidth = sizes * 0.7 fill(random(palette_selected)) rotate(random(-25, 25)) beginShape(); vertex(0, -ribbonWidth / 2); bezierVertex(hsize / 2, -ribbonWidth, hsize, -ribbonWidth * 1.5, bowWidth, -ribbonWidth) vertex(bowWidth, -ribbonWidth) vertex(bowWidth, ribbonWidth) bezierVertex(hsize, ribbonWidth * 1.5, hsize / 2, ribbonWidth, 0, ribbonWidth / 2) endShape(); beginShape(); fill(random(palette_selected)) vertex(0, ribbonWidth / 2) bezierVertex(hsize / 2, ribbonWidth * 0.5, hsize, ribbonWidth * 0.5, bowWidth, ribbonWidth) bezierVertex(hsize, ribbonWidth * 1.5, hsize / 2, ribbonWidth, 0, ribbonWidth / 2) endShape() pop(); } function ribbons_bold(x, y, sizes) { noStroke(); let hsize = sizes / 2; let rNum = random(3, 5); let ribbonWidth = hsize * 0.3; push(); translate(x, y); //tail push(); draw_tail_bold(sizes, hsize) push(); scale(-1, 1) draw_tail_bold(sizes, hsize) pop(); pop(); //bow for (let i = 0; i < rNum; i++) { draw_bow_bold(sizes, hsize, ribbonWidth) push(); scale(-1, 1) draw_bow_bold(sizes, hsize, ribbonWidth) pop(); } //knot let knotSize = sizes * 0.3 fill(random(palette_selected)); beginShape(); vertex(-knotSize * 0.3, -knotSize * 0.5); vertex(knotSize * 0.3, -knotSize * 0.5); bezierVertex(knotSize * 0.4, 0, knotSize * 0.4, 0, knotSize * 0.3, knotSize * 0.5) vertex(-knotSize * 0.3, knotSize * 0.5); bezierVertex(-knotSize * 0.4, 0, -knotSize * 0.4, 0, -knotSize * 0.3, -knotSize * 0.5) endShape(); pop(); } function draw_bow_thin(hsize) { let rNum = random(3, 5) push(); for (let i = 0; i < rNum; i++) { stroke(random(palette_selected2)) rotate(random(-35, 35)) beginShape(); vertex(0, 0); bezierVertex(hsize, -hsize * (random(0.4, 1)), hsize, hsize * (random(0.4, 1)), 0, 0) endShape(); } pop(); } function draw_tail_thin(sizes) { let hsize = sizes / 2; let tailRLength = sizes * random(0.8, 2.2); stroke(random(palette_selected2)) beginShape(); vertex(0, 0); bezierVertex(random(-hsize, hsize), tailRLength / 2, random(-hsize, hsize), tailRLength / 2, random(0, hsize), tailRLength) endShape(); } function ribbons_thin(x, y, sizes) { let hsize = sizes / 2; push(); translate(x, y); noFill(); strokeWeight(sizes * 0.03) //tail draw_tail_thin(sizes) push(); scale(-1, 1); draw_tail_thin(sizes); pop(); //bow draw_bow_thin(hsize); push(); scale(-1, 1) draw_bow_thin(hsize); pop(); //knot let knotSize = sizes * 0.05 fill(random(palette_selected2)) noStroke(); rect(0, 0, knotSize * 0.8, knotSize, knotSize * 0.3) pop(); } //palettes---------------------------------------- const palettes = [ ["#e9dbce", "#fceade", "#ea526f", "#e2c290", "#6b2d5c", "#25ced1"], ["#223843", "#e9dbce", "#eff1f3", "#dbd3d8", "#d8b4a0", "#d77a61"], ["#e29578", "#ffffff", "#006d77", "#83c5be", "#ffddd2", "#edf6f9"], ["#e9dbce", "#ffffff", "#cc3528", "#028090", "#00a896", "#f8c522"], ["#e9dbce", "#f8f7c1", "#f46902", "#da506a", "#fae402", "#92accc"], ["#e42268", "#fb8075", "#761871", "#5b7d9c", "#a38cb4", "#476590"], ['#f9b4ab', '#fdebd3', '#264e70', '#679186', '#bbd4ce'], ['#1f306e', '#553772', '#8f3b76', '#c7417b', '#f5487f'], ['#e0f0ea', '#95adbe', '#574f7d', '#503a65', '#3c2a4d'], ['#413e4a', '#73626e', '#b38184', '#f0b49e', '#f7e4be'], ['#ff4e50', '#fc913a', '#f9d423', '#ede574', '#e1f5c4'], ['#99b898', '#fecea8', '#ff847c', '#e84a5f', '#2a363b'], ['#69d2e7', '#a7dbd8', '#e0e4cc', '#f38630', '#fa6900'], ['#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b'], ['#ecd078', '#d95b43', '#c02942', '#542437', '#53777a'], ['#556270', '#4ecdc4', '#c7f464', '#ff6b6b', '#c44d58'], ['#774f38', '#e08e79', '#f1d4af', '#ece5ce', '#c5e0dc'], ['#e8ddcb', '#cdb380', '#036564', '#033649', '#031634'], ['#490a3d', '#bd1550', '#e97f02', '#f8ca00', '#8a9b0f'], ['#594f4f', '#547980', '#45ada8', '#9de0ad', '#e5fcc2'], ['#00a0b0', '#6a4a3c', '#cc333f', '#eb6841', '#edc951'], ['#5bc0eb', '#fde74c', '#9bc53d', '#e55934', '#fa7921'], ['#ed6a5a', '#f4f1bb', '#9bc1bc', '#5ca4a9', '#e6ebe0'], ['#ef476f', '#ffd166', '#06d6a0', '#118ab2', '#073b4c'], ['#22223b', '#4a4e69', '#9a8c98', '#c9ada7', '#f2e9e4'], ['#114b5f', '#1a936f', '#88d498', '#c6dabf', '#f3e9d2'], ['#ff9f1c', '#ffbf69', '#ffffff', '#cbf3f0', '#2ec4b6'], ['#3d5a80', '#98c1d9', '#e0fbfc', '#ee6c4d', '#293241'], ['#06aed5', '#086788', '#f0c808', '#fff1d0', '#dd1c1a'], ['#540d6e', '#ee4266', '#ffd23f', '#3bceac', '#0ead69'], ['#c9cba3', '#ffe1a8', '#e26d5c', '#723d46', '#472d30'], ["#3c4cad", "#5FB49C", "#e8a49c"], ["#1c3560", "#f2efdb", "#fea985", "#ff6343"], ["#e0d7c5", "#488a50", "#b59a55", "#bf5513", "#3b6fb6", "#4f3224", "#9a7f6e"], //o-ball ["#ffb53c", "#eeb3a3", "#f3553c", "#642a02"],//bloodOrange ["#DEEFB7", "#5FB49C", "#ed6a5a"], ["#2B2B2B","#91B3E1","#2F5FB3","#3D4B89","#AE99E8","#DBE2EC"]//clipper_tea.snore&peace. ];

Ribbons