2b:null 2c:["$","title",null,{"children":"Altered World *(Altered even further)* | Jose Jimenez | Observable"}] 31:T4df,{ var local_settings = use_settings; const context = DOM.context2d(width, local_settings.height); context.canvas.style.background = local_settings.background_color; context.lineWidth = local_settings.line_width; context.globalAlpha = local_settings.global_alpha; for (let px = 0; px < width; ++px) { for (let i = 0; i < local_settings.height / local_settings.sparseness; ++i) { let x = local_settings.start_x ? local_settings.start_x(px) : start_x(px); let y = local_settings.start_y ? local_settings.start_y(local_settings.height) : start_y(local_settings.height); let n = perlin.noise(noise_x(x), noise_y(y)); let hue = hue_n(n); let lightness = lightness_n(n); context.strokeStyle = `hsl(${hue}, 100%, ${lightness}%)`; context.beginPath(); context.moveTo(x, y); for (let m = 0; m < local_settings.length && y >= 0 && y <= local_settings.height; ++m) { n = perlin.noise(noise_x(x), noise_y(y)); context.lineTo(x += local_settings.delta_x_n ? local_settings.delta_x_n(n) : delta_x_n(n), y += local_settings.delta_y_n ? local_settings.delta_y_n(n) : delta_y_n(n)); } context.stroke(); } yield context.canvas; } }32:T69a,{ var local_settings = use_settings; const context = DOM.context2d(width, local_settings.height); context.canvas.style.background = local_settings.background_color; context.lineWidth = local_settings.line_width /2; context.globalAlpha = local_settings.global_alpha; for (let px = width-1; px > 0; --px) { for (let i = 0; i < local_settings.height / local_settings.sparseness; ++i) { var x; var y; var n; var hue; var lightness; x = local_settings.start_x ? local_settings.start_x(px) : start_x(px); y = local_settings.start_y ? local_settings.start_y(local_settings.height) : start_y(local_settings.height); x = x % width; y = y % height; context.moveTo(x,y); context.beginPath(); n = perlin.noise(noise_x(y), noise_y(x)); hue = hue_n(n *Math.random()) - n*200; lightness = lightness_n(n * .75) + n*15; var gradient=context.createLinearGradient(0,0,170,0); gradient.addColorStop("0",`hsl(${hue}, 50%, ${lightness}%)`); hue = hue_n(n *0.5) - n*300; lightness = lightness_n(n * .75) + n*15; gradient.addColorStop("0.5",`hsl(${hue}, 50%, ${lightness}%)`); hue = hue_n(n *0.5) - n*400; lightness = lightness_n(n * .75) + n*15; gradient.addColorStop("1.0",`hsl(${hue}, 50%, ${lightness}%)`); context.strokeStyle = gradient; context.fillStyle = `hsl(${hue_n(n)}, 25%, ${lightness_n(n)}%)` context.arc(x += delta_x_n(n), y += delta_y_n(n),(n * 25), 0, Math.PI * 2); context.fill(); } context.stroke(); yield context.canvas; } }33:T74f,{ var local_settings = use_settings; const context = DOM.context2d(width, local_settings.height); context.canvas.style.background = local_settings.background_color; context.lineWidth = local_settings.line_with * 20; context.globalAlpha = local_settings.global_alpha + .2; for (let px = width-1; px > 0; px -= 45) { for (let i = 0; i < local_settings.height / local_settings.sparseness / 2; ++i) { var x; var y; var n; var hue; var lightness; x = local_settings.start_x ? local_settings.start_x(px) : start_x(px); y = local_settings.start_y ? local_settings.start_y(local_settings.height) : start_y(local_settings.height); x = x % width; y = y % height; context.moveTo(x,y); context.beginPath(); n = perlin.noise(noise_x(y), noise_y(x)); hue = hue_n(n); lightness = lightness_n(n); context.strokeStyle = `hsl(${hue}, 100%, ${lightness}%)`; const delta_i = () => (Math.pow(n, -1 * (Math.random() * 3)+1)); const noisy_i = (i) =>i + (Math.random() > 0.5 ? -1 : 1)*(Math.pow(n, -1* (Math.random() * 2)+1))*5; context.moveTo(x + delta_i(), y-1 + delta_i()); context.bezierCurveTo(x + delta_i(), y-1 + delta_i(), x-2, y-7, x-12, y-7); context.bezierCurveTo(x-27, y-7, x-27, y+11, x-27, y+11); context.bezierCurveTo(x-27, y+20, x-17, y+31, x + 17 + delta_i(), y+40 + delta_i()); context.stroke(); context.beginPath(); context.moveTo(x+17 - delta_i(), y+40 - delta_i()); context.bezierCurveTo(x+17 - delta_i(), y+31 - delta_i(), x+27, y+20, x+27, y+11); context.bezierCurveTo(x+27, y+6,x+27, y-7, x+12, y-7); context.bezierCurveTo(x+5, y-7, x, y-1, noisy_i(x), noisy_i(y)); context.stroke(); } yield context.canvas; } }34:T8f4,pre_defined_options = ({ in_page_options: { label: 'Use Options selected in the Playground', use_page: true }, purple_haze: { label: 'Purple Haze', noise_octaves: 3, sparseness: 7, background_color: '#411e89', line_width: 0.5, global_alpha: 0.05, hsl_hue_power: 2, hsl_lightness_power: 3, period: 0.02, cosine_factor: 14, height: 600, length: 400 }, original: { label: 'From Forked Page', noise_octaves: 3, sparseness: 8, background_color: '#000000', line_width: 0.5, global_alpha: 0.05, hsl_hue_power: 1, hsl_lightness_power: 3, period: 0.02, cosine_factor: 14, height: 600, length: 400 }, green_ivy: { label: 'Green Ivy on Red Brick', sparseness: 8, noise_octaves: 3, background_color: '#6d2505', line_width: 0.5, global_alpha: 0.18, hsl_hue_power: 7, hsl_lightness_power: 4, period: 0.36, cosine_factor: 23, height: 600, length: 400 }, snowy_day: { label: 'Snowy Day', sparseness: 55, noise_octaves: 3, background_color: '#c8d2e4', line_width: 0.5, global_alpha: 0.04, hsl_hue_power: 14, hsl_lightness_power: 0, period: 0.36, cosine_factor: 23, height: 600, length: 400 }, brocade: { label: 'Brocade', sparseness: 10, noise_octaves: 4, background_color: '#ca85cb', line_width: 0.9, global_alpha: 0.44, hsl_hue_power: 4, hsl_lightness_power: 4, period: 0.01, cosine_factor: 16, height: 600, length: 400, }, valentines: { label: 'Valentine Doodle', sparseness: 21, noise_octaves: 7, background_color: '#fff2f8', line_width: 0.5, global_alpha: 0.32, hsl_hue_power: 1, hsl_lightness_power: 3, period: 0.03, cosine_factor: 14, height: 600, length: 400 }, blue_city: { label: 'Blue City', sparseness: 31, noise_octaves: 3, background_color: '#04e9f6', line_width: 0.5, global_alpha: 0.05, hsl_hue_power: 2, hsl_lightness_power: 3, period: 0.02, cosine_factor: 14, height: 600, length: 400 }, new_functions: { label: 'New Functions Playground', merge: true, start_x: alternate_start_x, start_y: alternate_start_y, delta_x_n: alternate_delta_x_n, delta_y_n: alternate_delta_y_n } })35:T4b5,class Noise { static lerp(t, a, b) { return a + t * (b - a); } static grad2d(i, x, y) { const v = (i & 1) === 0 ? x : y; return (i & 2) === 0 ? -v : v; } constructor(octaves = 1) { this.p = new Uint8Array(512); this.octaves = octaves; this.init(); } init() { for (let i = 0; i < 512; ++i) { this.p[i] = Math.random() * 256; } } noise2d(x2d, y2d) { const X = Math.floor(x2d) & 255; const Y = Math.floor(y2d) & 255; const x = x2d - Math.floor(x2d); const y = y2d - Math.floor(y2d); const fx = (3 - 2 * x) * x * x; const fy = (3 - 2 * y) * y * y; const p0 = this.p[X] + Y; const p1 = this.p[X + 1] + Y; return Noise.lerp( fy, Noise.lerp( fx, Noise.grad2d(this.p[p0], x, y), Noise.grad2d(this.p[p1], x - 1, y) ), Noise.lerp( fx, Noise.grad2d(this.p[p0 + 1], x, y - 1), Noise.grad2d(this.p[p1 + 1], x - 1, y - 1) ) ); } noise(x, y) { let e = 1, k = 1, s = 0; for (let i = 0; i < this.octaves; ++i) { e *= 0.5; s += e * (1 + this.noise2d(k * x, k * y)) / 2; k *= 2; } return s; } }36:T467,LICENSE = "mit" /* Copyright (c) 2018 by Gerard Ferrandez (https://codepen.io/ge1doot/pen/GQobbq) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */37:[] 2f:{"id":"84cf19ed839b83a0","slug":"altered-world-altered-even-further","title":"Altered World *(Altered even further)*","thumbnail":"9dfd9dc600fb1a19ea3c4351340ce7d6fc25e1ce1ed06202dd8fff613b126ae4","access_level":"public","create_time":"$D2018-02-06T18:53:44.368Z","update_time":"$D2018-02-12T18:55:40.564Z","view_time":null,"first_public_time":"$D2018-02-06T23:25:15.237Z","fork":{"id":"f20762f6cde93409","slug":"altered-world","title":"Altered World","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"11eff763c21b0530","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":"starter_2024"},"version":854,"publish_version":854,"role":null,"authored":false,"authors":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null}],"members":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Altered World *(Altered even further)*","cells":[{"id":0,"value":"md`# Altered World *(Altered even further)*\n\nAn adaptation of Gerard Ferrandez’s remarkable [*this alter world*](https://codepen.io/ge1doot/details/GQobbq/). Noise based on Ken Perlin’s [improved reference implementation](http://mrl.nyu.edu/~perlin/noise/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"md`## This notebook sets up ranges to allow a reader to play with the variables that impact the canvas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":831,"value":"md`### This version is unchanged aside from parameters passed in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"md`### This version paints with curves (really circles)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":835,"value":"md`### And this version is the *valentines* version ♡ ♡ ♡\n\nHere the noise controls where the hearts are placed, but also add some whimsy to the shape of the hearts. zoom in to see it in more detail.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"md`## Setup Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"md`### Predefined options\n\nSelect one of the options below to see a few variants.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"viewof selected_option = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"md`## Playground\n\nChange the variables below to see how they impact the canvas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"md`### Noise Octaves\n\nNoise can be added at different intensities. Really Big noise, Big noise, kinda big noise, noticable noise, middling noise, some noise, little noise, and I might have heard some noise. I found the [technical writeup by Adrian Biagioli](http://flafla2.github.io/2014/08/09/perlinnoise.html) really useful. It is a few years old, but the math doesn't change.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"viewof noise_octaves = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"noise_octaves","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"md`\n### Sparseness\n\nThe higher the number the more sparse the noise is.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"viewof sparseness = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"sparseness","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"md`### Background Color\n\n\nthe color for the background :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"viewof background_color = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"md`### Line Width\n\nThe width of the line for the canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"viewof line_width = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"line_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"md`### Global Alpha\n\nthe transparency to use for the canvas lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"viewof global_alpha = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"global_alpha","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"md`### HSL Hue Power\n\ncontributes to the Hue of the stroke used for the noise in the Hue, Saturation, Lightness scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"viewof hsl_hue_power = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"hsl_hue_power","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`### HSL Lightness Power\n\ncontributes to the lightness of the color used for the noise in the Hue, Saturation, Lightness scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"viewof hsl_lightness_power = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"hsl_lightness_power","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"md`### Period\n\nUsed in the perlin noise calculation. Numbers below 0.05 are smoother. Numbers above 0.30 tend to twinkle.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"viewof period = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"period","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"md`### Cosine Factor\n\nUsed to determine rotation of the noise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"viewof cosine_factor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"cosine_factor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"md`### standard functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"start_x = (px) => px","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"start_y = (py) => Math.random() * py","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"noise_x = (x) => x * use_settings.period","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"noise_y = (y) => y * use_settings.period","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"hue_n = (n) => -210 + (Math.pow(n,use_settings.hsl_hue_power)) * 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"lightness_n = (n) => 800 *(Math.pow(n,use_settings.hsl_lightness_power))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"delta_x_n = (n) => Math.cos(n * use_settings.cosine_factor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"delta_y_n = (n) => Math.sin(n * use_settings.cosine_factor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"md`### Alternate Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"alternate_start_x = (x) => (x * Math.random() * 25) % width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":525,"value":"alternate_start_y = (y) => ((Math.acos(Math.random())) * y) % height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"alternate_delta_x_n = (n) => Math.cos(Math.pow(n,3) * (Math.random() * length / 50 ) + 50)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"alternate_delta_y_n = (n) => Math.pow(n,2) * (Math.random() * length / 75 ) + 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"md`### Height and length of the canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"length = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"md`## Variable Storage and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"use_settings = override_settings.merge ? Object.assign(Object.assign({},current_settings), override_settings) : (override_settings.use_page ? current_settings : override_settings)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"current_settings = ({ sparseness: sparseness, noise_octaves: noise_octaves, background_color: background_color, line_width: line_width, global_alpha: global_alpha, hsl_hue_power: hsl_hue_power, hsl_lightness_power: hsl_lightness_power, period: period, cosine_factor: cosine_factor, height: height, length: length})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"override_settings = {\n return pre_defined_options[selected_option]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"perlin = new Noise(use_settings.noise_octaves)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"