31:Td7f,p5(sketch => { let offset = input.value; let n = 0; let stroke = 3; sketch.setup = function() { sketch.createCanvas(width, height); sketch.frameRate(30); sketch.rect(0, 0, width, height); sketch.background('#000000'); sketch.frameRate(1); // sketch.noLoop(); }; sketch.draw = function() { sketch.background('rgba(0, 0, 0, 0.1)'); sketch.translate(width / 2, height / 2); const ctx = sketch.drawingContext; // global canvas context p5.js var sierpinski(triangle[0], triangle[1], triangle[2], n, ctx); if (n < +input.recursion) { n = n + 1; stroke = stroke - 0.25; offset = offset * 0.6; } else { sketch.noLoop() }; } function sierpinski(p0, p1, p2, limit, ctx) { if (limit > 0) { const pA = {x: (p0.x + p1.x) / 2 + randomIntFromInterval(-1 * offset * 2, offset * 2), y: (p0.y + p1.y) / 2 + randomIntFromInterval(-1 * offset * 2, offset * 2)}; const pB = {x: (p1.x + p2.x) / 2 + randomIntFromInterval(-1 * offset * 2, offset * 2), y: (p1.y + p2.y) / 2 + randomIntFromInterval(-1 * offset * 2, offset * 2)}; const pC = {x: (p2.x + p0.x) / 2 + randomIntFromInterval(-1 * offset * 2, offset * 2), y: (p2.y + p0.y) / 2 + randomIntFromInterval(-1 * offset * 2, offset * 2)}; sierpinski(p0, pA, pC, limit - 1, ctx); sierpinski(pA, p1, pB, limit - 1, ctx); sierpinski(pC, pB, p2, limit - 1, ctx); } else { var grd = ctx.createLinearGradient(p0.x, p0.y, p0.x, p1.y); // Add three color stops grd.addColorStop(0.1, 'rgba(255, 255, 255, 0.05)'); grd.addColorStop(0.5, 'rgba(50, 50, 50, 0.05)'); grd.addColorStop(0.9, 'rgba(255, 255, 255, 0.1)'); if (+input.design === 1) { drawTriangle(p0, p1, p2, ctx, grd); } else if (+input.design === 2) { drawArcs(p0, p1, p2, ctx, grd); } else { drawArcs(p0, p1, p2, ctx, grd); drawTriangle(p0, p1, p2, ctx, grd); } } } function drawTriangle(p0, p1, p2, ctx, grd) { // in p5 - no gradient // sketch.fill('rgba(255, 255, 255, 0.1)'); // sketch.noStroke(); // sketch.beginShape(); // sketch.vertex(p0.x, p0.y); // sketch.vertex(p1.x, p1.y); // sketch.vertex(p2.x, p2.y); // sketch.endShape(sketch.CLOSE); ctx.fillStyle = grd; // normal canvas ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.lineTo(p0.x, p0.y); ctx.fill(); } function drawArcs(p0, p1, p2, ctx, grd) { // p5 - no gradient // sketch.stroke('rgba(255, 255, 255, 0.25)'); // sketch.noFill(); // sketch.strokeWeight(1); // sketch.bezier(p0.x, p0.y, p0.x, p1.y, p1.x, p1.y, p1.x, p1.y); // sketch.bezier(p1.x, p1.y, p2.x, p1.y, p2.x, p2.y, p2.x, p2.y); // sketch.bezier(p2.x, p2.y, p2.x, p0.y, p0.x, p0.y, p0.x, p0.y); ctx.strokeStyle = grd; ctx.lineWidth = stroke; ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.bezierCurveTo(p0.x, p1.y, p1.x, p1.y, p1.x, p1.y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.bezierCurveTo(p2.x, p1.y, p2.x, p2.y, p2.x, p2.y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(p2.x, p2.y); ctx.bezierCurveTo(p2.x, p0.y, p0.x, p0.y, p0.x, p0.y); ctx.stroke(); } })32:[] 2f:{"title":"#genuary 2021 ~ Monochrome gradients without lines","cells":[{"id":0,"value":"md`# #genuary 2021 ~ Monochrome gradients without lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`Genuary https://genuary2021.github.io/prompts
Promt 20 - No loops
Promt 27 - Monochrome gradients without lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"viewof input = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Main variables & functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"height = Math.floor(width * 3 / 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"triangle_width = Math.floor(height - margin);","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"triangle_height = Math.round(triangle_width * Math.sqrt(3) / 2) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"triangle = [{x: -1 * triangle_width / 2, y: triangle_height / 2},\n {x: 0, y: -1 * triangle_height / 2},\n {x: triangle_width / 2, y: triangle_height / 2}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript\n\nfunction randomIntFromInterval(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Import libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}