)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Two Circles Explode

  1. const { random, min, sqrt, cos, sin, PI } = Math
  2. let TWO_PI = PI * 2
  3. let minSize
  4.  
  5. document.body.style.margin = 0
  6. document.body.style.background = 'black'
  7. const canvas = document.body.appendChild(
  8.   document.createElement('canvas')
  9. )
  10. const c = canvas.getContext('2d')
  11.  
  12. addEventListener('resize', resize)
  13. resize()
  14.  
  15. function resize() {
  16.   canvas.width = innerWidth
  17.   canvas.height = innerHeight
  18.   minSize = min(innerWidth, innerHeight)
  19.   clear()
  20. }
  21.  
  22. function clear() {
  23.   c.fillStyle = 'rgba(0, 0, 0, .15)'
  24.   c.fillRect(0, 0, innerWidth, innerHeight)
  25. }
  26.  
  27. let dots = []
  28. function dot({x, y, vx, vy, rad, grav = .15}) {
  29.   let sx = x
  30.   let sy = y
  31.   let svx = vx
  32.   let svy = vy
  33.   let intersected
  34.   let partsNum = 20
  35.   let parts = []
  36.   let delay = random() * 5
  37.   let time = 0
  38.  
  39.   dots.push(() => y > innerHeight)
  40.  
  41.   return {
  42.     step() {
  43.       time++
  44.       if (time < delay) return
  45.       if (intersected) {
  46.         for (let i = 0; i < partsNum; i++) {
  47.           parts[i].step()
  48.         }
  49.         return
  50.       }
  51.       x += vx
  52.       y += vy
  53.       vy += grav;
  54.       c.beginPath()
  55.       c.arc(x, y, rad(), 0, 7)
  56.       c.fill()
  57.     },
  58.     reset() {
  59.       x = sx;
  60.       y = sy;
  61.       vx = svx;
  62.       vy = svy;
  63.       intersected = false
  64.     },
  65.     hit() {
  66.       if (!intersected) {
  67.         partsNum = rad() / 3
  68.         for (let i = 0; i < partsNum; i++) {
  69.           let t = random() * TWO_PI
  70.           let r = 5 + random() * 5
  71.           let size = random() * 10
  72.  
  73.           parts.push(
  74.             dot({
  75.               x, y,
  76.               vx: r * cos(t),
  77.               vy: r * sin(t),
  78.               rad: () => size
  79.             })
  80.           )
  81.         }
  82.       }
  83.       intersected = true
  84.     },
  85.     get x() {
  86.       return x
  87.     },
  88.     get y() {
  89.       return y
  90.     }
  91.   }
  92. }
  93.  
  94. const bigRad = () => minSize * .14;
  95.  
  96. let leftDot
  97. let rightDot
  98.  
  99. function start() {
  100.  
  101.   rightDot = dot({
  102.     x: innerWidth, 
  103.     y: innerHeight / 2, 
  104.     vx: -innerWidth * .005, 
  105.     vy: -6, rad: bigRad
  106.   })
  107.  
  108.   leftDot = dot({
  109.     x: 0, 
  110.     y: innerHeight / 2, 
  111.     vx: innerWidth * .005, 
  112.     vy: -6, rad: bigRad
  113.   })
  114. }
  115. start()
  116.  
  117. function collide(a, b) {
  118.   const dx = a.x - b.x
  119.   const dy = a.y - b.y
  120.   const dist = sqrt(dx**2 + dy**2)
  121.   return dist <= bigRad() * 1.8
  122. }
  123.  
  124. function loop() {
  125.   let inc = 2
  126.  
  127.   clear()
  128.   c.fillStyle = 'white'
  129.   if (collide(leftDot, rightDot)) {
  130.  
  131.     leftDot.hit()
  132.     rightDot.hit()
  133.   }
  134.  
  135.   leftDot.step()
  136.   rightDot.step()
  137.  
  138.   dots.forEach(done => {
  139.     if (done()) inc++;
  140.   }) 
  141.  
  142.   if (dots.length > 2 && inc == dots.length)  {
  143.     dots = []
  144.     start()
  145.   }
  146.  
  147.   requestAnimationFrame(loop)
  148. }
  149. loop()

Two circles intersect and explode repeatedly… works at any browser size…

// animation // canvas // gradients

ES5 Canvas Thing

  1. var canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. ),
  4. c = canvas.getContext("2d"),
  5. size = canvas.width,
  6. quarterSize = size / 4,
  7. eightSize = size / 8,
  8. halfSize = size / 2,
  9. TWO_PI = Math.PI * 2,
  10. bombNum = 3,
  11. bombs = [],
  12. wanderers = {}, 
  13. wandererIndex = 0,
  14. particles = {},
  15. particleIndex = 0;
  16.  
  17. canvas.width = canvas.height = 300
  18.  
  19. c.fillStyle = "rgb(100,100,100)";
  20. c.fillRect(0,0,size,size);
  21.  
  22. function Particle(x, y){
  23.   this.x = x;
  24.   this.y = y;
  25.   var rad = 3 + Math.random() * 6;
  26.   var theta = Math.random() * TWO_PI;
  27.   this.vx = rad * Math.cos(theta);
  28.   this.vy = rad * Math.sin(theta);
  29.   this.alpha = 1;
  30.   particleIndex++;
  31.   this.index = particleIndex;
  32.   particles[this.index] = this;
  33. }
  34. Particle.prototype.draw = function(){
  35.   this.x += this.vx;
  36.   this.y += this.vy;
  37.   this.vx *= 0.9;
  38.   this.vy *= 0.9;
  39.   this.alpha -= 0.05;
  40.  
  41.   if (this.alpha <= 0){
  42.     this.alpha = 0;
  43.     delete particles[this.index];
  44.  
  45.   }
  46.  
  47.   c.fillStyle = "rgba(255,255,255,"+this.alpha+")";
  48.   c.beginPath();
  49.   c.arc(this.x, this.y, 1, 0, TWO_PI, false);
  50.   c.fill();
  51. };
  52.  
  53. function Bomb(){
  54.   this.x = quarterSize + Math.random() * halfSize;
  55.   this.y = quarterSize + Math.random() * halfSize;
  56.   this.radius = 15 + Math.random() * 20;
  57. }
  58. Bomb.prototype.draw = function(){
  59.   c.fillStyle = "#e64c25";
  60.   c.beginPath();
  61.   c.arc(this.x, this.y, this.radius, 0, TWO_PI, false);
  62.   c.fill();
  63. };
  64.  
  65. function Wanderer(x, y){
  66.   this.x = x;
  67.   this.y = y;
  68.   this.vx = Math.random() * 4 - 2;
  69.   this.vy = Math.random() * 4 - 2;
  70.   particleIndex++;
  71.   this.index = particleIndex;
  72.   particles[this.index] = this;
  73. }
  74. Wanderer.prototype.die = function(){
  75.   for (var j = 0; j < 4; j++){
  76.     new Particle(this.x, this.y);
  77.   }
  78.  
  79.   delete particles[this.index];
  80. };
  81. Wanderer.prototype.draw = function(){
  82.   this.x += this.vx;
  83.   this.y += this.vy;
  84.  
  85.   if (Math.random() < 0.1){
  86.     this.vx = Math.random() * 4 - 2;
  87.     this.vy = Math.random() * 4 - 2;
  88.   }
  89.  
  90.   if (this.x < 0) this.x = size;
  91.   if (this.x > size) this.x = 0;
  92.   if (this.y < 0) this.y = size;
  93.   if (this.y > size) this.y = 0;
  94.  
  95.   c.fillStyle = "white";
  96.   c.beginPath();
  97.   c.arc(this.x, this.y, 2, 0, TWO_PI, false);
  98.   c.closePath();
  99.   c.fill();
  100.  
  101.   for (var i = 0; i < bombNum; i++){
  102.     var bomb = bombs[i];
  103.     var dx = this.x - bomb.x;
  104.     var dy = this.y - bomb.y;
  105.     if (Math.sqrt(dx * dx + dy * dy) < bomb.radius){
  106.       this.die();
  107.     }
  108.   }
  109. };
  110.  
  111. for (var i = 0; i < bombNum; i++){
  112.   bombs[i] = new Bomb();
  113. }
  114.  
  115. new Wanderer(eightSize, eightSize); 
  116.  
  117. setInterval(function(){
  118.   c.fillStyle = "rgba(100,100,100, 0.2)";
  119.   c.fillRect(0,0,size,size);
  120.   c.strokeStyle = "white";
  121.   c.beginPath();
  122.   c.arc(eightSize, eightSize, 5, 0, TWO_PI, false);
  123.   c.stroke();
  124.  
  125.   if (Math.random() < 0.02){
  126.     new Wanderer(eightSize, eightSize); 
  127.   }
  128.  
  129.   for (var i = 0; i < bombNum; i++){
  130.     bombs[i].draw();
  131.   }
  132.  
  133.   for (var i in wanderers){
  134.     wanderers[i].draw(); 
  135.   }
  136.  
  137.   for (var i in particles){
  138.     particles[i].draw();
  139.   }
  140. }, 16);

An old es5 speedcoded thing…

// canvas // graphics // javascript

Cut Hole in Canvas (eraser)

  1. document.body.style.background = 'gray';
  2. const canvas = document.createElement('canvas');
  3. const c = canvas.getContext('2d');
  4.  
  5. canvas.width = 300;
  6. canvas.height = 300;
  7.  
  8. c.fillStyle='rgba(255, 0, 0, 0.8)'
  9. c.fillRect(0, 0, canvas.width, canvas.height);
  10.  
  11. c.globalCompositeOperation = 'destination-out';
  12. c.fillStyle = 'black';
  13. c.fillRect(100, 100, 150, 50);
  14.  
  15. document.body.appendChild(canvas);

destination-out is great for creating masks and eraser tools – things like that – in this case a 150×50 rectangle is cut out of a red background.

// canvas // color // graphics // tricks

Isometric Vases

  1.  
  2. const canvas = document.createElement`canvas`
  3. const c = canvas.getContext`2d`
  4.  
  5. document.body.appendChild(canvas)
  6. document.body.style.margin = 0
  7.  
  8. canvas.style.width = '100%'
  9. canvas.style.height = '100%'
  10.  
  11. const COLS = 10
  12. const ROWS = 10
  13. let space;
  14. let size;
  15. let time = 0
  16. const num = COLS * ROWS
  17. const mon = []
  18. for (let y = 0; y < COLS; y++) {
  19.   for (let x = 0; x < ROWS; x++) {
  20.     mon.push(monument())
  21.   }
  22. }
  23.  
  24. function reset(){
  25.   time = 0
  26.   c.fillStyle = '#ccc'
  27.   c.fillRect(0, 0, canvas.width, canvas.height)
  28. }
  29.  
  30. function resize() {
  31.   canvas.width = innerWidth * 2
  32.   canvas.height = innerHeight * 2
  33.  
  34.   reset()
  35. }
  36. resize()
  37. window.addEventListener('resize', resize)
  38.  
  39. function monument(x, y) {
  40.  
  41.   const s = Math.random()
  42.   let cl = 0;
  43.   let damp = Math.random() / 10;
  44.  
  45.   let rad = 10 + Math.random() * 
  46.   Math.random() * (innerWidth / 30)
  47.  
  48.   let skip = Math.random() < .5;
  49.   let o = Math.random() * 7
  50.   let shade = .01;
  51.   let radamp = 200 + Math.random() * 90
  52.   let life = 100 + Math.random() *  Math.random() *  Math.random() * 1200;
  53.   return (x, y) => { 
  54.       if (time === 0) { 
  55.       c.save()
  56.       c.strokeStyle = 'rgba(0, 0, 0, 0.2)'
  57.       c.translate(x - space / 2, y - space / 2)
  58.       c.strokeRect(0, 0, space, space)
  59.       c.restore()
  60.       }
  61.     if (skip) {
  62.  
  63.  
  64.     } else { 
  65.  
  66.       //rad += (0 - rad) / radamp
  67.       let teta = time * s * damp
  68.       let C = Math.sin(teta)
  69.       let C2 = Math.sin(time * s * damp + o);
  70.  
  71.       cl = C2 * 200 + 55;
  72.  
  73.       shade -= .0001;
  74.  
  75.       let col = `rgba(${cl}, ${cl}, ${cl}, 1)`
  76.       if (time > life) {
  77.         col = `rgba(155, 155, 155, .4)`
  78.         skip = true
  79.       }
  80.  
  81.     c.save()
  82.  
  83.       c.translate(x - time * s, y)
  84.       c.fillStyle = `rgba(0, 0, 0, ${shade})`
  85.       c.beginPath()
  86.       c.arc(0, 0, rad + rad * C, 0, 7)
  87.       c.fill()
  88.       c.restore();
  89.  
  90.       c.save()
  91.  
  92.       c.translate(x - time * s, y - time * s)
  93.       c.fillStyle = col
  94.       c.beginPath()
  95.       c.arc(0, 0, rad + rad * C, 0, 7)
  96.       c.fill()
  97.       c.restore();
  98.     }
  99.   }
  100. }
  101.  
  102. function draw() {
  103.   space = (innerWidth * 2) / COLS * .6;
  104.  
  105.   size = COLS * space
  106.  
  107.   c.save()
  108.   c.scale(1, .6)
  109.   c.translate(innerWidth, innerHeight * 2)
  110.   c.rotate(45 * Math.PI / 180)
  111.   c.translate(-size / 2, -size / 2)
  112.  
  113.   let inc = 0;
  114.   for (let y = 0; y < COLS; y++) {
  115.     for (let x = 0; x < ROWS; x++) {
  116.       mon[inc++](y * space, x * space)
  117.     }
  118.   }
  119.   c.restore()
  120.   time++
  121.   requestAnimationFrame(draw)
  122. }
  123.  
  124. draw();

Something I speed coded for genuary

// 3d // canvas // graphics // isometric

Non-perspective WebGL Texture

  1. (() => {
  2.   const m = new Float32Array([
  3.     0, 0, 0, 0, 
  4.     0, 0, 0, 0, 
  5.     0, 0, 0, 0, 
  6.     0, 0, 0, 0
  7.   ])
  8.  
  9.   const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);
  10.  
  11.   const vert = `
  12.     attribute vec3 vec;
  13.     uniform mat4 mat;
  14.     void main(void) {
  15.       gl_Position = mat * vec4(vec, 1.);
  16.       gl_PointSize = ${pointSize}.;
  17.     }
  18.   `
  19.  
  20.   const frag = `
  21.     #ifdef GL_ES
  22.     precision highp float;
  23.     #endif
  24.     void main(void) {
  25.       vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);
  26.       gl_FragColor = vec4(uv.x, 0., cos(uv.y * 60.), .4);
  27.     }
  28.   `
  29.  
  30.   document.body.style.background = '#333'
  31.   const gl = document.body
  32.     .appendChild(document.createElement('canvas'))
  33.     .getContext('webgl')
  34.  
  35.   Object.assign(gl.canvas.style, {
  36.     position: 'absolute',
  37.     left: '50%',
  38.     top: '50%',
  39.     transform: 'translate(-50%, -50%)',
  40.     outline: '1px solid gray'
  41.   })
  42.  
  43.   with (gl) {
  44.     const NUM = 3
  45.     const s = .5;
  46.     const verts = [
  47.       -s, -s, 0,
  48.        s, -s, 0,
  49.       -s,  s, 0,
  50.        s,  s, 0,
  51.     ]
  52.  
  53.     //  1.0,  1.0,
  54.     // -1.0,  1.0,
  55.     //  1.0, -1.0,
  56.     // -1.0, -1.0,
  57.  
  58.     // for (let i = 0; i < NUM; i++) {
  59.     //   verts.push(
  60.     //     Math.random() * 1 - 0.5,
  61.     //     Math.random() * 1 - 0.5,
  62.     //     Math.random() * 1 - 0.5
  63.     //   )
  64.     // }
  65.  
  66.     const leng = verts.length / 3
  67.     bindBuffer(ARRAY_BUFFER, createBuffer())
  68.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  69.  
  70.     const vs = createShader(VERTEX_SHADER)
  71.     shaderSource(vs, vert)
  72.     compileShader(vs)
  73.  
  74.     const fs = createShader(FRAGMENT_SHADER)
  75.     const sp = createProgram()
  76.  
  77.     shaderSource(fs, frag)
  78.     compileShader(fs)
  79.     attachShader(sp, vs)
  80.     attachShader(sp, fs)
  81.     linkProgram(sp)
  82.     useProgram(sp)
  83.  
  84.     const vec = getAttribLocation(sp, 'vec')
  85.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  86.     enableVertexAttribArray(vec)
  87.  
  88.     const matLoc = getUniformLocation(sp, 'mat')
  89.  
  90.     function rot(x, y, z) {
  91.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  92.  
  93.       const sinA = Math.sin(x)
  94.       const cosA = Math.cos(x)
  95.       const sinB = Math.sin(y)
  96.       const cosB = Math.cos(y)
  97.       const sinY = Math.sin(z)
  98.       const cosY = Math.cos(z)
  99.  
  100.       m[0] = cosA * cosB
  101.       m[1] = cosA * sinB * sinY - sinA * cosY
  102.       m[2] = cosA * sinB * cosY + sinA * sinY
  103.       m[3] = 0
  104.  
  105.       m[4] = sinA * cosB
  106.       m[5] = sinA * sinB * sinY + cosA * cosY
  107.       m[6] = sinA * sinB * cosY - cosA * sinY
  108.       m[7] = 0
  109.  
  110.       m[8] = -sinB
  111.       m[9] = cosB * sinY
  112.       m[10] = cosB * cosY
  113.       m[11] = m[12] = m[13] = 0
  114.       m[15] = 1
  115.  
  116.       uniformMatrix4fv(matLoc, false, m)
  117.     }
  118.  
  119.     onresize = () => {
  120.       const { canvas } = gl
  121.       const size = Math.min(innerWidth, innerHeight) - 20
  122.       canvas.width = canvas.height = size
  123.       viewport(0, 0, size, size)
  124.     }
  125.  
  126.     onresize()
  127.  
  128.     let rx = 0, ry = 0
  129.  
  130.     disable(DEPTH_TEST)
  131.     enable(BLEND)
  132.     blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  133.  
  134.     function loop() {
  135.       rot(rx += .01, ry += .01, 0)
  136.  
  137.       clearColor(0, 0, 0, 1)
  138.       clear(COLOR_BUFFER_BIT)
  139.       drawArrays(TRIANGLE_STRIP, 0, leng)
  140.       window.requestAnimationFrame(loop)
  141.     }
  142.     loop()
  143.   }
  144. })()

Forked from a previous example – toying with the idea of doing some kind of complex low level webgl… not sure, might end up using THREE… Please excuse some of the dead code here…

// canvas // webgl
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}