happycoding.io Open in urlscan Pro
185.199.111.153  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Happy Coding
Tutorials Examples Blog About Forum
 * Tutorials
    * p5.js
       * Which Processing should I use?
       * Welcome to Coding
       * Calling Functions
       * Creating Variables
       * Using Variables
       * Creating Functions
       * If Statements
       * Animation
       * Input
       * For Loops
       * Arrays
       * Using Objects
       * Creating Classes
       * Array Functions
       * Images
       * From p5.js to Web Dev
       * Debugging
       * What's Next?
       * Editors
       * Hello World
       * Review
       * Libraries
       * Random
   
    * HTML
       * HTML
       * HTML Tags
       * CSS
       * CSS Layout
       * Accessibility
       * Hosting
       * GitHub Profile README
       * GitHub Pages
       * Jekyll
   
    * JavaScript
       * Calling JavaScript
       * Variables
       * Developer Tools
       * Creating Functions
       * Interactive HTML
       * If Statements
       * For Loops
       * Arrays
       * Objects
       * Libraries
       * React
       * Fetch
       * React JSX
       * Bootstrap
       * React Components
       * React State
       * AJAX and JSON
       * jQuery
   
    * Processing
       * Hour of Code
       * What is Programming?
       * Calling Functions
       * Using Variables
       * Creating Variables
       * Creating Functions
       * Debugging
       * If Statements
       * Animation
       * Input
       * For Loops
       * Arrays
       * Using Objects
       * Creating Classes
       * ArrayLists
       * Images
       * Libraries
       * Exporting Applications
       * Processing.js
       * What's Next?
       * Collision Detection
       * Simple Reference
   
    * Java
       * Java Setup
       * Hello World
       * Creating Classes
       * Errors
       * Inheritance
       * Swing
       * Libraries
       * Eclipse
       * Exporting Jar Files
       * Processing in Java
       * Unit Testing
   
    * Java Server
       * Tomcat Setup
       * Jetty Setup
       * Embedded Jetty
       * Anatomy of a Web App
       * Client / Server Communication
       * Servlets
       * JSP
       * Eclipse EE
       * Post Requests
       * Libraries
       * Sanitizing User Input
       * Sessions
       * Secure Password Storage
       * Hosting on AWS
       * Thread Safety
       * Hosting on Google App Engine
       * Databases
       * Uploading Files
       * Creating a REST API
       * Struts
   
    * Google Cloud
       * Setup
       * App Engine
       * Datastore
       * OAuth 2.0
       * Cloud Storage
       * Natural Language
       * Translation
       * Cloud Vision
       * Google Maps
       * Setup (Java 8)
       * App Engine (Java 8)
       * Datastore (Java 8)
       * Authentication (Java 8)
       * Blobstore (Java 8)
       * Migrating to Java 11
   
    * Android
       * Hello World
       * Anatomy of an Android App
       * Layouts
       * Activities
       * Storage
       * Custom Drawing
   
    * LibGDX
       * Setup
       * Hello World
       * User Input
       * Multiple Game Screens
       * Graphics
       * Images
       * Sound
       * Libraries
       * Pathfinding
   
    * How-To Guides
       * How to Learn Coding
       * How to Program
       * Build a Social App
       * How to Sell Digital Art Online
       * How to Interview

 * --------------------------------------------------------------------------------

 * Examples
    * p5.js
       * Rainbow
       * Blue Squares
       * Circles
       * Pig
       * Arcs
       * Pumpkin
       * Jack-o'-Lantern
       * Skull
       * Curved Grid
       * Accumulating Snow
       * Spider 🕷
       * Triangle Inset
       * Pumpkin (with Variables)
       * Random Pumpkin
       * Random Skull
       * Typography
       * drawHouse
       * drawTown
       * Christmas Tree
       * drawCity
       * Falling Line
       * Random Lines
       * Square Fill
       * Random Walker
       * Bouncing Line
       * Pumpkin Patch
       * Ghost 👻
       * Random Skulls
       * Flickering Jack-o'-Lantern
       * Clickable Text
       * Mouse Ripple
       * Grouchy Face
       * Warmer / Colder
       * Lines Silhouette
       * Wrong Lines
       * Vertical Gradient
       * Flower Grid
       * Spooky Text
       * Daily Greetings
       * Menorah
       * Fizz Buzz
       * Code Rocket
       * Falling Points
       * Oscillating Lines
       * Fading Grid
       * Pi Visualization
       * Year Percent
       * Numbers Station
       * Fireworks
       * Bonsai Tree
       * Loopers
       * Recursive Lines
       * Isometric Cubes
       * Ant Colony
       * Popping Circles
       * Campfire
       * Parallax Dots
       * Ghosts 👻👻👻
       * Planets
       * Genuary 19
       * Image Filter
       * Image Palette
       * Image Blender
       * Image Tiles
       * Pixel Painter
       * Pixel Swapper
       * Pixel Sorter
       * Clovers
       * Random Notes
   
    * HTML
       * Rainbow Logo
       * Asimov's Empire, Robot, and Foundation Series (CSS Tables)
       * Rainbow Divs
       * Personal Webpage (no styles)
       * Personal Webpage (light styles)
       * Personal Webpage (dark styles)
   
    * JavaScript
       * Etsy API
       * Game of Nim
       * Simple Weather Map
       * Personal Webpage (default Bootstrap styles)
       * Washington DC Tour
       * Feed the Ducks
       * Twelve Days of Christmas
       * Remove What's Happening
       * Personal Webpage (Cyborg Bootstrap theme)
   
    * Processing
       * Stack Overflow Data Visualization
       * Smiley Face
       * Flower
       * Heart
       * Smiley Face
       * Flower
       * Jack-o'-Lantern
       * Scaling Heart
       * Random Face
       * Random Jack-o'-Lantern
       * Random Faces
       * Glowing Jack-o'-Lantern
       * Turtle Graphics
       * Random Hearts
       * Good Morning
       * Random Walker
       * Worms
       * Vine
       * Random Colors
       * 2D Gradient
       * Bouncing Gradient
       * Corner Gradient
       * Radial Gradient
       * Random Circles
       * Letters
       * Spiral
       * Bouncing Balls
       * Random Walkers
       * Bouncing Balls
       * Random Walkers
       * Pumpkin Patch
       * Draggable Circle
       * Eyes
       * Flocking
       * Flyers
       * Flocking
       * Random Walkers
       * NES Filter
       * Mars Perseverance Image Colorizer
       * Random Piano
       * Notes Recorder
       * Random Synthesizer
   
    * Java
       * Higher Lower (Human Player)
       * Higher Lower (Random Computer Player)
       * Free Paycheck Calculator
       * Circle Button
       * Higher Lower
       * Swing Control Window
       * Processing Showcase
   
    * Java Server
       * Hello World: Static Website
       * Hello World: Command Line
       * Hello World: Maven
       * Hello World: Embedded Jetty (Command Line)
       * Hello World: Embedded Jetty (Maven)
       * Social Feed Website Part 1: Servlets
       * Social Feed Website Part 2: JSP
       * Social Feed Website Part 3: Post Requests
       * Social Feed Website Part 4: Sessions
       * Social Feed Website Part 5: Thread Safety
       * JSP Unix Time
       * JSP Date
       * JSP Coin Flipper
       * JSP Zoo
       * JSP Header
       * Servlet JSP Date
       * Servlet JSP Date (Hidden JSP)
       * Name Input
       * Name List
       * Name List - JSP
       * Name List - Fetch
       * Unsanitized User Input
       * Escaping User Input
   
    * Google Cloud
       * App Engine Hello World
       * Cloud Storage Hello World
       * Translation Standalone Hello World
       * Natural Language Standalone Hello World
       * Cloud Vision Standalone Hello World
       * Translation Web App Hello World
       * Natural Language Web App Hello World
       * Cloud Vision Web App Hello World
       * Shoutbox V1 (POST Requests)
       * Shoutbox V2 (Datastore)
       * Google Maps Marker
       * Google Maps Info Windows
       * Google Maps Hello World
       * Google Maps Tour

 * --------------------------------------------------------------------------------

 * 
 * Gallery
    * Music Visualization
    * Run Map
    * Movie Colors
    * Comic Book Colors
    * One Roomba
    * 46 Million Turkeys
    * #000000
    * The Rabbit Hole
    * The Next Generation (LD 46)
    * EmojAvoid (LD 47)
    * Spirals
    * Links

 * --------------------------------------------------------------------------------

 * 
 * Blog
    * Outro to Intro to Web Dev
    * Intro to Intro to Web Development
    * Happy New Year 2022
    * Ten Lessons from "Senior" Software Engineering
    * Deleting Facebook
    * Ludum Memories
    * The Rabbit Hole - LD48 Retrospective
    * Locus of Control and Learned Helplessness in Coding
    * Happy New Year 2021
    * Ten Years of Coding on the Internet
    * New and Improved p5.js and Processing Tutorials
    * Happy Coding is Built With
    * Google Cloud Java 11 Migration
    * My Quarantine
    * Black Lives Matter to Me
    * Ludum Dare 46 Retrospective
    * Feliz Left Nav-idad
    * My Year in Pixels 2019
    * What is Happy Coding?
    * Happy New Year 2020
    * The Subjective Side of Code
    * The Quadrilateral of Creativity
    * Debootstrapification
    * Checking My Privilege
    * Google Cloud Tutorials
    * The Stack Overflow Culture Wars
    * Happy Arting
    * The Power of Boredom
    * Happy New Year 2019
    * When Failing isn't Failure
    * Android and LibGDX Tutorials
    * Happy New Year
    * Server Tutorials
    * New Nav Font
    * Java Tutorials
    * Teaching Resources
    * JavaScript Tutorials
    * 100 Days of Code
    * Ludum Dare and Programming Without a Computer
    * Code Can Bring Us Together
    * Background Info
    * Tricks and Treats and Tags
    * Twitter Cards and Open Graph
    * Happy Commenting
    * The CodePen is Mightier than the Sword
    * Por Ejemplo
    * Hello World

 * --------------------------------------------------------------------------------

 * Forum

--------------------------------------------------------------------------------



--------------------------------------------------------------------------------


YOU CAN CODE.

Code is more than just ones and zeroes. Code is a creative process that lets you
express yourself, reach other people, generate art, and make stuff in new ways
every day.

Happy Coding is a collection of tutorials and examples, starting with the
fundamentals of creative coding and ending with advanced topics like server-side
coding and Android development.

It's also a community of people learning how to code. So if you're stuck on
something or have a question, come say "hello world" on the forum!

--------------------------------------------------------------------------------


INTRO TO CREATIVE CODING

Start with this meta-guide about learning with Happy Coding!

How to Learn Coding

How to teach yourself to code using Happy Coding.

Are you new to coding? Start here! Dive into creative coding with p5.js.

p5.js Tutorials

Learn how to create p5.js sketches!

Have some Java experience? Start with Processing!

Processing Tutorials

Learn how to program in Processing!

Not sure which is right for you? Read this first!


Which Processing should I use?

Should I use p5.js or Processing?

Check out all of the tutorials here!

--------------------------------------------------------------------------------


WHO ARE YOU?

Hi! I'm Kevin!

By day I'm a software engineer at Google Maps, and I also volunteer with
Software Product Sprint in my "20%" time.

By night I maintain this site, where I post coding tutorials, examples, and
other ramblings. I do all of this for free, in my spare time, just for fun. I'm
a person, not a company!

I support diversity in tech, and I believe I have a responsibility to open the
door for new coders- especially those who feel unwelcome, or who might not know
how fun it is. Happy Coding is my attempt to show new folks a path from the
fundamentals of coding, to every concept I've learned about so far.

I love talking about all of this stuff, so please come say "hello world" on the
forum!

--------------------------------------------------------------------------------


NEW VIDEOS

--------------------------------------------------------------------------------


NEW TUTORIALS

React State

Add data to your components.

React Components

Build your webpage out of components.

React JSX

Reactify your syntax with JSX.

React

Use React to build an interactive web app.

Accessibility

Make sure everyone can use your website.

Bootstrap

Create a website using Bootstrap.

--------------------------------------------------------------------------------


NEW EXAMPLES

Fizz Buzz

Fizz, Buzz, Fizz Buzz!

Planets

Show planets orbiting a sun

Warmer / Colder

Play a game of warmer / colder with your computer.

Clovers

Find the 4-leaf clover 🍀

Daily Greetings

Show a different message based on the time of day.

Code Rocket

Make a rocket from the whitespace in your code.

--------------------------------------------------------------------------------


LATEST BLOG POST


OUTRO TO INTRO TO WEB DEV - MAY 14, 2022

A retrospective on my first real teaching job.

(Read the rest here.)

--------------------------------------------------------------------------------


POPULAR BLOG POSTS

Locus of Control and Learned Helplessness in Coding

April 17, 2021

Locus of control, learned helplessness, burnout, and impostor syndrome.

Ten Years of Coding on the Internet

December 31, 2020

A look back on the last ten years, from One Program per Week, through Static
Void Games, to Happy Coding!

My Quarantine

September 26, 2020

Two years later, welcome to the new normal.

Checking My Privilege

June 9, 2019

Me, privileged? No way! (Yes way.)

The Power of Boredom

January 28, 2019

I'm very lazy. Here's how I use my boredom as a tool to trick myself into
putting in the work.

Hello World

July 28, 2016

The first blog post on the new site!

Read more blog posts here!

--------------------------------------------------------------------------------


HAPPY ARTING

You can also check out creative coding prints on the Happy Coding Etsy!

Hidden Figures All Frames Movie Poster
Finding Nemo All Frames Movie Poster
Random Walker Algorithm Art Print Poster - Black and White (Frantic)
Harry Potter Movie Poster - Full Bleed, Color Visualization, Nerdy Wall Art
Marvel Phase One Color Poster
Random Walker Algorithm Art Print Poster - Black and White

Question? Request? Just want to talk about coding? Come say hi on
forum.HappyCoding.io!

HappyCoding.io is open source. - How to contribute? - View or edit this page's
source on GitHub!

Like the background? Check out its source code or contribute your own
background!