Structured Canvas Language™ - Writing Clock Cheese

Start - animated title graphics

TOPICS: Chaining alterations

Let's tilt the clock as the mouse sticks its head out.

First we need to set a timer so that action happens on cue. We'll add a 'wait' alteration to the 2nd speech bubble. After 5 seconds, run a routine called TitleMouse.

New code in red


create sprite from title.png as TitleImg
	where x=0 y=0
end

create sprite as Ring
	where
		center=340,340
end

create sprite from clockFace.png as ClockFace
	where center=270,260 x=330 y=310
end
create sprite from bigHand.png as BigHand
	where center=77,34 x=321 y=500
end
create sprite from smallHand.png as SmallHand
	where center=90,26 x=254 y=509
end

create sprite from title-speech-1.png as TitleSpeech1
	where center=350,0 x=0 y=445
	having alt=(sub
		create wait where delay=1000 completion=(sub
		create translation where x=368 easeout=30 speed=1200
		end) end)
end

create sprite from title-speech-2.png as TitleSpeech2
	where center=0,0 x=601 y=600
	having alt=(sub
		create wait where delay=3000 completion=(sub
		create translation where x=235 easeout=30 speed=1200
		end) end)
		alt=(sub
		create wait where delay=5000 completion=TitleMouse
		end)
end

create routine as Start
	launch TitleImg

	clone from Ring using original
	update sprite _clone where size=.5 and image="blueRing.png" and x=170 and y=120
	insert into _clone where alt=(sub
		create rotation where speed=-40
		end)

	clone from Ring using original
	update sprite _clone where size=.7 and image="redRing.png" and x=160 and y=590
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.6 and image="greenRing.png" and x=550 and y=350
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.2 and image="barRing.png" and x=500 and y=100
	insert into _clone where alt=(sub
		create rotation where speed=-40
		end)

	clone from Ring using original
	update sprite _clone where size=.35 and image="redRing.png" and x=200 and y=390
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.4 and image="greenRing.png" and x=550 and y=750
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	launch ClockFace
	launch SmallHand
	launch BigHand

	launch TitleSpeech1
	launch TitleSpeech2

end

// ********************************************************
// TITLE MOUSE HEAD
create routine as TitleMouse
	launch TitleMouseHead
end

create sprite from title-mouse-head.png as TitleMouseHead
	where center=111,98 x=300 y=300 size=0.1
	having alt=(sub
		create scale where rate=5 until=1 completion=(sub
		create routine
			insert into ClockFace where alt=(sub
				create rotation
					where distance=30 speed=200 completion=(sub
				create rotation
					where distance=11 speed=-150 completion=(sub
				create rotation
					where distance=15 speed=150
				end) end)
			end)
		end)
		end)
end

We made a big section of code for the mouse/clock title animation. The sprite called TitleMouseHead will coordinate the action. We'll launch TitleMouseHead at a small size=0.1 scale and use a scale alteration to enlarge it.

Once the mouse head is full size, we chain a routine to the scaling's completion event. This routine will tilt the clock face with a slight bounce. That routine looks complicated but it just inserts an alteration into a different sprite - in the case: ClockFace. The tilting and bounce of the clock face is done by calling 3 rotations sequentially.

Meta-info: I wondered for a while how to format SCL so that chained alterations are understandable and intuitive by a simple visual inspection. What you see here is the solution I chose:


insert into ClockFace where alt=(sub
	create rotation
		where distance=30 speed=200 completion=(sub
	create rotation
		where distance=11 speed=-150 completion=(sub
	create rotation
		where distance=15 speed=150
	end) end)
end)

Chaining alterations means to have one alteration or routine be activated by the previous alteration. This format allows the viewer to quickly establish the linear progression of events. Rotation, then a rotation, then a rotation, then no more alterations.

Check back soon for the next part or follow on us Twitter

March 11, 2016