Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Sitting in the Rain
ID	5568774464290816
Created	5 years ago, 1607943031957
Updated	4 years ago, 1617212363672
Code	// Sitting in the Rain - a graphic by Green Ghost // Started 12/9/2020 // Finished 12/11/2020 // Released 12/14/2020 // This is my best graphic yet! I really like how the hazy effects mix with the retro/flat design style. /* STORY: He sat in the light drizzle, staring into the depths of his lantern. He had been wandering for three days. Cold, wet, and hungry, he still continued aimlessly on his way; the vast plains where once civilization had thrived a perfect host for his crippled soul. How long until he returned? Only time would tell... / // Make the graphic actually look good size(600, 600, P2D); smooth(); randomSeed(10); noiseSeed(true); var data; var scratch, scratchAmt = 5, x, y, close, newClose; // Smooth motion function Smooth (pos, dest, div) { return (dest - pos) / div; } // Find green function test(i, original) { return (original[i + 1] - original[i]) >= -30 && (original[i + 1] - original[i + 2]) >= -5; } // Nice arcs function arc2 (x, y, w, h, p) { beginShape(); vertex(x - w / 2, y); bezierVertex(x - w / 2 + p, y + h, x + w / 2 - p, y + h, x + w / 2, y); endShape(CLOSE); } // Nice beziers function speshBez (x1, y1, cx1, cy1, cx2, cy2, x2, y2, w) { w /= 2; var calcTX1 = bezierTangent(x1, cx1, cx2, x2, 1 / 3); var calcTY1 = bezierTangent(y1, cy1, cy2, y2, 1 / 3); var a1 = atan2(calcTY1, calcTX1); var calcTX2 = bezierTangent(x1, cx1, cx2, x2, 2 / 3); var calcTY2 = bezierTangent(y1, cy1, cy2, y2, 2 / 3); var a2 = atan2(calcTY2, calcTX2); var moveL1X = cx1 + cos(a1 + 90) w; var moveL2X = cx2 + cos(a2 + 90) * w; var moveR1X = cx1 + cos(a1 - 90) * w; var moveR2X = cx2 + cos(a2 - 90) * w; var moveL1Y = cy1 + sin(a1 + 90) * w; var moveL2Y = cy2 + sin(a2 + 90) * w; var moveR1Y = cy1 + sin(a1 - 90) * w; var moveR2Y = cy2 + sin(a2 - 90) * w; beginShape(); vertex(x1, y1); bezierVertex(moveL1X, moveL1Y, moveL2X, moveL2Y, x2, y2); bezierVertex(moveR2X, moveR2Y, moveR1X, moveR1Y, x1, y1); endShape(); } // Nice stars function star (x, y, sz) { noStroke(); pushMatrix(); translate(x, y); for (var i = 0; i < 4; i++) { speshBez(0, -sz * (1 - (i % 2) / 5), random(-sz / 10, sz / 10), -sz / 3 * (1 - (i % 2) / 5), random(-sz / 10, sz / 10), sz / 3 * (1 - (i % 2) / 5), 0, sz * (1 - (i % 2) / 5), sz / random(6, 12)); rotate(45); } popMatrix(); } // Messy rects function rect2 (x, y, w, h, r) { randomSeed(x + y + w + h + r); quad(x - random(r), y - random(r), x + w + random(r), y - random(r), x + w + random(r), y + h + random(r), x - random(r), y + h + random(r)); } function rect3 (x, y, w, h, r) { randomSeed(x + y + w + h + r); quad(x - random(r), y, x + w + random(r), y, x + w + random(r), y + h, x - random(r), y + h); } function block (x, y, w, h, c) { noStroke(); fill(c); rect3(x, y, w, h, 5); fill(lerpColor(c, color(0, 10, 40), 0.3)); rect2(x + w * 0.05, y + h * 0.05, w * 0.9, h * 0.9, 2); fill(c); rect2(x + w * 0.1, y + h * 0.1, w * 0.8, h * 0.8, 2); fill(lerpColor(c, color(0, 10, 40), 0.3)); rect2(x + w * 0.2, y + h * 0.2, w * 0.6, h * 0.6, 2); if (w + h >= 200) { rect2(x + w * random(0.25, 0.7), y + h * 0.7, w * 0.05, h * 0.25, 2); } fill(c); rect2(x + w * 0.25, y + h * 0.25, w * 0.5, h * 0.5, 2); } // Vegetation function leaf (x1, y1, cx1, cy1, cx2, cy2, x2, y2, w) { w /= 2; var calcTX1 = bezierTangent(x1, cx1, cx2, x2, 1 / 3); var calcTY1 = bezierTangent(y1, cy1, cy2, y2, 1 / 3); var a1 = atan2(calcTY1, calcTX1); var calcTX2 = bezierTangent(x1, cx1, cx2, x2, 2 / 3); var calcTY2 = bezierTangent(y1, cy1, cy2, y2, 2 / 3); var a2 = atan2(calcTY2, calcTX2); var moveL1X = cx1 + cos(a1 + 90) * w; var moveL2X = cx2 + cos(a2 + 90) * w; var moveR1X = cx1 + cos(a1 - 90) * w; var moveR2X = cx2 + cos(a2 - 90) * w; var moveL1Y = cy1 + sin(a1 + 90) * w; var moveL2Y = cy2 + sin(a2 + 90) * w; var moveR1Y = cy1 + sin(a1 - 90) * w; var moveR2Y = cy2 + sin(a2 - 90) * w; beginShape(); vertex(x1, y1); bezierVertex(moveL1X, moveL1Y, moveL2X, moveL2Y, x2, y2); bezierVertex(moveR2X, moveR2Y, moveR1X, moveR1Y, x1, y1); endShape(); } function plant(x, y, sz, type, c) { noStroke(); pushMatrix(); translate(x, y); scale(sz / 100, sz / 100); fill(lerpColor(c, color(10, 20, 60), 0.3)); leaf(0, 0, 0, -80, -100, -80, -100, -80, 60); leaf(0, 0, 0, -100, 100, -100, 100, -100, 65); fill(c); leaf(0, 0, 10, -130, -35, -140, -35, -145, 80); popMatrix(); } function flower(x, y, h) { strokeWeight(2); stroke(70, 75, 65); line(x, y + 3, x, y + h + 3); noStroke(); fill(235, 215, 195); ellipse(x, y, 10, 5); } // Sitting dude function drawDude () { pushMatrix(); translate(-12, 2); fill(lerpColor(color(255, 250, 240), color(30, 20, 20), 0.5)); beginShape(); vertex(120, 300); vertex(115, 282); vertex(108, 298); bezierVertex(95, 303, 95, 298, 105, 295); vertex(115, 270); vertex(118, 270); bezierVertex(119, 258, 120, 256, 123, 255); vertex(130, 256); vertex(128, 270); vertex(125, 275); bezierVertex(130, 275, 125, 285, 130, 290); bezierVertex(137, 283, 138, 282, 143, 280); bezierVertex(145, 285, 148, 289, 147, 300); bezierVertex(146, 298, 140, 290, 141, 287); bezierVertex(140, 288, 137, 294, 128, 300); bezierVertex(130, 305, 130, 310, 130, 315); bezierVertex(130, 320, 128, 325, 125, 330); bezierVertex(123, 325, 124, 320, 127, 315); bezierVertex(125, 310, 120, 305, 120, 300); endShape(); beginShape(); vertex(125, 276); bezierVertex(130, 280, 135, 285, 143, 280); bezierVertex(135, 285, 135, 288, 125, 283); endShape(); stroke(lerpColor(color(255, 250, 240), color(30, 20, 20), 0.5)); strokeWeight(2.5); line(136, 288, 160, 260); strokeWeight(1.5); line(155, 265, 156, 260); noStroke(); fill(235, 215, 195); rect(158, 263, 6, 4); quad(158, 268, 164, 269, 164, 272, 158, 272); popMatrix(); } // Make some random points var pts = []; for (var i = 0; i < 30; i++) { pts.push({x : random(width), y : random(150)}); } // Make a texture var rocks = (function() { background(255, 255, 255, 0); fill(90, 60, 85); noStroke(); stroke(90, 60, 85, 50); strokeWeight(4); beginShape(); vertex(0, 250); vertex(100, 250); vertex(110, 300); vertex(170, 300); vertex(200, 400); vertex(600, 400); vertex(600, 600); vertex(550, 600); bezierVertex(590, 440, 400, 550, 370, 600); vertex(310, 600); bezierVertex(295, 560, 210, 530, 220, 600); vertex(0, 600); endShape(); noFill(); stroke(lerpColor(color(165, 130, 140), color(90, 60, 85), 0.7)); beginShape(); vertex(100, 310); vertex(100, 330); vertex(33, 331); vertex(35, 260); vertex(33, 331); vertex(100, 330); vertex(100, 350); vertex(78, 349); vertex(80, 400); endShape(); noStroke(); fill(165, 130, 140); arc2(50, 250, 100, 20, 25); arc2(110, 300, 120, 25, 40); strokeWeight(6); fill(35, 40, 65); arc2(270, 400, 400, 30, 120); arc2(500, 400, 160, 20, 40); arc(0, 400, 400, 500, 0, 90); arc(160, 400, 230, 180, 0, 90); arc2(0, 400, 265, -30, 60); rect(330, 400, 20, 50, 30); rect(360, 400, 20, 100, 0, 0, 30, 30); rect(455, 400, 20, 60, 0, 0, 30, 30); ellipse(370, 515, 20, 20); noFill(); stroke(lerpColor(color(85, 105, 95), color(10, 20, 60), 0.3)); strokeWeight(10); strokeJoin(ROUND); strokeCap(ROUND); beginShape(); vertex(0, 450); vertex(50, 450); vertex(50, 480); vertex(75, 480); vertex(75, 500); vertex(75, 480); vertex(50, 480); vertex(50, 500); vertex(25, 500); vertex(25, 520); endShape(); beginShape(); vertex(150, 413); vertex(150, 450); vertex(170, 450); vertex(170, 470); endShape(); beginShape(); vertex(195, 413); vertex(195, 430); vertex(185, 430); endShape(); point(25, 535); point(75, 515); point(170, 485); point(170, 430); strokeWeight(6); line(130, 410, 210, 410); point(25, 550); point(170, 500); loadPixels(); var data = imageData.data; var x, y, ang, textureAmt, step = 10; for (var i = width * 960; i < width * height * 4; i += 4) { x = (i / 4) % width; y = ~~(i / (4 * width)); ang = map(noise(x / 500, y / 500), 0, 1, 0, 360); textureAmt = map(noise(x / 100 + cos(ang) * step, y / 100 + sin(ang) * step), 0, 1, 0, 30); data[i] += textureAmt * 1.8; data[i + 1] += textureAmt * 1.1; data[i + 2] += textureAmt; } updatePixels(); return get(); })(); // Put everything together function graphic () { background(30, 0, 20); noStroke(); fill(250, 220, 195, 30); beginShape(); vertex(120, 350); bezierVertex(180, 160, 230, 330, 280, 200); bezierVertex(282, 195, 285, 190, 282, 205); bezierVertex(260, 350, 180, 200, 130, 350); endShape(); beginShape(); vertex(250, 400); bezierVertex(300, 300, 375, 400, 400, 350); bezierVertex(450, 250, 500, 100, 600, 200); vertex(600, 270); bezierVertex(460, 80, 450, 400, 400, 405); bezierVertex(330, 410, 305, 340, 290, 400); endShape(); loadPixels(); var data = imageData.data; for (var i = 0; i < width * height * 4; i += 4) { x = (i / 4) % width; y = ~~(i / (4 * width)); scratch = random(-scratchAmt, scratchAmt + Math.max(y - 100, 0) / 8); data[i] += scratch; data[i + 1] += scratch / 1.2; data[i + 2] += scratch / 2; } updatePixels(); noStroke(); var sX, sY, sS, sC, sA, sL, sD; for (var i = 0; i < 130; i++) { sX = random(width); sY = random(height); sS = random(3, 6); sC = color(random(240, 255), random(200, 240), random(220, 255)); fill(sC, random(50, 100)); ellipse(sX, sY, sS, sS); for (var j = 0; j < 10; j++) { fill(sC, random(3, 5)); ellipse(sX, sY, sS + j * j * sS / 20 + random(-2, 2), sS + j * j * sS / 20 + random(-2, 2)); sA = random(360); sL = random(50); sD = random(1.5, 1.1); fill(sC, random(40, 70)); ellipse(sX + cos(sA) * sL, sY + sin(sA) * sL, sS / sD, sS / sD); } } fill(235, 205, 205, 10); for (var i = 0; i < 12; i++) { ellipse(149, 269.5, 5 + i * i / 3 + random(-2, 2), 5 + i * i / 3 + random(-2, 2)); } fill(200, 175, 155, 100); star(149, 269.5, 20); for (var i = 0; i < 5; i++) { fill(175 - random(30), 115 - random(30), 140 - random(30)); star(random(width), random(height / 2), random(10, 14)); } var rX, rY; for (var i = 0; i < 150; i++) { rX = random(width); rY = random(height); fill(random(240, 255), random(200, 240), random(220, 255), random(15, 35)); pushMatrix(); translate(rX, rY); rotate(map(noise(rX / 100, rY / 100), 0, 1, -35, 20)); rect(-1, 0, 2, random(20, 30)); popMatrix(); } image(rocks, 0, 0); plant(160, 410, 50, 0, color(85, 105, 95)); plant(195, 410, 30, 0, color(120, 135, 80)); block(475, 305, 100, 100, color(105, 105, 90)); block(505, 260, 45, 45, color(80, 80, 85)); block(25, 212, 40, 40, color(75, 75, 70)); // Flowers flower(80, 242, 5); flower(480, 297, 5); flower(490, 292, 10); // Sitting dude drawDude(); loadPixels(); var original = get().imageData.data; data = imageData.data; for (var i = 0; i < width * height * 4; i += 4) { x = (i / 4) % width; y = ~~(i / (4 * width)); scratch = random(-scratchAmt, scratchAmt); if (y < 250) { close = dist(x, y, pts[0].x, pts[0].y); for (var j = 1; j < pts.length; j++) { newClose = dist(x, y, pts[j].x, pts[j].y); if (newClose < close) { close = newClose; } } close = constrain(close - (y - 100), 0, 130); } else { close = 0; } if (test(i, original)) { data[i] += map(noise(x / 100, y / 10), 0, 1, -15, 10); data[i + 1] += map(noise(x / 100, y / 10), 0, 1, -20, 20); for (var j = 1; j < 40; j += 4) { data[i - 1 - j] += 2; data[i + j] += 2; } } data[i] += scratch + close / 1.2 + 5; data[i + 1] += scratch + close / 2; data[i + 2] += scratch + close / 1.8; if (sin(map(x, 0, width, 0, 180)) + map(noise(x / 100, y / 100) + noise(x / 5, y / 20) * 3, 0, 4, 0, 0.15) < 0.15 \|\| sin(map(y, 0, width, 0, 180)) + map(noise(x / 100, y / 100) + noise(x / 20, y / 5 + 50) * 3, 0, 4, 0, 0.15) < 0.15) { data[i] += Smooth(data[i], 40, 1.75 - sin(map(x, 0, width, 0, 180)) / 4 - sin(map(y, 0, height, 0, 180)) / 4) + scratch * 3; data[i + 1] += Smooth(data[i + 1], 10, 1.75 - sin(map(x, 0, width, 0, 180)) / 4 - sin(map(y, 0, height, 0, 180)) / 4) + scratch * 3; data[i + 2] += Smooth(data[i + 2], 30, 1.75 - sin(map(x, 0, width, 0, 180)) / 4 - sin(map(y, 0, height, 0, 180)) / 4) + scratch * 3; } } updatePixels(); } // Make sure Oh Noes stays away for a bit var stall = function() { this[["KAInfiniteLoopSetTimeout"]](10000); }; stall(); graphic();
Folds	20,22,25,27,30,35,38,66,69,78,81,84,86,89,91,106,109,137,139,150,152,160,163,206,210,212,215,332,335,481,484,486
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ2-1ZjyCQw
Votes	236
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Green Ghost
Author Name	GreenGhost1
Author ID	kaid_145655330786057731504264
Author Profile Access	PUBLIC

Archive Data

Added	11 months ago, 1735689210278
Updated	10 months ago, 1739393671906
Source Deleted	unknown