Happy Fun Coding

Coding Games

fill a closed polygon using current fill() options

bezier using control points cx0,cy0 and cx1,cy1 to x,y

draw line from current vertex to x, y

unproject from screen to world space

I suggest switching youtube into 480p mode by clicking on the bottom where it says 360p and then going into full screen mode.

draw image loaded from url at x, y with (w)idth and (h)eight sampling from sx,sy with width sw and height sh

size the canvas to (w)idth and (h)eight

Community programming — easy to learn from and help others.

arc center (x,y) with (r)adius from angle a0 to a1 with antiClock flag

linear gradient from (x0,y0) to (x1,y1)

x position of mouse (top left = 0,0)

draw a line from (x0,y0) to (x1,y1)

y position of mouse (top left = 0,0)

draw shadows at offset x,y with blur and color r,g,b

distance between points (x0,y0) and (x1,y1)

set text alignment leftrightcenter and baseline tophangingmiddlealphabeticbottom

add a color p percent along the gradient with color (r,g,b)

This panel lets you browse and add art that may be used by your programs.

draw a filled rect from x, y with (w)idth and (h)eight

returns down key or null. (Note, only one key can be down at a time)

vertical center of canvas (height / 2)

… a site to learn to program games in Javascript.

draw with a fill of (r)ed, (g)reen, (b)lue, and (a)lpha

radial gradient from (x0,y0) radius r0 to (x1,y1) radius r1

Tutorial 2: Variables and animation

For example, you might upload a picture call it ball and then use the image(ball) call on the code panel.

quadratic curve using control point cx, cy to x, y

draw image loaded from url at x, y with (w)idth and (h)eight

arc center (x,y) with (r)adius from angle a0-a1 with anticlockwise spin c (boolean)

set line stroke to (w)idth, (r)ed, (g)reen, (b)lue, and (a)lpha with cap=buttsquareround and join=roundbevelmiter

draw circle centered at x, y with radius r using fill

Note, these videos were taken with a previous version of Happy Fun Coding. The screen layout has changed somewhat. The main content of the videos is unchanged.

horizontal center od canvas (width / 2)

Embed your creations on your own web pages.

pathArc(x,y,r,a0,a1,antiClock=false)

stroke(w=1, r=0, g=0, b=0, a=1, cap=butt, join=miter)

Tutorial 13: An example putting it all together

draw circle centered at x, y with radius r using stroke

set the viewport to upper-left (x0,y0) and lower-right (x1,y1). Note, scales stroke appropriately.

close a path (forms a closed polygon)

draw a box outline from x, y with (w)idth and (h)eight

stroke along the path using current stroke() options

Hover over the name of a program to see a preview

Leave a Reply