2f:T12f2,p5((sketch) => { button; // restart variables stars.length = 0; nebulosa.length = 0; rects.length = 0; outer_ring.length = 0; const min_r = canvas_width > canvas_height ? canvas_height / 2 : canvas_width / 2; const r_center = randomIntFromInterval(min_r * 0.7, min_r); let angle_ring = 0; const rotation_rect = randomIntFromInterval(-90, 90); const n_rings = randomIntFromInterval(1, 4); const translations = randomIntFromInterval(0, (canvas_width * 2) / 3); // colors const colour = sketch.color(157, 117, 90, 0); var colour_start = sketch.color(157, 117, 90, 75); sketch.setup = function () { sketch.createCanvas(canvas_width, canvas_height); sketch.angleMode(sketch.DEGREES); // sketch.noLoop(); sketch.background(colors.bkg); createStars(0.5, 1, colors.white); createStars(0.5, 1, colors.white); createStars(0.5, 3, colors.stars_very_close); createStars(0.1, 0.25, colors.stars_close); createStars(0.25, 3, colors.stars_far); createNebula(r_center, sketch); createRects(); createMovingStar(); createRings(r_center, n_rings, nebulosa[0].x, nebulosa[0].y); }; sketch.draw = function () { const mouseFactorX = sketch.map(sketch.mouseX, 0, canvas_width, -20, 20); const mouseFactorY = sketch.map(sketch.mouseY, 0, canvas_height, -20, 20); sketch.background(colors.bkg); sketch.push(); sketch.translate(mouseFactorX, mouseFactorY); drawStars(); drawNebulosa(); drawRings(); drawRects(); // drawRings(); sketch.push(); sketch.translate(200, 200); drawMovingStar(); drawStars(); sketch.pop(); sketch.pop(); // sketch.translate(-mouseFactorX, -mouseFactorY); sketch.blendMode(sketch.SCREEN); gradient( 0, 0, canvas_width + 200, canvas_height + 200, colour_start, colour ); sketch.blendMode(sketch.BLEND); }; function drawStars() { stars.forEach((d) => { const alpha = d.alpha + randomIntFromInterval(1, 1.1) / 10; sketch.fill(`rgba(${d.color}, ${alpha})`); sketch.noStroke(); sketch.ellipse(d.x, d.y, d.diameter); }); } function drawRects() { sketch.push(); sketch.translate(translations, -400); sketch.rotate(rotation_rect); sketch.blendMode(sketch.SCREEN); sketch.fill(colors.bars); sketch.noStroke(); rects.forEach((d) => { gradient(d.x, 0, d.w, canvas_height * 3, colour_start, colour); // sketch.rect(d.x, 0, d.w, canvas_height * 3); }); sketch.blendMode(sketch.BLEND); sketch.pop(); } function drawRings() { sketch.strokeWeight(1); sketch.stroke(colors.lines); sketch.noFill(); outer_ring.forEach((d) => { sketch.push(); sketch.translate(nebulosa[0].x, nebulosa[0].y); sketch.rotate((-angle_ring + d.angle) * d.speed); sketch.ellipse(0, 0, d.r_2, d.r); sketch.pop(); }); } function drawNebulosa() { sketch.push(); sketch.translate(nebulosa[0].x, nebulosa[0].y); sketch.rotate(angle_ring); // pt outer for (var i = 0; i < nebulosa[0].pt_outer.length; i++) { sketch.fill( `rgba(${colors.stones}, ${nebulosa[0].pt_outer[i].alpha * 1})` ); const r = randomIntFromInterval(10, 20) / 10; sketch.circle(nebulosa[0].pt_outer[i].x, nebulosa[0].pt_outer[i].y, r); } // pt outer for (var i = 0; i < nebulosa[0].pts.length; i++) { const r = randomIntFromInterval(10, 20) / 10; sketch.fill(`rgba(${colors.stones}, ${nebulosa[0].pts[i].alpha})`); sketch.circle(nebulosa[0].pts[i].x, nebulosa[0].pts[i].y, r); } angle_ring = angle_ring + 0.1; sketch.pop(); } function drawMovingStar() { const r = sketch.map( moving_star.x, moving_star.x0, moving_star.x0 + 10 * moving_star.speed_x, 0.25, 2, true ); const alpha = sketch.map( moving_star.x, moving_star.x0 + 100 * moving_star.speed_x, moving_star.x0 + 300 * moving_star.speed_x, 1, 0.25, true ); sketch.fill(`rgba(0, 0, 255, ${alpha})`); sketch.ellipse(moving_star.x, moving_star.y, r / 2, r); if ( moving_star.x > moving_star.x0 + 1000 || moving_star.y > moving_star.y0 + 1000 ) { moving_star.x = moving_star.x0; moving_star.y = moving_star.y0; } else { moving_star.x = moving_star.x + moving_star.speed_x; moving_star.y = moving_star.y + moving_star.speed_y; } } function gradient(x, y, w, h, c1, c2) { var ctx = sketch.drawingContext; // global canvas context p5.js var var grd = ctx.createLinearGradient(x, y, x, y + h); grd.addColorStop(0.25, c1.toString()); grd.addColorStop(0.75, c2.toString()); ctx.fillStyle = grd; ctx.fillRect(x, y, w, h); } })30:[] 2d:{"title":"Genuary2022, space","cells":[{"id":0,"value":"# Genuary2022, space","pinned":false,"hidden":false,"mode":"md"},{"id":910,"value":"Prompts: https://genuary.art/prompts","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"viewof button = Inputs.button(\"New image\", {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"Prompt inspired by the wonderful credits of the TV Show Foundation. ","pinned":false,"hidden":false,"mode":"md"},{"id":931,"value":"\n

Foundation Main Title from Imaginary Forces on Vimeo.

","pinned":false,"hidden":false,"mode":"html"},{"id":18,"value":"colors = ({\n bkg: \"rgba(13, 15, 24, 0.75)\",\n stars_far: \"24, 40, 61\",\n stars_close: \"221, 148, 88\",\n stars_very_close: \"215, 214, 190\",\n white: \"255, 255, 255\",\n bars: \"rgba(97, 242, 214, 0.1)\",\n lines: \"rgba(247, 203, 170, 0.3)\",\n stones: \"110, 97, 250\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"canvas_height = width < 400 ? 600 : (width * 9) / 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"canvas_width = width < 400 ? (600 * 16) / 9 : width","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"### Functions to create the shapes","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"stars = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"nebulosa = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"rects = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"rings = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"outer_ring = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"moving_star = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"function createPoints(r_start, r_end, n) {\n let angle = 0;\n const step = (Math.PI / 360) * 2;\n const pt = [];\n\n for (var i = 0; i < n; i++) {\n const alpha = randomIntFromInterval(5, 100) / 100;\n const radius_x = randomIntFromInterval(r_start, r_end);\n const radius_y = randomIntFromInterval(r_start, r_end);\n const x = radius_x * Math.sin(angle);\n const y = radius_y * Math.cos(angle);\n pt.push({ x: x, y: y, alpha: alpha });\n\n //increase angle by step size\n angle = angle + step;\n }\n\n return pt;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"function createStars(r_1, r_2, color) {\n for (var i = 0; i < 100; i++) {\n const x = randomIntFromInterval(-200, canvas_width + 200);\n const y = randomIntFromInterval(-200, canvas_height + 200);\n const diameter = randomIntFromInterval(r_1, r_2);\n const alpha = randomIntFromInterval(0, 100) / 100;\n\n stars.push({\n x: x,\n y: y,\n diameter: diameter,\n alpha: alpha,\n color: color\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"function createNebula(r_center, sketch) {\n const random = randomIntFromInterval(5, 20);\n const n = sketch.map(random, 5, 20, 360, 360 * 3);\n const r_outer = r_center + random;\n\n const x = randomIntFromInterval(r_outer * 2.2, canvas_width - r_outer * 2.21);\n const y = randomIntFromInterval(\n r_outer * 2.2,\n canvas_height - r_outer * 2.21\n );\n\n const pt = createPoints(r_center * 0.1, r_center + 10, n);\n const pt_outer = createPoints(r_center - 10, r_outer, n);\n\n nebulosa.push({\n x: x,\n y: y,\n pts: pt,\n pt_outer: pt_outer\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"function createRects() {\n let this_width = randomIntFromInterval(75, 150);\n const w = this_width;\n const margin = 5;\n const this_n = randomIntFromInterval(10, 20);\n\n for (var i = 0; i < this_n; i++) {\n const this_w = randomIntFromInterval(5, this_width * 0.7);\n rects.push({ i: i, w: this_w, x: this_width + margin });\n this_width = this_width - this_w;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"createRings = function (r, n, x, y) {\n outer_ring.x = nebulosa.x;\n outer_ring.y = nebulosa.y;\n for (var i = 0; i < n; i++) {\n const radius = randomIntFromInterval(r * 2.15, r * 2.2 + 50);\n const speed = (i + 1) * 2;\n const rotation = randomIntFromInterval(270, 360);\n const r_2 = randomIntFromInterval(1, 3) / 10;\n outer_ring.push({\n x: x,\n y: y,\n r: radius,\n r_2: radius * r_2,\n angle: rotation,\n speed: speed\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"createMovingStar = function () {\n const x = randomIntFromInterval(-canvas_width / 2, canvas_width / 2);\n const y = randomIntFromInterval(-canvas_height / 2, canvas_height / 2);\n const speed = randomIntFromInterval(1, 3);\n let dir_x = randomIntFromInterval(0, 1);\n let dir_y = randomIntFromInterval(0, 1);\n\n dir_x = dir_x === 0 ? -1 : 1;\n dir_y = dir_y === 0 ? -1 : 1;\n\n moving_star.x0 = x;\n moving_star.x = x;\n moving_star.y0 = y;\n moving_star.y = y;\n moving_star.speed_x = speed * dir_x;\n moving_star.speed_y = speed * dir_y;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"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":903,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}