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

crystl

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. let w;
  5. let h;
  6.  
  7. onresize = e => {
  8.   w = innerWidth * 2
  9.   h = innerHeight * 2
  10.   canvas.width = w
  11.   canvas.height = h
  12.   canvas.style.width = (w / 2) + 'px'
  13.   canvas.style.height = (h / 2) + 'px'  
  14.   c.fillStyle = '#000'
  15.   c.fillRect(0, 0, w, h) 
  16. }
  17. onresize()
  18.  
  19. document.body.append(canvas)
  20. canvas.style.filter = 'contrast(2) brightness(1.2)'
  21.  
  22. class Crystal {
  23.   constructor() {
  24.     this.init()
  25.   }
  26.   init() {
  27.     this.x = w / 2
  28.     this.y = h * .7
  29.     this.rad = 250
  30.  
  31.     this.sides = 5
  32.     // + ~~(Math.random() * 5)
  33.     this.shrinkTime = 400 + Math.random() * 100 
  34.     this.t = Math.random() * 7
  35.     this.st = this.t;
  36.     this.step = (Math.PI * 2) / this.sides
  37.     this.time = 0
  38.     this.shrinkSpeed = 1.3 - Math.random() * .6
  39.     this.a = 0
  40.     this.ad = .05
  41.   }
  42.  
  43.   draw() { 
  44.  
  45.     this.a += (this.ad - this.a) / 150
  46.     c.lineWidth = 5
  47.     c.strokeStyle = `rgba(255, 255, 255, ${this.a})`
  48.     c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`
  49.     c.beginPath()
  50.  
  51.     for (let j = 0; j < 2; j++) {
  52.       this.time++
  53.       if (this.time > this.shrinkTime) {
  54.         this.rad -= this.shrinkSpeed
  55.         if (this.rad < 0) {
  56.           setTimeout(() => {
  57.             c.fillStyle = 'rgba(0, 0, 0, .02)'
  58.             c.fillRect(0, 0, w, h)
  59.             this.init()
  60.           }, 500)
  61.           return;
  62.         }
  63.       }
  64.       this.t = this.st
  65.       for (let i = 0; i < this.sides; i++) {
  66.         let p = {
  67.           x: this.rad * Math.cos(this.t),
  68.           y: this.rad * .6 * Math.sin(this.t)
  69.         }
  70.         this.t += this.step;
  71.         if (i === 0) {
  72.           c.moveTo(this.x + p.x, this.y + p.y)
  73.         } else {
  74.           c.lineTo(this.x + p.x, this.y + p.y)
  75.         }
  76.       }
  77.       c.closePath()
  78.       c.stroke() 
  79.       c.fill()
  80.  
  81.  
  82.       this.y -= 1
  83.     }
  84.   }
  85. }
  86.  
  87. let cryst = new Crystal()
  88.  
  89.  
  90. setInterval(() => {
  91.   for (let i = 0; i < 3; i++) cryst.draw()
  92. }, 16)

quick crystal for recent youtube short…

// 3d // canvas // gradients // graphics // hacks // isometric // javascript // math // random // speed-coded // speedcoding // 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

Recent

Archive

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