{"id":365,"date":"2026-07-06T14:22:15","date_gmt":"2026-07-06T12:22:15","guid":{"rendered":"https:\/\/drea.fabsys.fr\/?page_id=365"},"modified":"2026-08-10T15:15:12","modified_gmt":"2026-08-10T13:15:12","slug":"musique-ambient-electonique-english","status":"publish","type":"page","link":"https:\/\/drea.fabsys.fr\/?page_id=365&lang=en","title":{"rendered":"Musique Ambient \u00c9lectonique &#8211; English"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-style-section-2 has-text-color has-background has-link-color wp-elements-072a188b8ac5c7ee24c02abaeb7fa923 is-layout-flex wp-container-core-columns-is-layout-36bfccab wp-block-columns-is-layout-flex is-style-section-2--1\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;color:#e8e4dc;background:linear-gradient(37deg,rgb(7,7,8) 22%,rgb(8,26,42) 74%,rgb(41,21,41) 100%);margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xl);padding-right:var(--wp--preset--spacing--2-xl);padding-bottom:var(--wp--preset--spacing--xl);padding-left:var(--wp--preset--spacing--2-xl);font-size:rem\">\n<div class=\"wp-block-column is-vertically-aligned-center l has-global-padding is-content-justification-center is-layout-constrained wp-container-core-column-is-layout-a9767a20 wp-block-column-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--2-xl);padding-right:var(--wp--preset--spacing--2-xl);padding-bottom:var(--wp--preset--spacing--2-xl);padding-left:var(--wp--preset--spacing--2-xl);flex-basis:35%\">\n<p class=\"has-text-color has-link-color has-raleway-font-family has-petit-font-size wp-elements-2b1b33915211d24d625baece2b929ab3 wp-block-paragraph\" style=\"color:#8ba8c4;line-height:3;text-transform:uppercase\">Neoclassical \u00b7 Ambient \u00b7 Electronic<\/p>\n\n\n\n<p class=\"is-style-default has-text-color has-link-color has-cormorant-garamond-font-family has-2-xl-font-size wp-elements-9dfdaca4585731bbe44caca9c61aab4d wp-block-paragraph\" style=\"color:#e8e4dc;line-height:1.5\">Christian<\/p>\n\n\n\n<p class=\"is-style-default has-accent-bleu-color has-text-color has-link-color has-cormorant-garamond-font-family has-2-xl-font-size wp-elements-c9807df82dbbf82c18dcd4da79f50963 wp-block-paragraph\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;color:#e8e4dc;line-height:1.5\"><em>Dr\u00e9a<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-default\" style=\"margin-top:var(--wp--preset--spacing--2-xs);margin-bottom:var(--wp--preset--spacing--2-xs)\"\/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-left is-style-default has-text-color has-link-color has-raleway-font-family has-normal-font-size wp-elements-2c635886b7be84f344e80063f12938ce wp-block-paragraph\" style=\"color:#e8e4dc\">Vast and contemplative sound spaces, built around the piano and analog synthesizers.<\/p>\n\n\n\n<div style=\"height:58px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-fond-principal-color has-accent-bleu-background-color has-text-color has-background has-link-color has-text-align-center wp-element-button\" href=\"https:\/\/drea.fabsys.fr\/?page_id=181\" style=\"border-width:2px\">Contact<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-35f06ea7 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"\/?page_id=191\">Catalog<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-style-default has-transparent-color has-transparent-background-color has-text-color has-background has-link-color wp-elements-c8dabb97147daabe894510cda1040f5d is-layout-flow wp-container-core-column-is-layout-82c4478a wp-block-column-is-layout-flow\" style=\"border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<canvas id=\"waveCanvas\" style=\"display:block;width:100%;background:transparent;\"><\/canvas>\r\n<script>\r\nconst canvas = document.getElementById('waveCanvas');\r\nconst ctx = canvas.getContext('2d');\r\n\r\nlet W, H, CY, FADE, waves, balls;\r\n\r\nfunction getCY() {\r\n  const sep = document.querySelector('.hr-drea');\r\n  const canvasEl = document.getElementById('waveCanvas');\r\n  if (!sep || !canvasEl) return H \/ 2;\r\n  const sepY = sep.getBoundingClientRect().top + sep.getBoundingClientRect().height \/ 2;\r\n  const canvasY = canvasEl.getBoundingClientRect().top;\r\n  const computed = sepY - canvasY;\r\n  return (computed > 0 && computed < H) ? computed : H \/ 2;\r\n}\r\n\r\nfunction getAvailableHeight() {\r\n  const adminBar = document.getElementById('wpadminbar');\r\n  const offset = adminBar ? adminBar.offsetHeight : 0;\r\n  return Math.max(400, window.innerHeight - offset);\r\n}\r\n\r\nfunction init() {\r\n  W    = canvas.offsetWidth || 680;\r\n  H    = getAvailableHeight();\r\n  CY   = getCY();\r\n  FADE = W * 0.18;\r\n  canvas.width  = W;\r\n  canvas.height = H;\r\n  canvas.style.height = H + 'px';\r\n  const AMP  = H * 0.30;\r\n  const BSIZ = Math.min(Math.sqrt(H) * 0.14, 3.2);\r\n  waves = [\r\n    { amp:AMP*0.92, freq:0.009,  speed:0.28, phase:0.00,         beatFreq:0.0007, beatSpeed:0.09, dir:-1, r:139,g:168,b:196, alpha:0.90, lw:1.3 },\r\n    { amp:AMP*0.80, freq:0.0085, speed:0.20, phase:Math.PI*0.5,  beatFreq:0.0009, beatSpeed:0.07, dir: 1, r: 90,g:127,b:168, alpha:0.55, lw:0.9 },\r\n    { amp:AMP*0.60, freq:0.011,  speed:0.34, phase:Math.PI*1.0,  beatFreq:0.0006, beatSpeed:0.11, dir:-1, r:168,g:192,b:215, alpha:0.65, lw:0.7 },\r\n    { amp:AMP*0.50, freq:0.0075, speed:0.24, phase:Math.PI*1.5,  beatFreq:0.0011, beatSpeed:0.08, dir: 1, r:110,g:145,b:180, alpha:0.50, lw:0.7 },\r\n    { amp:AMP*0.38, freq:0.013,  speed:0.42, phase:Math.PI*0.75, beatFreq:0.0008, beatSpeed:0.13, dir:-1, r:180,g:200,b:220, alpha:0.38, lw:0.5 }\r\n  ];\r\n  const prevX = balls ? balls.map(b => b.x) : null;\r\n  balls = [\r\n    { wi:0, x:W*0.06, vx:0.68, base:BSIZ*1.65, alpha:0.95, ps:1.6 },\r\n    { wi:0, x:W*0.32, vx:0.52, base:BSIZ*1.35, alpha:0.82, ps:1.9 },\r\n    { wi:0, x:W*0.60, vx:0.73, base:BSIZ*1.15, alpha:0.70, ps:2.1 },\r\n    { wi:0, x:W*0.87, vx:0.61, base:BSIZ*1.08, alpha:0.60, ps:1.7 },\r\n    { wi:1, x:W*0.18, vx:0.48, base:BSIZ*1.48, alpha:0.75, ps:1.4 },\r\n    { wi:1, x:W*0.50, vx:0.55, base:BSIZ*1.25, alpha:0.65, ps:1.8 },\r\n    { wi:1, x:W*0.78, vx:0.44, base:BSIZ*1.00, alpha:0.52, ps:2.0 },\r\n    { wi:1, x:W*0.95, vx:0.38, base:BSIZ*0.85, alpha:0.42, ps:1.5 },\r\n    { wi:2, x:W*0.12, vx:0.82, base:BSIZ*0.95, alpha:0.58, ps:2.2 },\r\n    { wi:2, x:W*0.43, vx:0.91, base:BSIZ*0.85, alpha:0.48, ps:1.9 },\r\n    { wi:3, x:W*0.26, vx:0.46, base:BSIZ*1.08, alpha:0.55, ps:1.6 },\r\n    { wi:3, x:W*0.69, vx:0.54, base:BSIZ*0.92, alpha:0.45, ps:1.8 },\r\n    { wi:4, x:W*0.37, vx:0.72, base:BSIZ*0.70, alpha:0.38, ps:2.0 },\r\n    { wi:4, x:W*0.75, vx:0.63, base:BSIZ*0.62, alpha:0.32, ps:1.7 }\r\n  ];\r\n  if (prevX) balls.forEach((b,i) => { b.x = prevX[i]; });\r\n}\r\n\r\nfunction smoothstep(t) { t=Math.max(0,Math.min(1,t)); return t*t*(3-2*t); }\r\nfunction envelope(x)   { return smoothstep(Math.min(x\/FADE,(W-x)\/FADE,1)); }\r\n\r\nfunction waveY(wave, x, t) {\r\n  const beat = 1 + 0.22 * Math.sin(wave.beatFreq * x - wave.beatSpeed * t);\r\n  const s    = Math.sin(wave.freq * x - wave.speed * t + wave.phase);\r\n  return CY + wave.dir * wave.amp * envelope(x) * beat * s;\r\n}\r\n\r\nfunction drawWave(wave, t) {\r\n  const grad = ctx.createLinearGradient(0,0,W,0);\r\n  grad.addColorStop(0,    `rgba(${wave.r},${wave.g},${wave.b},0)`);\r\n  grad.addColorStop(0.12, `rgba(${wave.r},${wave.g},${wave.b},${wave.alpha})`);\r\n  grad.addColorStop(0.50, `rgba(${wave.r},${wave.g},${wave.b},${wave.alpha})`);\r\n  grad.addColorStop(0.88, `rgba(${wave.r},${wave.g},${wave.b},${wave.alpha})`);\r\n  grad.addColorStop(1,    `rgba(${wave.r},${wave.g},${wave.b},0)`);\r\n  ctx.beginPath();\r\n  ctx.moveTo(0, CY);\r\n  for (let x=0; x<=W; x+=2) ctx.lineTo(x, waveY(wave,x,t));\r\n  ctx.strokeStyle=grad; ctx.lineWidth=wave.lw;\r\n  ctx.lineJoin='round'; ctx.lineCap='round';\r\n  ctx.stroke();\r\n}\r\n\r\nfunction drawBall(ball, t) {\r\n  const wave  = waves[ball.wi];\r\n  const y     = waveY(wave, ball.x, t);\r\n  const env   = envelope(ball.x);\r\n  if (env < 0.05) return;\r\n  const pulse = 1 + 0.18 * Math.sin(t * ball.ps + ball.x * 0.04);\r\n  const r     = ball.base * pulse;\r\n  const alpha = ball.alpha * env * (0.7 + 0.3 * Math.sin(t * 1.2));\r\n  const grad  = ctx.createRadialGradient(ball.x-r*0.35, y-r*0.35, 0, ball.x, y, r*2);\r\n  grad.addColorStop(0,   `rgba(255,255,255,${alpha*0.9})`);\r\n  grad.addColorStop(0.3, `rgba(210,232,248,${alpha*0.7})`);\r\n  grad.addColorStop(0.6, `rgba(139,168,196,${alpha*0.35})`);\r\n  grad.addColorStop(1,   `rgba(107,139,184,0)`);\r\n  ctx.beginPath();\r\n  ctx.arc(ball.x, y, r*1.8, 0, Math.PI*2);\r\n  ctx.fillStyle=grad; ctx.fill();\r\n  ctx.beginPath();\r\n  ctx.arc(ball.x-r*0.2, y-r*0.2, r*0.4, 0, Math.PI*2);\r\n  ctx.fillStyle=`rgba(255,255,255,${alpha*0.5})`; ctx.fill();\r\n}\r\n\r\nlet t0 = null;\r\nfunction frame(ts) {\r\n  if (!t0) t0 = ts;\r\n  const t = (ts - t0) \/ 1000;\r\n  ctx.clearRect(0,0,W,H);\r\n  ctx.beginPath(); ctx.moveTo(0,CY); ctx.lineTo(W,CY);\r\n  ctx.strokeStyle='rgba(139,168,196,0.05)'; ctx.lineWidth=0.3; ctx.stroke();\r\n  waves.forEach(w => drawWave(w, t));\r\n  balls.forEach(ball => {\r\n    ball.x += ball.vx;\r\n    if (ball.x > W+30) ball.x = -30;\r\n    drawBall(ball, t);\r\n  });\r\n  requestAnimationFrame(frame);\r\n}\r\n\r\nwindow.addEventListener('load', () => {\r\n  init();\r\n  requestAnimationFrame(frame);\r\n});\r\nwindow.addEventListener('resize', init);\r\n<\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Neoclassical \u00b7 Ambient \u00b7 Electronic Christian Dr\u00e9a Vast and contemplative sound spaces, built around the piano and analog synthesizers.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-365","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=\/wp\/v2\/pages\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=365"}],"version-history":[{"count":1,"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=\/wp\/v2\/pages\/365\/revisions"}],"predecessor-version":[{"id":578,"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=\/wp\/v2\/pages\/365\/revisions\/578"}],"wp:attachment":[{"href":"https:\/\/drea.fabsys.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}