Skip to main content

ed.agoff.net

a personal blog

Search This Blog

Posts

Circles

February 27, 2024

html javascript

+

Women and Bears

February 21, 2024

+

I smile because I have no idea what's going on

February 19, 2024

Zig-zag Square

February 18, 2024

math

+

Four Squares

February 18, 2024

math

+

Triangle in a Square

February 18, 2024

math

+

Two Squares

February 16, 2024

math

+

Dinner at Downtown Whirled Pies

February 07, 2024

food

+

5 Questions and a Secret

January 31, 2024

Nic's happy diaper change

November 01, 1997

+

Alex's first taste of apple sauce

February 05, 1994

+

Archive

November 20241
April 20241
March 20243
February 20248
January 20241
November 19971
February 19941

Topics

babies
bears
food
html
javascript
math

Pages

Home
Notes

Popular Posts

Bubbles

More HTML/JavaScript graphics experimentation, this time with SVG animation . Click/tap and drag in the frame below. Source: <svg id = "mySvg" viewBox = "0 0 400 300" style = "border: solid 1px black; width:100%; aspect-ratio: 4/3" ></svg> <script> var svg = document.getElementById( "mySvg" ), svgViewRect, clientViewRect, // svg and client coordinates currMouseDown = null , mouseDownIdleID = 0 ; const initialMouseTimeout = 250 , fasterMouseTimeout = 25 ; function animate(element, attrName, to, dur, repeatCount, fill = null ) { // animates SVG element attribute from its current value towards "to" value over timespan "dur" var animation = document.createElementNS( "http://www.w3.org/2000/svg" , "animate" ); animation.setAttribu...

Circles

An HTML / JavaScript exploration of the canvas element and touch and mouse event listeners. Touch or click and drag in frame below! Source: <script id = "myScript" > thisScript = document.getElementById( "myScript" ); class CanvasClass { onscreenCanvas; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas offscreenCanvas; // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas mouseDownHere = false ; // indicates whether mouseDown has been started within canvas constructor (width = 400 , height = 300 ) { this .onscreenCanvas = document.createElement( "canvas" ); Object.assign( this .onscreenCanvas, { width: width, height: height, style: "display: block; border: solid 1px black; width: 100%; aspe...

Fallout Premier on Amazon Prime Video

Coming tomorrow!

Powered by Blogger