Counting back from the edge

Challenge 8 of 12

Counting in from the right-hand edge is a take-away: width - 120 lands 120 short of it, whatever the window is doing. Both squares use that same sum.

Draw two CYAN squares 80 across on BLACK, both 120 in from the right, one 40 down and one 280 down.

Your code JavaScript

Draw two CYAN squares 80 across on BLACK, both 120 in from the right, one 40 down and one 280 down.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Code it yourself

Everything in this topic starts the same way: an empty editor. There is nothing to fill in, because there is nothing there — you write all of it.

That is a bigger step than it sounds, so the buttons above the editor do the fiddly part for you. Click everyFrame and the whole block appears, curly brackets and all, with the cursor already sitting inside it. Click circle and you get a circle line with numbers in it to change. Nothing a button gives you is ever the answer; it is a piece of the shape of the code, and the choosing is still yours.

Build the picture in the order it is painted. The background goes first, because it covers whatever was drawn before it. Then choose a colour, draw the shapes that colour, then choose the next one. A shape always comes out in whichever colour was chosen last, so a colour line in the wrong place is the commonest way for a picture to come out wrong.

Everything else here you already know: a variable to hold a number or a word, the four sums, joining words to numbers with a plus, and width and height for finding middles and quarters. Nothing new is being taught. What is new is that nobody is holding the pen.

Press Run early and often. One line at a time, checked as you go, is far easier than eight lines and a blank canvas — and when a name is misspelt the error panel says so, with the line number.