Scribd
Upload
17 views

Lab07 PDF

Uploaded by

Harsimar Rattan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Lab07 PDF

Uploaded by

Harsimar Rattan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CS-3035

24/10/2024
Today

• Modifying SimpleKit
• Canvas & Drawing
Modifying SimpleKit

• You may want to do this for your project


• Some of you already have
• But uh oh, you can’t save your changes!?
• Never fear, we will tell you how
• … and post it online in much more detail
But How?
• Backup any changes you’ve made to SimpleKit
• Fork your own Simplekit from the class repo
• Update the .gitmodules link in your projects, and sync it
• git submodule sync --recursive
• Register the new submodule link to the main branch
• git checkout main from ./simplekit
• Add your changes back and push to your shiny new SK repo!
• Grab that update in your main repo
• git submodule update --remote from main repo
Canvas and drawing

• GUIs are essentially a drawing of shapes


• Layout Managers • rectangles, lines, text, fills, etc.
• Event Handling • We’ve been using pre-drawn complex shapes
• MVC • buttons, labels, etc.
• CRAP • Now we look at the fundamentals, using
• Drawing Drawing primitives and Graphics Context
(recall Tuesday’s lecture) In SimpleKit.
SimpleKit drawing
Switch from “imperative-mode” to “canvas-mode”:
1.Import now from canvas-mode
• import { startSimpleKit, setSKDrawCallback }
from "simplekit/canvas-mode";

2.Start SK (creates full page canvas)


• startSimpleKit();

3.Set the drawing callback & Call your drawing code


• setSKDrawCallback((gc) => {
gc.fillRect(0, 0, width, height);
drawpicture(gc)
});
SimpleKit drawable Objects
• But you don’t want to draw every shape from scratch
• So, we create “drawable objects” we can re-use.
• To do this we define an interface for an object that can be drawn

drawable.ts

export interface Drawable {


draw: (gc: CanvasRenderingContext2D) => void;
}
SimpleKit drawable Objects
• Implement that interface to create a drawable object class
export class MyShape implements Drawable {...
draw(gc: CanvasRenderingContext2D) {
// drawing commands go here}
}

• Create an object and draw it using the current GC


const myShape = new MyShape( ... )
myShape.draw(gc);

• Don’t forget to save and restore your state!


Activity 06 Part 1

• Draw a picture of a spooky pumpkin


• There’s a reference image in the imgs folder!
• Use objects of the provided drawing classes
• Also, some of the basic drawing methods
• Keep the painter’s algorithm in mind
• You don’t need to match the photo exactly

• I will check part 1 near the end of class


• If you finish early, good time to start part 2!
Activity 06 Part 2

• Now, make your own Drawable Objects!


• A bit more complex shapes, but same fundamentals
• Use them to create a lovely nighttime
scene like the example:
• You can design the picture as you’d like,
but make sure you get all the points in
the Requirements!

• Submit on GitHub (by Monday!)


And don’t forget the project!

You might also like