Snippet Zone

Object Getter Setter

```
const book = {
```
```
  get name() { 
```
```
    return this.title ?? 'no title'; 
```
```
  },
```
```
  set name(val) { 
```
```
    document.
```
```
      body.
```

      innerHTML += `name changed to "${val}"<br>`;

```
    this.title = val; 
```
```
  }
```
```
};
```
```
 
```
```
console.log(book.name);
```
```
book.name = 'Math Book';
```
```
book.name = 'JavaScript Book';
```

Getter setter syntax for Object literal.

October 3, 2021

// javascript // objects

Ellipse Path SVG

```
const ellipse = (cx, cy, rx, ry) => { 
```
```
  if (ry == null) ry = rx;
```
```
  return `
```
```
    M${cx-rx} ${cy}a${rx} ${ry} 
```
```
    0 1 0 ${rx*2} 0a${rx},${ry} 
```
```
    0 1 0 -${rx*2},0`
```
```
}
```
```
 
```
```
const svg = `
```

<svg style="overflow:hidden;stroke:black;fill:none">

```
  <path d="${ellipse(80, 50, 30)}" />
```

  <path d="${ellipse(80, 120, 60, 20)}" />

  <path d="${ellipse(150, 60, 20, 40)}" />

```
</svg>`
```
```
 
```
```
document.body.innerHTML = svg;
```

Draw an ellipse inside an svg path. I saw this method over on this stackoverflow thread at some point and tweaked it a little bit. Very nice simple solution from user yogi

October 2, 2021

// javascript // strings // svg // tricks

Raphaël was my first deep dive into SVG. Back then, only VML was supported in older IE versions, so using Raphaël was key for tons of commercial work I did (Raphaël generated VML as well as SVG). This snippet is the Catmull Rom code from Raphaël. I’m pretty sure I didn’t know what a Catmull Rom spline was until I found out that using `R` in a path wasn’t supported natively in SVG… and was actually some magic thing that existed in Raphaël alone.

October 1, 2021

// curves // javascript // math // svg

John Wallis Pi (Wallis Product)

```
/*
```

It was always my affectation even from a child, in all pieces

of Learning or Knowledge, not merely to learn by rote, which

is soon forgotten, but to know the grounds or reasons of what

I learn; to inform my Judgement, as well as furnish my Memory;

and thereby, make a better Impression on both.

```
 
```
```
- John Wallis
```
```
 
```
```
*/
```
```
 
```
```
i = c = 1
```
```
setInterval(_ => {
```
```
  for (j = 0; j < 1000; j++, i += .5)
```

    c *= (~~i * 2) / (~~(i - .5) * 2 + 1)

```
 
```

  console.log(c * 2 + '\n' + 3.141592653589793)

```
}, 16);
```

π = 2

2 / 1

2 / 3

4 / 3

4 / 5

6 / 5

6 / 7

8 / 7

8 / 9

· · · ·

I was at an old book store a few days ago and randomly picked up History of Mathematics Vol. I by David Eugene Smith 1923 for $7.50. After enjoying flipping around and reading different parts, I pulled up Wikipedia to read more about the author… From there I found some interesting quotes from talking about John Wallis – when I saw the Wallis Product I was inspired to write a quick snippet.

September 30, 2021

// golfed // javascript // math // pi

Extremely Golfed Canvas

```
d = document
```
```
b = d.body
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: 100, height: 100 })

```
  ).getContext`2d`) {
```
```
 
```
```
  fillStyle = 'red'
```
```
  fillRect(5, 5, 20, 20)
```
```
}
```
```
 
```
```
// slightly more complex example
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: 200, height: 200 })

```
  ).getContext`2d`) {
```
```
 
```

  fillStyle = '#555', strokeStyle = '#fff', fillRect(0, 0, 200, 200)

```
  for (i = 0; i < 10; i++) 
```

    beginPath(), moveTo(20, 20), lineTo(i * 20 + 10, 190), stroke()

```
}
```

Easy way to write canvas stuff with very little boilerplate code. with doesn’t work in strict mode.

September 29, 2021

// canvas // codegolf // javascript

Older Posts

Newer Posts

Object Getter Setter

Ellipse Path SVG

Catmull Rom to Bezier SVG

John Wallis Pi (Wallis Product)

Extremely Golfed Canvas

Recent

Archive