Basic Styles - The Joy of Programming

The Joy of Programming

Getting Started

A gentle introduction to programming.

Hello, Joy!

Hello, Python!

Drawing Shapes

Styles

Add colors and styles to the shapes.

Basic Styles

The Web Colors

Creating Colors

Combining Shapes

Combine two or more shapes to create new shapes.

Combining Two Shapes

Combining Many Shapes

Transformations

Apply transformations like translate, rotate and scale to create new shapes.

Translate

Rotate

Scale

Repeat

Composition

Composing new shapes by defining functions.

Functions

Functional Composition

Repetition & Variation

Create repetition and variation in sketches using loops and conditionals.

The For Loop

Repeating Shapes

Thinking in Loops

Making Grids

Conditional Expressions

Generating

Write programs that generate a new drawings everytime they are run.

Randomness

Generative Art

More Generative Art

Basic Styles

Anand Chitipothu

Jun 19, 2021

So far, we've drawn different shapes, but all of them were just black and white. Wouldn't it be fun to add some colors and styles to our sketches?

In this lesson we'll learn how to specify the fill color, the stroke color and the stoke width.

The Fill Color

The optional argument fill can be used to specify the color to fill the shape with.

c = circle(fill='pink')
show(c)

Notice that the value 'pink' is put in quotes. That is because we are specifying the value of the color as a string.

There are many colors with standard names. These include black, white, gray, red, blue, green, yellow, maroon, purple, pink and many more.

We can also specify the fill as 'none', if we don't want to fill anything, which the default behavior.

One important thing to remember when using fill is that the order of drawing shapes matter.

c1 = circle(fill='pink')
c2 = circle(x=50, fill='purple')
show(c1, c2)

As you can see the purple circle is being drawn on top of the pink circle. The shapes are drawn in the order they are passed to the show function. Can you try to make the pink circle come on top of the purple circle?

The Stroke Color

The stroke color specifies the color used to draw the outline of a shape. It can be specified for a shape by using the optional argument stroke.

r = rectangle(stroke='red')
show(r)

We can also use stoke and fill together.

r = rectangle(stroke='red', fill='yellow')
show(r)

We can specify stroke as none to skip drawing the outline.

c1 = circle(r=150, fill='green', stroke='none')
c2 = circle(r=100, fill='blue', stroke='none')
c3 = circle(r=50, fill='red', stroke='none')
show(c1, c2, c3)

The Stroke Width

The width of the outline can be specified using the optional argument stroke_width.

c1 = circle(r=25, stroke_width=1)
c2 = circle(r=50, stroke_width=2)
c3 = circle(r=75, stroke_width=3)
c4 = circle(r=100, stroke_width=4)
c5 = circle(r=125, stroke_width=5)
show(c1, c2, c3, c4, c5)

Exercise 3.1: Red Black Squares

Draw red and black squares as shown in the figure below.

Exercise 3.2: Three Overlapping Squares

Draw three overlapping squares as shown in the figure below.

Please note that the squares do not have a border.

Exercise 3.3: Styled Polygon

Write a program to draw the polygon shown in the figure below.

Previous Lesson Next Lesson

Questions

HS Harikrishnan S

3 years ago

How to solve exercise 3.2

AC Adarsh c

3 years ago

r1 = rectangle(w=50,h=50,x=-25,y=-25,fill="green",stroke="none") r2 = rectangle(w=50,h=50,x=0,y=0,fill="red",stroke="none") r3 = rectangle(w=50,h=50,x=25,y=25,fill="blue",stroke="none") show(r1,r2,r3)

NK Nived k p

3 years ago

r1=rectangle(x=0,y=0,w=100,h=100,fill="blue") r2=rectangle(x=-50,y=-50,w=100,h=100,fill="red") r3=rectangle(x=-100,y=-100,w=100,h=100,fill="green") show(r1,r2,r3)

Want to discuss?

Post it here, our mentors will help you out.

ex 3.3

AN Abhinav N

3 years ago

how to fill colour in the polygon created?

Kalidas P

3 years ago

shape=polygon([p1,p2,p3,p1,p4,p5],fill="yellow",stroke="red")

AA Arjun Anil

3 years ago

p1 = point(x=0,y=0) p2 = point(x=-50,y=50) p3 = point(x=50,y=50) s1 = polygon([p1,p2,p3,],fill="yellow",stroke="red",stroke_width=2) p4 = point(x=0,y=0) p5 = point(x=-50,y=-50) p6 = point(x=50,y=-50) s2 = polygon([p4,p5,p6],fill="yellow",stroke="red",stroke_width=2) show(s1,s2)

Want to discuss?

Post it here, our mentors will help you out.

Exercise3.1

AK Akshay krishnan

3 years ago

How to draw individual squares and fill two different colours in it?how is it done??I could make it only one square.anyone??👋

FK Fenar khan

3 years ago

@Akshay krishnan here is the code r1=rectangle(x=-150,y=150,w=300,h=300,fill="red",stroke="none") r2=rectangle(x=150,y=150,w=300,h=300,fill="black",stroke="none") r3=rectangle(x=-150,y=-150,w=300,h=300,fill="black",stroke="none") r4=rectangle(x=150,y=-150,w=300,h=300,fill="red",stroke="none") show(r1,r2,r3,r4) to draw individual squares draw them seperately as r1,r2 etc or with any name and specify the width and height the main thing to be noted is to specify thier position as x and y coordinates so that they appear in different postions

S Shreyas

3 years ago

@Akshay Krishnan Here you go r1 = rectangle(x=-50,y=0,w=100, fill="red", stroke="none") r2 = rectangle(x=50,y=0,w=100, fill="black", stroke="none") r3 = rectangle(x=-50, y=-100,w=100, fill="black", stroke="none") r4 = rectangle(x=50, y=-100, w=100, fill="red", stroke="none") show(r1,r2,r3,r4)

Darshan Sajeev

3 years ago

@Akshay Krishnan s1=rectangle(x=75,y=75,w=150,h=150,fill="black",stroke="black") s2=rectangle(x=-75,y=75,w=150,h=150,fill="red",stroke="black") s3=rectangle(x=75,y=-75,w=150,h=150,fill="red",stroke="black") s4=rectangle(x=-75,y=-75,w=150,h=150,fill="black",stroke="black") show(s1,s2,s3,s4)

AA Ashana Ahad

3 years ago

@Akshay Krishnan r1=rectangle(x=25,y=25,w=50,h=50,fill="black") r2=rectangle(x=-25,y=25,w=50,h=50,fill="red") r3=rectangle(x=-25,y=-25,w=50,h=50,fill="black") r4=rectangle(x=25,y=-25,w=50,h=50,fill="red") show(r1,r2,r3,r4)

Want to discuss?

Post it here, our mentors will help you out.

AS ABHINAV SK

3 years ago

how to solvevexcercise 3.1

S Shehin

3 years ago

@ABHINAV SK r1=rectangle(x=-150,y=150,w=300,h=300,fill="red",stroke="none") r2=rectangle(x=150,y=150,w=300,h=300,fill="black",stroke="none") r3=rectangle(x=-150,y=-150,w=300,h=300,fill="black",stroke="none") r4=rectangle(x=150,y=-150,w=300,h=300,fill="red",stroke="none") show(r1,r2,r3,r4)

AS Aneef S

3 years ago

@ABHINAV SK c1 = rectangle(w=300, h=300, fill="black") c2 = rectangle(x=-75, y=75, w=150, h=150, fill="red") c3 = rectangle(x=75, y=-75, w=150, h=150, fill="red") show(c1,c2,c3)

Muhammed_ Riyas_M

3 years ago

how to solve excercise3.3

P Parthip.P.R

3 years ago

p1 = point(x=-100,y=100) p2 = point(x=100, y=100) p3 = point(x=-100, y=-100) p4 = point(x=100,y=-100) shape = polygon([p1, p2, p3,p4],fill='yellow',stroke='red',stroke_width=4) show(shape)

Want to discuss?

Post it here, our mentors will help you out.