Making Animations with HTML Canvas

Based off of Mozilla’s nice introduction to basic animations on the web, I made as simple of an animation as I could using the Canvas element in HTML. It just contains a static, red rectangle, and a green sphere that slowly moves across the canvas. This should serve as a simple introduction for my students who want to make online games.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div id="gameBoard"></div>

  </body>

  <script type="text/javascript">

    canvas_width = 400;
    canvas_height = 300;

    //create canvas
    cvs = document.createElement("CANVAS");
    cvs.height = canvas_height;
    cvs.width = canvas_width;
    document.getElementById("gameBoard").append(cvs);
    ctx = cvs.getContext("2d");
    cx = 10;
    cy = 20;

    window.requestAnimationFrame(animate);

    function animate(){
      //clear the canvas
      ctx.clearRect(0, 0, canvas_width, canvas_height); // clear canvas

      //set location of the circle
      cx += .2;
      cy += .1;
      
      //recreate the canvas (every time)
      ctx.fillStyle = '#ff0000';
      rect = ctx.fillRect(0, 0, 20, 100);

      ctx.beginPath();
      circ = ctx.arc(cx, cy, 10, 0, 2 * Math.PI);
      //ctx.stroke();
      ctx.fillStyle = '#00ff00';
      ctx.fill();

      window.requestAnimationFrame(animate);

    }

  </script>
</html>

This uses plain HTML and Javascript, with no additional libraries.

Monopoly Power

Kate Cox has, perhaps one of the best articles I’ve read, summarizing a recent congressional report on the use of monopoly power by Amazon, Facebook, Google, and Apple. It is very readable and well written, bet contains great details about the report’s findings about how these companies abuse their position in the market.

I particularly like her summary of the purpose of antitrust law:

Antitrust law is instead concerned with what you did to become dominant and what you do with the outsized power that comes from being the biggest. If you have a 90 percent market share but it all came from natural growth and you deal fairly with other companies and with consumers, antitrust regulators are probably going to leave you alone. But if nascent startups can demonstrate you used your bulk to knock them out before they could become real competition, or if competitors can show you unfairly leveraged different parts of your business to squeeze them out? Those are problems.

Kate Cox in Arstechnica.

2020: Lofi Background Music/Art

One of my favorite pieces of art from this year, perhaps because it captures so much of the 2020 experience, and speaks to the way we try to cope during a pandemic.

Having to work from home for most of the first half of the year prompted the persuit of some mellow, non-distracting background music. This lead to the discovery of lofi hip hop channels on YouTube. One of the most popular of which (on the ChilledCow channels) has a simple lofi study girl animation. This image seems to have its roots in the wonderful, Japanese, Studo Ghibli movie Whisper of the Heart.

The image evolved into a meme, with the girl being relocated to different parts of the world–Bored Panda has a number of examples.

Switched on Pop has an excellent podcast episode on the Lofi Music phenomenon called Why lo-fi is the perfect background music. It delves into the history and economics, but focuses on the musical qualities–beats, semi-random elements, etc–that make it well situated for background music.

Apart from the visual and contextual appeal of the Lofi Cali Girl image at the top of this post, the biography of the artist is quite interesting in how it encapsulates an internet-era artistic trajectory. In addition to traditional drawing classes and a BA in Art she credits:

What helped me the most was actually being part of the deviantART community where I learned from other artists by observing their works, and the free tutorials they provided.

Yuumei, FAQ

Her extensive use of them has lead her to create and publish her own free tutorials.

Fortune Teller


Eve’s Fortune Teller

The student project that I keep revisiting the most is the Fortune Teller webpage created a couple years ago by former student Eve J.

You get a randomly generated fortune, and Eve built in enough combinations that I still see unique fortunes two years later.

I think what I like the most about it is how well it captures Eve’s “voice”. The style of the sentences and the little twists that pop up here and there. I can’t help reading this in her voice.

Eve is off in college right now, and gave me permission to post about the project, and to adapt the code as necessary, as long as I keep her informed (Hi Eve!).

I’ve ported the core of her program from JavaScript to PHP so you can now just get just the fortune telling text.


Eve’s Fortune Teller

https://soriki.com/eve/fortune/fortune.php?name=Doc

I’ve also, sort of, memefied the fortunes but putting the text over a background image, which is what you see at the top of the post.

https://soriki.com/eve/fortune-m/meme-fortune.html?name=Doc

As an experiment, I now have a version that makes the image as an svg:

I have another student now who’s interested in making a smart mirror, and this will make it easier to include fortunes into that project.

I’ve also posted the project on Github: https://github.com/lurbano/fortune

Racial Discrimination in Housing

Racial segregation in housing has a long history in the US. Prior to 1917, cities could (and did) pass laws banning sales of houses to black people in white-majority neighborhoods (interestingly, one argument in favor of the law was economic in that “such acquisitions by colored persons depreciate property owned in the neighborhood by white persons” Buchanan v. Warley, 245 U.S. 60 (1917)).

After the Buchanan v. Warley decision, legal segregation moved from the government rules to mortgage loan rules (redlining) and racially restrictive covenants, where the segregationist rules were written into home sales contracts. These were deemed unenforceable in Shelley v. Kraemer (1948), where the Supreme Court made the somewhat odd ruling that while these covenants were not unconstitutional under the Equal Protection Clause of the Fourteenth Amendment because they were agreements between private parties, enforcing them was unconstitutional because that would require action by the state. Of note: the house that precipitated this case is located in St. Louis.

Now that the government could not enforce racially restrictive rules, real estate agents took to blockbusting, where they took advantage of the fears of white residents to convince them that black homebuyers were moving into their neighborhood and that they should sell quickly and at a discount to escape the deleterious effects (including the aforementioned depreciation of home values). The agents would then resell the houses to black purchasers at above market prices.

White flight became a thing. Large portions of the white population migrated from the cities to the suburbs and exurbs as urban neighborhoods became more diverse.

Cutter et al. (1999) use data on house prices and attitudes towards integration to show that,

in the mid‐twentieth century, segregation was a product of collective actions taken by whites to exclude blacks from their neighborhoods. By 1990, the legal barriers enforcing segregation had been replaced by decentralized racism, where whites pay more than blacks to live in predominantly white areas.

Cutter et al. (1999). The Rise and Decline of the American Ghetto, in Journal of Political Economy
Vol. 107, No. 3 (June 1999), pp. 455-506. (full article)

Samuel Kye’s article on The persistence of white flight in middle-class suburbia (abstract only), uses 1990-2010 census data to show that it’s still ongoing. Kye controls for socioeconomic factors to show that this type of sorting remains, significantly, racially motivated. A couple of news reports on this study can be found here and here.

Lichter et al. (2015), did a more granular analysis of the same census data, and find that while cities are getting more diverse, macro-segregation, between different suburbs and exurbs is increasing. (News summary here).

Of consequence to education, Erica Wilson has a detailed article (2019) that, among other things, looks into how modern racial segregation in housing shapes, and is shaped by, parents’ preferences in choosing schools (and the closed social networks they use to make these choices).

Taking an ethnographic perspective, Elizabeth Korver-Glenn, has a very interesting paper on the role real estate agents play (much of it inadvertently or at least unintentionally) in maintaining segregation in Houston TX. Korver-Glenn sums up the research in an interview and brief on the No Jargon podcast The Hidden Listings.

Today, a key issue she finds is that real estate agents’ networks are racially segregated.

Most basically, I learned that the real estate agents tap their social networks as primary tools for generating business. Because those networks are racially structured, white real estate agents end up working primarily with White home buyers and sellers, while Black and Latino agents deal with more diverse sets of clients.

Korver-Glenn (2018). HOW AMERICA’S REAL ESTATE BROKERS STILL USE PRACTICES THAT REINFORCE RACIAL SEGREGATION, on Scholars Strategy Network.

Discriminatory effects are amplified because agents also often keep personal lists of houses that are not publicly available, so called ‘pocket lists’.

Additional References

Korver-Glenn’s research is published in Brokering Ties and Inequality: How White Real Estate Agents Recreate Advantage and Exclusion in Urban Housing Markets (abstract only).

David E. Bernstein argues the importance of the Buchanan v. Warley case in SCOTUSblog.

Quick Chemical Formulas

ChemEqn app.

While teaching chemistry this year, I’ve needed a quick way to write chemical formulas. The fastest thing to do is just write it out flat–sans sub and superscripts–like Na+, or CO2-. But that’s not pretty, and introduces another potential element that could confuse.

I found that you can use Lingojam’s sub and superscript generators to copy and paste the official UTF-8 characters for pretty much all the sub and superscripts I need for chemistry, but that takes a while to do.

So instead, I put together, just in time to write my finals, a little ChemEqn app that uses keyboard shortcuts to quickly substitute in the sub and superscripts as you type.

  • [Ctrl][number]: give you the number subscripted:
    • e.g. [Ctrl][2]: gives ₂
  • [Ctrl][Shift][number]: gives superscripts:
    • e.g. Ctrl][Shift][2]: gives ²
  • [Ctrl][Shift][+]: gives a positive charge (⁺)
  • [Ctrl][Shift][-]: gives a negative charge (⁻)
  • [Ctrl][>]: gives a forward arrow (→)
  • [Ctrl][<]: gives a backward arrow (←)
  • [Ctrl][/]: gives the double arrow (⇌)

The method is not perfect, since you still have to decide which comes first when you have both a sub and superscript after an element (O₃²⁻ for example). Another issue is that when I do [Ctrl][Shift][+] and [Ctrl][Shift][-] it zooms into and out of the browser window since we’re using the default zoom shortcuts, but that’s, at least for me, a minor inconvenience.

I do like the app since it still makes for quite readable formulas that can be easily copied and pasted almost anywhere without messing up since it only uses UTF-8 characters that are pretty standard across the web (and most computer programs).

WW2 in Real Time

TimeGhost is an utterly amazing project. They’re currently going through World War II, week by week, in real time. That is, every week they post a really good summary of what happened in the corresponding week of the war.

They’ve also done WWI in the same way and have ancillary channels about other conflicts, like the Cuban Missile Crisis Day by Day.

Definitely, worth a look.

What is Real? A Math Seminar (Prelude to Imaginary Numbers)

We had a really nice, thoughtful seminar discussion in Algebra II, with the simple question: What is real?

I did this as a lead into the topic of imaginary numbers (i = \sqrt{-1}).

The distinction between tangible and intangible objects came up pretty early in the discussion. That morphed pretty quickly with the realization that there were things that you can’t touch, like ideas and thoughts that were real as well, despite being non-physical.

Then they considered some of the more edge-wise cases, such as, are dragons real. After all, they never really existed, but are parts or real myths. That thought lead to the idea that anything that was thinkable–anything you could think of–was real.

I jumped in, near the end, to insert the idea that maybe there were things that were not real–that were imaginary–but could be useful. And that’s how I set up my lesson on imaginary numbers.

Because even if you can’t calculate the square root of -1 (no number times itself will give a negative number).

 \sqrt{-1} = ?

You can give it a name.

 i = \sqrt{-1}

And under certain circumstances:

 i \cdot i = i^2

You might find that imaginary numbers can combine to give you real numbers.

 i^2 = (\sqrt{-1} )^2

 i^2 = -1

Which means we can do a whole lot of calculations that were impossible before, making imaginary numbers extremely useful.

 \sqrt{-9} \cdot \sqrt{-4} = 3i \cdot 2i  = 6 \cdot i^2 = 6 \cdot (-1) = -6