28:null 29:["$","title",null,{"children":"# Genuary2022, space | Observable Ambassadors | Observable"}] 2e:T1212,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 * 1.1); let angle_ring = 0; const rotation_rect = randomIntFromInterval(-90, 90); const n_rings = randomIntFromInterval(1, 3); const translations = randomIntFromInterval(0, (canvas_width * 2) / 3); // colors const colour = sketch.color(3, 3, 3, 25); var colour_start = sketch.color(199, 13, 60, 25); 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(); drawRects(); drawRings(); sketch.push(); sketch.translate(200, 200); drawMovingStar(); drawStars(); sketch.pop(); sketch.pop(); 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.fill(colors.bars); rects.forEach((d) => { sketch.rect(d.x, 0, d.w, canvas_height * 3); }); 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 * 0.5})` ); sketch.circle(nebulosa[0].pt_outer[i].x, nebulosa[0].pt_outer[i].y, 2); } // pt outer for (var i = 0; i < nebulosa[0].pts.length; i++) { sketch.fill(`rgba(${colors.stones}, ${nebulosa[0].pts[i].alpha})`); sketch.circle(nebulosa[0].pts[i].x, nebulosa[0].pts[i].y, 1); } sketch.fill(colors.lines); sketch.noStroke(); sketch.circle(nebulosa[0].pts[0].x, nebulosa[0].pts[0].y, 10); sketch.pop(); angle_ring = angle_ring + 0.1; } 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); } })2f:[] 2c:{"id":"7022190acb23385a","slug":"genuary2022-space","title":"# Genuary2022, space","thumbnail":"d9b7b00d4cde6b33d51faaea5ed7d1e3eb4cbe2a38a3d40b82e26a5663dd7f91","access_level":"public","create_time":"$D2022-01-01T19:40:34.225Z","update_time":"$D2022-01-01T20:58:15.209Z","view_time":null,"first_public_time":"$D2022-01-03T18:34:24.905Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024"},"version":86,"publish_version":86,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null}],"members":[{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"# Genuary2022, space","cells":[{"id":0,"value":"# # Genuary2022, space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"Prompts: https://genuary.art/prompts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof button = Inputs.button(\"New image\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Prompt inspired by the wonderful credits of the TV Show Foundation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"\n

Foundation Main Title from Imaginary Forces on Vimeo.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"colors = ({\n bkg: \"rgba(0, 0, 0, 0.75)\",\n stars_far: \"112, 25, 45\",\n stars_close: \"156, 36, 63\",\n stars_very_close: \"230, 199, 145\",\n white: \"255, 255, 255\",\n bars: \"rgba(199, 13, 60, 0.1)\",\n lines: \"rgba(254, 176, 85, 0.3)\",\n stones: \"16, 116, 133\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"canvas_height = width < 400 ? 600 : (width * 9) / 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"canvas_width = width < 400 ? (600 * 16) / 9 : width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"### Functions to create the shapes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"stars = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"nebulosa = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"rects = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"rings = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"outer_ring = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"moving_star = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"function createStars(r_1, r_2, color) {\n for (var i = 0; i < 200; 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function createNebula(r_center, sketch) {\n const random = randomIntFromInterval(9, 15);\n const n = sketch.map(random, 9, 15, 360, 360 * 6);\n const r_outer = r_center + random;\n\n const x = randomIntFromInterval(r_outer * 2.2, canvas_width - r_outer * 2.2);\n const y = randomIntFromInterval(r_outer * 2.2, canvas_height - r_outer * 2.2);\n\n const pt = createPoints(r_center, 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function createRects() {\n let this_width = randomIntFromInterval(100, 200);\n const w = this_width;\n const margin = 5;\n const this_n = randomIntFromInterval(5, 10);\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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;\n const rotation = randomIntFromInterval(0, 360);\n const r_2 = randomIntFromInterval(1, 2) / 4;\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"