Issuu

DEMO

SECONDARY EDUCATION

Technology, Programming and Robotics M.P. Blázquez, I. Hoyos, J. Santos

T e a c h e r’s G u i d e

Building

Blocks

Building Blocks is an educational project of Anaya Educación for Secondary Education with the participation of: M. P. Blázquez, I. Hoyos, J. Santos, Danny Latimer, Hannah Peat, Karen Piper, Begoña Fuente Larrazabal, Sara Gascón Martín, Verónica Moro, Paloma Rodríguez and Denise Suárez. The following people have worked on this book:

Editorial team: Karen Piper and Lidia Quiles Design, technical drawings and maps: Patricia G. Serrano, Juan Carlos Quignon and Julio Vázquez Illustration: Pablo Vázquez Layout: DiScript and Nieves Merino Translation: Montero Language Services PICTURE EDITING: Olga Sayans PHOTOGRAPHS: Age Fotostock (AMELIE-BENOIST/BSIP, Glowimages RM, JAMES KING HOL-MES/SPL, Javier Larrea, Science Museum/SSPL, Science Source, WLADIMIR BULGAR/SPL, Xinhua/POOL/Fabrice COFFRINI), Alamy/Cordon Press (JohanH, ZUMA Press, Inc.), Album Archivo Fotográfico (Granger, NYC), Archivo Anaya (Cosano, P.; Martín, J. A.; Osuna, J.; Peñue-la Py, E.), Dreamstime (Fottom, Vladimir Zhupanenko, Zuzana Randlova), Gettyimages (Carol Yepes, Kim Kulish), Intel Corporation, iStock/Gettyimages (AlexLMX, Besjunior, bigtunaonline, Bogdanhoda, Chiradech, farakos, Grassetto, matejmo, Olesia Kononenko, PhanuwatNandee, Pixfly, scyther5, solarseven, StockRocket, vectorikart), 123rf (Anake Seenadee, EDUARD BON-NIN TURINA, Inna Vlasova, Jacek Nowak, rawpixel, Renjith Krishnan, scanrail, tovovan, valex113, Yulia Kireeva, zmiter, Олександр Федюк)

Academic and Professional Orientation: created in conjunction with Fundación Bertelsmann.

Coordinator: Juan José Juárez Calvo. Expert collaborators: Sara Lozano Santiago, Belén Pérez Castro and Pilar Vázquez Hernández

Commitment to Sustainable Development Goals Our publications contain carefully selected content, illustrations and language to comply with non-discrimination on the grounds of gender, culture or opinion. Grupo Anaya considers social and environmental responsibility to be one of its fundamental values. For this reason, we are committed to: · continually improving our contents and materials related to the environment. · reducing our carbon emissions. · using natural resources responsibly. · making sure that our activity has no negative consequences for endangered forests. These commitments, among others, mean that 100 % of the paper used in our books has the PEFC label.

Important information: The activities proposed in this book should be completed in a separate notebook or on sheets of paper, not in the book itself. The links to webpages which appear in this book have been checked before printing. The publisher cannot be liable for any changes or modifications which occur after the date of publication.

© GRUPO ANAYA, S.A., 2021 - C/ Juan Ignacio Luca de Tena, 15 - 28027 Madrid. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior permission of the publishers.

CONTENTS Building blocks and the project keys ...........................................................................

Our project .....................................................................................................................................

1. Computer-aided design ..................................................................................................

Units

2. Electronics ............................................................................................................................... 28 3. Control and Robotics ....................................................................................................... 38 4. 3D Printing .............................................................................................................................. 60 5. Operating systems, networks, security applications and the law ............................................................................................................................. 82 6. Web design, development and distribution ..................................................... 102

g n i d l i u b

blocks

g n i n r a e l p ee k o t A project that is rooted in skills-based learning and the development of student commitment within the realities of available time

Building Blocks is a new skills-based approach, with the utmost curricular rigour and a coherent and coordinated content sequence in the areas throughout the entire educational stage. It promotes linguistic communication skills, which are essential for assessing the knowledge that allows us to understand the world around us and develop live social awareness. Building Blocks offers the possibility of incorporating active methodologies, using cooperative learning and thinking strategies, promoting personal and social skills for emotion management and the development of entrepreneurship in a flexible way. It attends to academic and professional orientation, whilst embracing equality and inclusion, all within the framework of the Sustainable Development Goals that we must keep focused on over the coming years.

Project keys SDG

SDG Commitment Establishes

the Sustainable Development Goals as a framework for learning that prepares students towards committed citizenship.

Developing thinking Proposes

strategies to stimulate reflection, “learning how to think” and the development of critical and creative thinking habits.

Cooperative learning Offers techniques to develop the skills that allow us to work together and efficiently in a diverse society.

Emotional education Offers emotional management tools to face the challenges of this complex educational stage.

Enterprising culture

Promotes entrepreneurial thinking in its three dimensions: personal, social and productive.

ICT Integrates the use of ICT in the learning process itself in a responsible, intelligent and ethical way.

Academic and professional orientation Helps students to get to know themselves, to understand the environment and to make decisions that allow them to confidently enter the labour market.

Assessment Incorporates strategies that allow students to participate in the assessment of their learning, analysing “what they have learned” and “how they have learned it”.

Linguistic Plan Develops communication skills both written and spoken and the tools needed to describe, present, instruct, comment, defend or refute ideas...

OUR PROJECT Technology, Programming and Robotics

Buildin

THE STUDENT’S BOOKs

Blocks

Technological development is one of the fundamental bases of today’s world. In this context, the content and activities of the book are aimed at training citizens who are capable of making responsible decisions related to technological processes.

SECONDARY EDUCATION

learning to keep

Go to the

RESOURCE BANK

that accompanies this book.

www.anayaeducacion.es

I S B N 978-84-698-7369-4

788469 873694

ION

o gy, Technoml ming a Pro gr b otics and Ro ázq uez M. P. Bl

os, , I. Hoy

J. San tos

Building

Blocks

SECONDARY EDUCATION

Technology, Programming and Robotics

The book uses a skills-based methodology that is adjusted to the curricular development of our community, allowing us to express to our commitment to the Sustainable Development Goals, while enabling g Buildin the growth of the skills and aptitudes demanded Blocks by learning to keep our increasingly diverse society. Go to the

RESOURCE BANK

that accompanies this book.

I S B N 978-84-698-7373-1

788469 873731

S EC O N D A

AT RY EDUC

ION

o gy, Technoml ming Pro gra b otics and Ro ázq uez M. P. Bl

3100553

Available at www.anayaeducacion.es

www.anayaeducacion.es

AT RY EDUC

3100549

Available at www.anayaeducacion.es

S EC O N D A

THE DIGITAL PROJECT FOR TEACHERS THE WEBSITE www.anayaeducacion.es The teacher’s website is a tool that facilitates and enriches teaching work. With it, you can adapt the contents to the needs of the students through additional resources or reinforce the most relevant educational aspects: • Course plan, the teacher’s guide and project information. •D iversity and inclusion, to meet the diversity of students’ motivations, interests and learning styles through: - Key concepts and additional worksheets. - Competece development worksheets. - Tasks and other resources. • Assessment, a core value of the project, it is supported through: - Predesigned assessment tests and records. - Specific documentation. - Assessment tools. • Resource bank, with video tutorials, presentations, glossary, learn by playing, related readings, Language Bank, Create and more. •L anguage Bank: created to further develop the four linguistic skills (speaking and writing, productive skills, and reading and listening, receptive skills), this new educational tool accurately supports the linguistic plan and can be used both by the teacher and the language assistant. • Create: fun cross-curricular projects which contribute to integrating and exposing students to different curricular contents and developing their English skills. These projects show the students that what they’re learning isn’t just in the classroom, but found in everyday lives.

os, , I. Hoy

J. San tos

Building

Blocks

Teacher’s Guide

Blocks

learning to keep

Technology, Programming and Robotics M.P. Blázquez, I. Hoyos, J. Santos

T e a c h e r’s G u i d e SECONDARY EDUCATION

There is a teacher’s guide for each student book with the solutions to the activities, methodological guidelines, suggestions for applying the project keys, etc.

Buildin

I S B N 978-84-698-7370-0

www.anayaeducacion.es

788469 873700

Building

3100550

TEACHER’S GUIDES

Technology, Programming and Robotics

SECONDARY EDUCATION

Blocks

Teacher’s Guide

Technology, Programming and Robotics

SECONDARY EDUCATION

Buildin

Blocks

learning to keep

M.P. Blázquez, I. Hoyos, J. Santos

788469 873748

3100554

SECONDARY EDUCATION

T e a c h e r’s G u i d e

I S B N 978-84-698-7374-8

www.anayaeducacion.es

Technology, Programming and Robotics

Building

Blocks

THE DIGITAL BOOK All Building Blocks books have a digital version. You can download the entire book or download it by units, with all its resources or in its lighter version (without the largest digital resources), which allows offline and online use. The resources of each unit are grouped by type and you can also access the resource bank and the Teacher’s guide.

AND FOR THE S TUDENTS? Resource bank

at www.a n

ayaeduca cion.es c on: • Resourc es related to the proje • Feature ct keys. d resourc e materia l. • Resourc es for ea ch unit. Digital b ook A digital version o f the textb be downlo ook that aded in fu can ll or by un resources its; with a or a lighte ll its r version (w heaviest d ithout the igital reso urces).

1 Computer-aided design ä Unit presentation

Technical drawing is one of the essential foundations for any engineering project. The first part of this unit introduces LibreCAD, a free open-source application that is suitable for practising this type of drawing. The second part of the unit presents Processing and its graphical functions. Students will get to know what’s available to them in this programming language, including the typical structure of a Processing sketch, the types of data admitted by the language, the functions and control structures.

ä Resources and materials To complete this unit, you will need a classroom with PCs that can have Libre-CAD, Java and Processing installed on them, as well as the student book and the material, including the Language Bank, that can be downloaded from anayaeducacion.es. The other digital resources available on the Anaya web page, manuals, encyclopaedias and online web searches will also be very useful for practice and expanding on the main course content.

ä General suggestions Methodology that helps develop speaking and writing skills are essential for this project. Students may have difficulty understanding certain concepts in this book. Make sure you use the glossary to remind them of important vocabulary and point out the Focus on English boxes to aid their understanding of complicated language. Play the book’s audio to help students with their pronunciation of key vocabulary.

Previous learning and possible difficulties Programming written code helps build other skills too, such as mathematical skills, the ability to think abstractly and using the English language. Prior experience in programming within visual environments can help but is not essential. Processing was chosen because it offers excellent opportunities for managing graphics, which should be motivating for students completing the unit. They will learn everything they need in order to be able to write small programmes with ease, step by step, and with lots of examples. Whether students have prior knowledge of programming or not, the most common difficulty will be the strict syntax of programming languages. The need to type certain characters –such as parenthesis, the keys that close blocks and the semi colon at the end of each instruction– and the errors that come from leaving them out or using them incorrectly, can confuse students at first. Once they understand that complaining about it won’t help and grow to accept it, everything will go much more smoothly! It should help them to learn to play close attention to detail too.

Learning values We suggest thinking about how programming can be used to solve problems that affect different groups of people, creating personalised applications that are used as means of communication and expression. Also, students could study other cultures to be inspired by their artistic expressions to make their own designs.

KC: key competences, CLC: competence in linguistic communication, CMST: Competence in Mathematics, Science and Technology, DC: digital competence, LL: learning to learn, SCC: social and civic competence, SIE: sense of initiative and entrepreneurship, and CAE: cultural awareness and expression.

Content and competences Unit content

Key competences

Opening pages • The evolution of computer-aided design

CMST SIE

1. LibreCAD • Drawing lines • Rectangles and squares • Circles • Moving entities • Dimensioning objects • Adding text

CMST DC

2. Processing • An overview of Processing • Graphic functions • Elements that define a shape • Customised shapes • Code blocks, variables and data types • Operators and mathematical operations • Functions • Control structures. Decisions • Control structures. Loops

CMST DC LL SIE

Technology workshop • Fractal drawings

CMST DC

Review and practise • LibreCAD • Processing

CLC CMST LL DC

SDG commitment There are videos on the SDGs at anayaeducacion.es to help students with these activities. Linguistic plan You can find the Speaking and Writing Language bank worksheets at anayaeducacion.es.

Project keys

SDG commitment • Videos about the Sustainable Development Goals

Speaking

Computer-aided design

Computer-aided design was fundamental for creating communication materials for the Sustainable Development Goals: the logo, the colour palette and the icons for each goal.

Reading and listening

The evolution of computer-aided design

Ever since it was invented in the 20th century, computer programming has been continuously developing and evolving. The first programmers were more like artists than industrial workers. As time went on, they started to discover algorithms and techniques that could be applied over and over, like recipes when cooking. These discoveries had a strong mathematical component, which scared off many who wanted to try to learn how to programme a computer. But today there are environments which make programming easier, so that practically anyone can unleash their creativity when using them.

3 Make sketches of your own alternative icons and show another pair of students, explaining why you would change them.

For me this icon sends the right message because…

1 Answer the questions about the text. 1

In the past, why did some people feel like they couldn’t do computer programming?

I think this icon would be better if …

2 What do you think we mean by unleash our creativity? 3 What is computer-aided design useful for?

2 What is computer-aided design being used for here? Can you think of more uses?

Writing

Emotional Education • Videos with suggestions and techniques for students to develop their emotional education Enterprising culture • Personal dimension: creativity • Productive dimension: initiative and productivity

Look at SDGs 9.1 and 9.c. Think about your community, neighbourhood or town: Do you think that everyone can access technology? Write a letter to the mayor with your ideas for closing the digital divide. Include ideas for actions which could be done by the community, as well as those which need money from the local government.

BANK GE BANK LANGUA LANGUAGE BANK GE BANK GE BANK LANGUA LANGUAGE NK LANGUA NK BA NK BA BANK 9 BA GE GE LANGUA LANGUAGE NK LANGUA LANGUAGE NK NK BA BA BA GE NGUAGE LANGUA LANGUAGE

Cooperative learning • 1-2-4 • Let’s check • Ideas pool

Do you think that the icons fit the goals that they represent?

2 Are there any that you would improve?

Computer-aided design is now an essential tool in our digital society. It has become a vital medium which we can use to communicate ideas through images, colours and other techniques. We can use it as a tool to give shape to our ideas.

Linguistic Plan • Reading and Listening (receptive skills) and Speaking and Writing (productive skills) Developing thinking Thinker’s keys • The What if... Thinking technique • Think and share with a partner

1-2-4 Go to the official website of the United Nations and look at the design of the SDG icons. Talk about the icons with a partner.

Opening pages Suggested methodology Reading and Listening Throughout the book, the activities on the opening pages combine unit content with activities focused on learning and practising English. They could be led by either a teacher or by a Language Assistant. The unit starts with a text in which the evolution of programming languages and computer-aided design is briefly explained. You can use this to see what prior knowledge the students have of the topics. You can ask questions like: Do you know any applications for graphic design? Which ones would you use for artistic design, and which for technical design? Which ones are useful for drawing in 2D and which ones can create 3D shapes? Which ones have you used? We suggest you read and/or listen to the audio of the text 'The evolution of computer-aided design' and focus students’ attention on the pronunciation of important vocabulary.

1 1 Some people felt like they couldn’t do computer programming because of the mathematical component;

ICT • Documents: ‘Programming basics: Operators’ • Video: – Computer aided design • Videotutorials: – LibreCAD work environment and first steps – Processing: An introduction Academic and professional guidance • Professional pathway: Computer aided graphic design Assessment • Preparing your portfolio • Interactive self-assessment • Interactive activities • Printable assessments, practice and extension worksheets

2 It means to be free to express our imagination; 3 Computer aided-design is useful for communicating ideas. 2 Computer-aided design has been used here in an architectural plan of a house, and in a 3D illustration. Other uses could include interior design and product design.

Speaking 3 The Language Bank Speaking worksheet reminds students of phrases for giving their point of view. The students can give their own answers to the questions, which is good fluency practice, and then work with a partner to create their first graphical drawings. Finally, they can share ideas as a class. Make sure that students practice the language given in these Language bank resources and correct any errors they make. The expressions learnt can be useful for any official speaking exams in the future.

Writing 4 This writing tasks focuses students on their abilities to write a formal letter, in this case, to the mayor or mayoress of their town or city. Guide students through the Language bank Writing worksheet and give them a time limit to plan and write their letter. They could check each other’s work.

LibreCAD (I)

Unit 1

LibreCAD is a free, open-source computer-aided design application for Windows, MacOSX and Linux operating systems.

LibreCAD

The menu options and the commands are available in various languages.

LibreCAD preferences When you install LibreCAD for the first time, a black work screen appears with a grid of light coloured dots .

Menu bar

It is possible to change the colour of the background and the grids by clicking on the LibreCAD Edit → Preferences menu.

Toolbar

The colours follow the RGB model used in HTML. You can find pages with HTML colour tables by searching online.

ä 1.1 Drawing lines

Moving and resizing objects

Any object drawn with LibreCAD is considered a line, whether it is a straight line or a rectangle, an arc, ellipse or even text. You can modify the properties of the lines such as their colour, thickness or size. We will be doing an exercise to practice this. The black canvas work area is marked by white dots spaced 10 mm apart both horizontally and vertically. This is the orthogonal grid. If nothing has been changed in the configuration, there should be a red cross in the work area that marks the reference point of the coordinates. Place the mouse cursor over the red cross and make sure it is at the coordinates (0, 0).

Guided practice

The drop-down menus offer standard values, but others can be typed directly into the fields.

1 On the lower toolbar, click on the Snap on grid icon. This makes it easier to draw straight lines.

To move an object:

• Select it. • When the object changes colour, click on it and you can move it around the work area.

• When you have moved the object to the position you want, click on it again to lock it in place.

Suggested methodology

When objects are selected, they have light and dark blue dots. You can resize and relocate objects by clicking on these dots and dragging them with the mouse.

Vector graphics • Vector drawings are made up of dots,

LibreCAD is an open source project developed from the code of the last free version of Qcad. This is convenient, as you can find and use manuals and videos for Qcad on the Internet to help with LibreCAD.

lines, rectangles, arcs, ellipses, etc.

• These all have attributes, including the 2 On the side toolbar, click on the

type of line, its thickness, and colour, which can be changed.

first icon to open a toolbar to draw lines. On the new toolbar, select the 2 points line. You will notice the cursor changes into a cross when you move it over the work area. The reference in the centre is a red cross that can be moved from one end of the grid to the other using the mouse. This indicates you are in drawing mode.

Action tracking

Command line

• You can select, move, copy, cut, rotate, or change their scale.

F ocus on English

3 To start drawing a line, place the cursor on the starting point, let’s say (0, 0), and click the left button of the mouse once.

Coordinates

4 Move the cursor to the point where you want to place the other end of the line, such as (50, 0), and click the left button once to lock the end of the line in place. Double click the right button to leave drawing mode.

When you use LibreCAD for the first time, you will be asked to choose the units, the language used in the application and the language for the commands. These values can be changed* later in the LibreCAD Preferences window.

We often use passive structures when we describe technological processes, for example “These values can be changed later…” We use this structure a lot in English, and it is used when an object receives an action or has something done to it.

You can also find manuals and tutorials specifically made for LibreCAD:

The structure we use is: the verb to be + past participle

5 If you accidentally click or double click with the left button, the programme lets you continue drawing lines from that point. It does not leave drawing mode.

Selecting and deleting objects When you are not in drawing mode, you can select individual objects by clicking on them using the cursor.

LibreCAD Official wiki.

6 To save your work, go to File → Save, or, File → Save

You know when an object is selected because it changes colour from white to a light brown, and the line becomes a dotted line.

as…

Understand, think, investigate...

If you click on the object again, it goes back to its normal state, and is no longer selected.

1 Using lines, draw a cutout for a cube with 50mm sides.

To delete an object, first select it, and then press the Delete key. 10

https://dokuwiki.librecad.org/doku.php

LibreCAD user manual (In Spanish).

TIC Before starting this unit, students could watch the video ‘Computer aided design’ and the videotutorial 'LibreCAD work environment and first steps' at anayaeducacion.es.

https://arquirequisitoeninformatica.files.wordpress.com/2018/02/u2-area.pdf • It’s unlikely that students have used a CAD application before, so it might be difficult for them to get used to this application. Special care has therefore been taken in providing tips for using the interface efficiently. • Steps to leave and enter drawing mode have been left out of the student book. If necessary, you can explain that we start drawing mode by selecting one of the drawing tools and we can leave it by clicking the right mouse button.

Answers Understand, think, investigate... 1 The cutout should have the following appearance:

LibreCAD (II)

Unit 1

1 LIBRECAD

ä 1.2 Rectangles and squares

ä 1.5 Dimensioning objects

LibreCAD has a tool for drawing squares and rectangles.

Dimensioning pieces is essential if you want to reproduce them. LibreCAD provides a dimensioning tool that makes this task easier. Choose the kind of dimensioning you want, mark the ends of an edge or click on the arc of circumference to set the dimensions.

➜ Click on the Line icon on the side toolbar and select Rectangle. ➜ This tool is simpler than the 2 points tool. Click the left mouse button one time to set the initial position of the rectangle, then click it again to set its final position.

ä 1.3 Circles

Line and rectangle tools.

LibreCAD also has a tool for drawing circles with a variety of options: you can specify the centre point and another point, the centre and radius, two opposite points, or finally you can specify three points. It also has an icon for making concentric circles, and several icons for circles within triangles or circles that are tangent to other circles.

➜ On the side toolbar, click on the Circle icon and then select the Circle with centre and point.

➜ Click the mouse button once to lock the centre point of the circle. Then set the circumference by moving the mouse and clicking again.

ä 1.6 Adding text The easiest way to add text to your designs is by clicking on the Text icon. A dialogue box will open where you can see different settings: interlinear spacing.

➜ Alignment. Text is aligned with reference to points on the grid. ➜ Angle. Text can be rotated in relation to the reference axes. ➜ Insert symbol. This has common symbols which can be inserted directly into the text.

➜ Insert Unicode. This is used for inserting different alphabets, musical notes, etc.

➜ Text. This is the text box where you can type your text and insert it

If you are going to move or change a single entity like a rectangle, for example, click on it to select it and it will change colour. If you want to work on several entities, you can select them by clicking on each one while holding down the shift key. Or you can hold down the left mouse button to drag a selection rectangle over the entities you want to select.

The best way to learn how each of these works is to experiment with them. Try them out and see what you can create.

➜ To move an entity, or a selection of entities, simply click on it and hold down the left mouse button while you drag the selection to its new location.

➜ To lock it in its new position click one more time. ➜ Finally, deselect the entity. As before, you can deselect them one by one or go to the menu: Tools → Select → Deselect all.

Tools for selecting and de-selecting.

Understand, think, investigate...

into the sheet. The icons let us clear the text box, open a text file, or save the written text in a file, as well as the usual functions of cut, copy and paste.

ä 1.4 Moving entities Circle tools.

Answers

➜ Font. You can choose the font, the height of the letters and the

Understand, think, investigate... 4 Draw the cut-out from activity 1 again to make a cube using squares that are 50mm each side.

Ideas pool. Change the document template to isometric (Options → Current drawing preferences → Grid) and draw the following pieces:

2 Think and share with a partner. The work done by the students should match the example

6 Open the file with isometric pieces and give them their correct dimensions.

7 Using an orthogonal grid, draw the views of the pieces that you drew in the isometric template. Give them dimensions.

image in their book.

Understand, think, investigate... 2

Think and share with a partner. Draw five concentric circles using circle with centre and point.

3 The work done by the students should match the example image in their book.

• Give the first circle a radius of 10 mm. • Increase the radius of each of the others, one at a time by 10 mm.

3 Repeat activity 2, but this time join the circles at their highest point.

Developing thinking Students can use the ‘Think and share with a partner’ Thinker’s key worksheet from anayaeducacion.es. Cooperative learning The ‘Ideas pool’ cooperative learning technique may be applied to complete this activity.

4 The result should be the same as activity 1, but with longer sides. Students might notice that it is much quicker to use the rectangle tool.

5 Ideas pool. The work done by the students should match the example images in their book. 6 The dimensions that students add should match the below examples.

7 For the first cube shape on the left, the front and the plan view are enough.

front view

side view

plan view front view

side view

plan view 2

ä 2.1 An overview of Processing

ä 2.2 Graphic functions

Processing is a language and programming environment focused on visual artistic creation. Casey Reas and Ben Fry from MIT started to develop Processing in 2001 and have written books about it, including Getting Started with Processing and Processing: A Programming Handbook for Visual Designers and Artists.

Processing has lots of interesting graphic functions. We are going to see some before we write our first sketch. Unless otherwise* indicated, the unit used is pixels.

Processing is useful for learning programming, but it mainly focuses on graphic design, animations and other features for visual artists who want to experiment with making art using computers. Creating shapes, working with colours and moving objects around the screen is very easy with Processing. “We created Processing to make programming interactive graphics easier. We were frustrated by how difficult it was to write this kind of software with the programming languages we usually used (C++ and Java), and were inspired by how simple it was to write interesting programmes with the languages of our childhood (Logo and BASIC).” Reas & Fry, Make: Getting Started with Processing, 2015. Processing allows three forms of programming: basic, structured and object-oriented. This way you can gradually progress from a beginner to an advanced level. An interesting feature is the Export to Application. When you click this option, a dialogue box opens with options to make the application run on other operating systems. It is also possible to make the application run in full screen. It is very easy to adjust the size of the execution window, as we will see later.

Processing Environment Run

The syntax of Processing

Function

Meaning

size (width, height)

Determine the size of the graphic window where the sketch is going to be.

point (x, y)

Draw a point on the coordinate (x, y). Draw a line from one coordinate (x1, y1) to another (x2, y2). Draw a triangle by connecting three points (x1, y1), (x2, y2) and (x3, y3).

quad (x1, y1, x2, y2, x3, y3, x4, y4)

Draw a quadrilateral with vertices on points (x1, y1), (x2, y2), (x3, y3) and (x4, y4).

rect (x, y, width, height)

Draw a rectangle with the top left corner located at (x, y) and dimensions (width, height).

ellipse (x, y, width, height)

Draw an ellipse located at (x, y) and diameters (width, height).

We must be careful when writing upper and lower case letters in the function names.

arc (x, y, width, height, start, end)

Draw an arc located at (x, y), with dimensions (width, height) and start and stop angles (in a clockwise order) in radians (start, stop).

Guided practice

F ocus on English otherwise: this connector can be used to state an exception

1 Open Processing and type the following line of code:

Stop Mode Manager. When you select Add Mode…, the dialogue box below appears with other possible programming modes.

line(0,0,100,100);

2 Press the Run button. 3 If an error message appears, check the code and make sure you did not forget to type the semi-colon at the end of the expression. Make sure that you did not change a letter in the instruction to a capital letter (or another letter), that the numbers are separated by commas, and the brackets are in the correct place.

File name

Tab manager (files)

4 If everything went well, you should see something similar to the image on the right. You have drawn a line from the starting coordinates (0, 0) to the point (100, 100).

Text area for writing code

5 Processing has allocated a series of values by default for Message area

Text console and error debugging

commonly used elements. It automatically generates a window in which a grey canvas is framed by a light grey border. The line drawn in the window is black with the thickness of one pixel. You can configure all these elements, from the window to the line, however you wish.

plan view

Every expression must end with a semi-colon “;”. If they do not have a semi-colon, the programme will cause an error when it is executed.

line() is not the same as Line() or liNE().

line (x1, y1, x2, y2) triangle (x1, y1, x2, y2, x3, y3)

side view

Processing (I)

Unit 1

PROCESSING

front view

Understand, think, investigate... 8

Open Processing and then open the File menu. Go to Examples… , a window will open with different drop-down folders. Go to Contributed Examples/ Getting Started…/02_Start and open the two examples: Ex_02_01 and Ex_02_02. Run both applications and, thinking about the code you have loaded, explain in your own words what you think Ex_02_02 does.

Linguistic Plan Students can find information on how to write an explanatory or descriptive text in the Linguistic Plan section at anayaeducacion.es.

The Processing environment Suggested methodology • The introductory part of this section examines the characteristics of the Processing environment. You can use this as a starting point to have a class debate about the positives of the free software model, sharing knowledge and publishing free information as opposed to the opposite attitude: closed code, development secrets and lack of information to stop potential competitors. • In the bottom half of the first page we can see the work environment. Compared with that of other environments, it is very simple, which is an advantage for those who are trying to program code for the first time or who are used to visual environments. This section should not be too difficult, but remind students that they have it here to refer back to later if needed. • It is important to pay special attention to the syntax section. Processing language demands that users type certain characters and there are distinctions between upper and lower case letters, for example. If this made clear to students, they will avoid making a lot of errors.

Answers Understand, think, investigate... 8 The first example draws an ellipse, while the second one draws ellipses underneath the mouse cursor. In the second example, if you press the left mouse button, the ellipse fills in black. A condition was included in the code before the instruction that creates the ellipses underneath the cursor of the mouse. This was to make sure that when the user stops holding down the mouse button the ellipses return to the default colour (white).

Processing (II)

Unit 1

ä 2.3 Elements that define a shape

2 PROCESSING Understand, think, investigate... 9 Open Processing and follow these steps: a) line(0,0,100,100); Explain what you see in the window that appears. b) line(0,0,200,200); Check to see if the size of the graphic window changes. c) rect(10,10,80,80);

Search the Processing reference page on the internet for information on how to use the following functions. Write their meaning and parameters in your notebook: background(), stroke(), line(), noStroke(), strokeWeight(), strokeJoin(), strokeCap().

12 Practice using the functions you have learnt. a) Type the following code: size(500,400);

What appears in the graphic window? Has it changed size?

rect(250,100,150,100); ellipse(250,200,100,100);

d) rect(10,10,180,180); Describe the faults you can see in the graphic window.

10 Look at the table of functions on the previous

b) Write an analysis of the three lines of code in your notebook c) Why do you think the figures overlap?

page and change the size of the graphic window in the first example to 640 x 480 pixels. This is the resolution of old VGA graphic cards.

figures

a) Type the code to draw the diagonal line from (0, 0) to the opposite corner. b) Change the code by doubling the value of the final coordinates: line(0,0,1280,960); What happens? c) What happens if you only double the value of one of the two final coordinates? Now try doubling the other one and make a note of your conclusions.

The width and height variables The width and height variables store the value of the width and height of the graphics window. Here is an example: size(200, 200); smooth(); ellipse(width/2, height/2, width/2, width/2); println(width); println(height); Since the value of the width and height of the graphics view in this case is 200, the sketch draws a circumference at the position of 100,100 with a diameter of 100. The number 200 also appears in the console two times as the width and length values.

➜ Working with greyscale lines: stroke(gray_level); has a single parameter where 0 is black, and 255 is white. All values in between make up the greyscale*.

➜ Working with coloured lines: stroke(r,g,b); has three parameters: r, g and b, which are the three additive primary colours. We can get other colours by mixing different levels of red, green and blue. Each value of r, g and b varies between 0 and 255.

There are many websites there you can find the RGB colour codes you want to use. Type these keywords into your search engine for example: Wikipedia wiki web colours Some websites even have a simple app in which you can move a cursor and select the colour you want. The colour value you were searching for is given to you in an adjacent box, usually in decimal and hexadecimal values.

➜ Changing line thickness: strokeWeight(n); changes the thickness of the line. The value is automatically set at 1.

➜ Filling shapes: fill(gray_level); and fill(r,g,b); fill a shape

Graphic functions and elements that define a shape

with grey or colour respectively. The information about greyscale and RGB above applies here too.

➜ Changing the colour of the canvas: background(gray_level);

Answer key

and background(r,g,b); changes the canvas to grey or colour respectively. The information about greyscale and RGB above applies here too. Before you draw a shape, you must choose its attributes. Choose the colour, line thickness and fill first, then the shape is drawn in the position with the dimensions you want.

F ocus on English greyscale: a range of grey shades going from white to black

Understand, think, investigate...

Understand, think, investigate... 13 Type the following code:

stroke(100,180,140);

size(500,400);

strokeWeight(100);

stroke(160);

rect(0,0,400,300);

rect(250,100,150,100);

a) Explain what happened.

Change the values of stroke() to see how the tone of grey changes on the shape outline.

b) Now, change the programme to set the line width at 5 pixels, and draw the rectangle at the coordinates (50, 50).

14 Try the code in the width and height variables a) Change the code so that the diameter of the circle takes up 2/3 of the width of the window. b) Change the dimensions one at a time and see how the shape adjusts to the shape of the window.

9 a) A straight line is shown which runs diagonally across the canvas, from the upper-left corner

Change the values of stroke() to see how the outline of the rectangle changes.

section on the opposite page.

15 Type the following code: size(500,400);

RGB colours

Up until now, we have seen how Processing draws shapes using a black line with a thickness of 1 pixel (the automatic setting), and fills shapes in with white, when possible. Our designs would be much more attractive if we could make them colourful and change the outline of the different geometric shapes. To do this, we have the following functions:

16 Change the previous code. Give the shape a 5 pixel green outline, a red fill and a blue background.

to the lower-right corner.

Let’s check. Look at the UN Sustainable Development Goals website. Try to find the colours of the goal icons by adjusting RGB levels in your colour selector.

b) The result on the canvas is the same as in (a), despite having modified the code. This limitation comes from the default size of the canvas. c) A square appears, centred in the canvas, with the upper-right corner at the point (10, 10) and sides of 80 pixels. d) The square is not complete, the lower borders are not visible because it is larger than the canvas. A canvas with minimum dimensions of 200 x 200 pixels would show the complete shape.

10 The code should be: a) size(640,480); line(0,0,640,480); b) It appears that the scale has been reduced to a half of what it was. In reality, Processing only draws the visible part of the line object. c) The line seems to go off one side of the window, and for this reason the image has not been scaled.

11 The functions with their parameters and examples of how they are used can be found at the following addresses: https://processing.org/reference/background_.html https://processing.org/reference/stroke_.html https://processing.org/reference/line_.html https://processing.org/reference/noStroke_.html https://processing.org/reference/strokeWeight_.html https://processing.org/reference/strokeJoin_.html https://processing.org/reference/strokeCap_.html

12 a) The first line establishes the size of the canvas. The second one draws a rectangle with the upper-left corner at (250, 100) with the size indicated. The third one is an ellipse centred at (250, 200). b) The figures are overlapping because their x coordinates coincide. The circle overlays the rectangle because Processing draws them in the same order that it executes the code.

13 Free practice for students to experiment. 14 a) size(200, 200); smooth(); ellipse(width/2, height/2, 2*width/3, 2*height/3);

b) One possible modification would be: size(300, 200); smooth(); ellipse(width/2, height/2, 2*width/3, 2*height/3);

15 a)A 500 x 400 pixel canvas is established. 12

The borders of the shapes are green.

Unit 1

ä 2.3 Elements that define a shape

2 PROCESSING 11

9 Open Processing and follow these steps: a) line(0,0,100,100); Explain what you see in the window that appears. b) line(0,0,200,200); Check to see if the size of the graphic window changes.

➜ Working with greyscale lines: stroke(gray_level); has a single parameter where 0 is black, and 255 is white. All values in between make up the greyscale*.

➜ Working with coloured lines: stroke(r,g,b); has three parameters:

12 Practice using the functions you have learnt.

r, g and b, which are the three additive primary colours. We can get other colours by mixing different levels of red, green and blue. Each value of r, g and b varies between 0 and 255.

a) Type the following code:

c) rect(10,10,80,80);

size(500,400);

What appears in the graphic window? Has it changed size?

The image is asymmetrical because of the very thick border and the fact that the rectangle is drawn in the upper-left corner of the window. You can change the coordinates to (50, 50) so that the rectangle stays centred.

➜ Filling shapes: fill(gray_level); and fill(r,g,b); fill a shape

b) Write an analysis of the three lines of code in your notebook

Describe the faults you can see in the graphic window.

with grey or colour respectively. The information about greyscale and RGB above applies here too.

c) Why do you think the figures overlap?

page and change the size of the graphic window in the first example to 640 x 480 pixels. This is the resolution of old VGA graphic cards.

A 400 x 300 pixel rectangle is drawn at (0, 0).

Some websites even have a simple app in which you can move a cursor and select the colour you want. The colour value you were searching for is given to you in an adjacent box, usually in decimal and hexadecimal values.

of the line. The value is automatically set at 1.

ellipse(250,200,100,100);

10 Look at the table of functions on the previous

The thickness of the outline is 100 pixels.

There are many websites there you can find the RGB colour codes you want to use. Type these keywords into your search engine for example: Wikipedia wiki web colours

➜ Changing line thickness: strokeWeight(n); changes the thickness

rect(250,100,150,100);

d) rect(10,10,180,180);

RGB colours

Understand, think, investigate...

➜ Changing the colour of the canvas: background(gray_level); and background(r,g,b); changes the canvas to grey or colour respectively. The information about greyscale and RGB above applies here too.

figures

a) Type the code to draw the diagonal line from (0, 0) to the opposite corner.

Before you draw a shape, you must choose its attributes. Choose the colour, line thickness and fill first, then the shape is drawn in the position with the dimensions you want.

b) Change the code by doubling the value of the final coordinates: line(0,0,1280,960); What happens? c) What happens if you only double the value of one of the two final coordinates? Now try doubling the other one and make a note of your conclusions.

F ocus on English greyscale: a range of grey shades going from white to black

Understand, think, investigate... 13 Type the following code:

The width and height variables

stroke(100,180,140);

size(500,400);

strokeWeight(100);

stroke(160);

rect(0,0,400,300); a) Explain what happened.

rect(250,100,150,100);

The width and height variables store the value of the width and height of the graphics window. Here is an example:

b) Now, change the programme to set the line width at 5 pixels, and draw the rectangle at the coordinates (50, 50).

Change the values of stroke() to see how the tone of grey changes on the shape outline.

size(200, 200);

14 Try the code in the width and height variables

smooth(); ellipse(width/2, height/2, width/2, width/2);

section on the opposite page.

println(width);

a) Change the code so that the diameter of the circle takes up 2/3 of the width of the window.

println(height);

b) Change the dimensions one at a time and see how the shape adjusts to the shape of the window.

Since the value of the width and height of the graphics view in this case is 200, the sketch draws a circumference at the position of 100,100 with a diameter of 100. The number 200 also appears in the console two times as the width and length values.

Change the values of stroke() to see how the outline of the rectangle changes.

16 Change the previous code. Give the shape a 5 pixel green outline, a red fill and a blue background.

15 Type the following code: size(500,400);

Let’s check. Look at the UN Sustainable Development Goals website. Try to find the colours of the goal icons by adjusting RGB levels in your colour selector.

Cooperative learning The ‘Let’s check’ cooperative learning technique may be applied to complete this exercise.

16 Sample code: size(500,400); stroke(255,0,0); strokeWeight(5); fill(0,0,255); rect(50,50,400,300);

17 Let’s check. This activity raises awareness of the Sustainable Development Goals. Students can use any RGB scale for this task.

Processing (III)

Unit 1

2 PROCESSING Background images

ä 2.4 Customised shapes

ä 2.5 Code blocks, variables and data types

Processing allows us to create new shapes as well as using the predefined ones. To make a new shape, you need to:

We have not needed to divide our programmes into blocks yet, but this is going to change as we go further into the subject. In Processing, code blocks are contained between keys { and }. These blocks can take up several lines.

➜ establish the start and end of the instructions that define the shape. ➜ establish the coordinates of each vertex. All this is obtained using beginShape(), vertex(x,y).

endshape()

and

For example, in order to define a four-pointed star:

The background (image) function can be used to load a background image.

• The size of the image in pixels must be the same as the canvas.

• Processing can accept .gif, .jpg, .png and .tga image formats.

• Images can be in 2D or 3D.

size(400, 400); beginShape(); vertex(200, 30); vertex(230, 170); vertex(370, 200); vertex(230, 230); vertex(200, 370); vertex(170, 230); vertex(30, 200); vertex(170, 170); endShape(CLOSE);

4 point star

helps to indicate what they are used for, but without being too long. For example: age, name, etc. another type. Processing differentiates two types of data: primitive and compound. We will mainly work with the primitive data types, which in alphabetical order are: boolean, byte, char, colour, double, float, int and long. Among the compound data types which are usually used at the start are: array, string and table. For example:

the word CLOSE from the endshape()function. What happens? different number of points.

20 Practise with the functions: strokeWeight(), strokeJoin()

round

bevel

square

round

project

and strokeCap(). Each one allows different parameters, as well as different numbers. Change the code of the figures you created to get similar results to those illustrated below. 4 point star

Understand, think, investigate... 22 Type the following code: int a=3; int b=5; int c=a+b; print(c);

int x; // Declares the integer variable x x = 3; // Assigns a value to the variable x

Understand, think, investigate...

strokeCap()

must be of + noun phrase

will be used later. We usually associate variables with numbers, but they may also contain characters, text, images, logical values, etc.

➜ Variables must be of* a certain type: numerical, character or

18 After inputting the code for the four-point star, try deleting

miter

➜ Variables are essential in programming. They contain values that

must be of: when there is an obligation for something to belong to a certain group or have a certain characteristic

➜ We have to name variables. It is best to name them in a way that

19 Create two new figures. For example, an arrow or a star with a

strokeJoin()

Up until now* we have only assigned numerical values to the parameters between brackets. We haven’t created interactive applications yet. To do this, we need to use variables.

F ocus on English up until now: from the beginning to this moment in time

4 point star

a) Check the text area and explain what has happened. What does the print(c) function do?

It is possible to state a value and assign a value to it in a single line of code.

b) Now, change the variables in the programme to float variables. What happens if you combine int and float variables in the calculation?

int x = 3; // Declares the integer variable x // and assigns a value

ä 2.6 Operators and mathematical operations Operators are symbols that apply a mathematical function or logic to operands. We have the following operators: Assignment:

Relational operators:

= equals sign

> greater than

Arithmetic operators:

>= greater than or equal to

+ sum

< less than

- difference

<= less than or equal to

* product

== equal to

/ division

!= not equal

% remainder of the whole division

Logical operators:

21 Create a sketch which combines the two figures you just made.

++ increase in a unit

! NOT

Fill each one with a different colour and choose another for the outlines. Change the background colour too.

-- decrease in a unit

&& AND || OR

Customised shapes Answers Understand, think, investigate...

Logical operators It may be easier to understand what the operators !, && and II do by looking at a diagram. These operators represent the logical functions NOT, AND and OR. We will use set notation to make this clearer. A

_ A

U A

A–B

A+B

NOT Logical negation NOT A

AND Logical product A AND B

OR Logical sum A OR B

18 The last border of the star is not drawn. 19 Students’ own drawings.

_ A= U – A

20 The codes of the two illustrations are: size(400, 400); beginShape(); strokeWeight(10); strokeJoin(BEVEL);

strokeCap(ROUND); vertex(200, 30); vertex(230, 170); vertex(370, 200); vertex(230, 230); vertex(200, 370); vertex(170, 230); vertex(30, 200); vertex(170, 170); endShape(CLOSE); size(400, 400); beginShape(); strokeWeight(8); strokeJoin(ROUND); strokeCap(SQUARE); vertex(200, 30); vertex(230, 170); vertex(370, 200); vertex(230, 230); vertex(200, 370); vertex(170, 230); vertex(30, 200); vertex(170, 170); endShape(CLOSE);

21 The students can choose to overlay the shapes, increase the size of the canvas and put them next to each other, modify their dimensions, etc. We recommend establishing some sort of restriction, like not letting their coordinates coincide, for example.

22 a) It prints the variable c in the text area, in this case: 8. b) The result is 8.0. By combining two types of variables, int and float, in the same calculation, Processing shows the error message: Cannot convert from float to int.

Processing (IV)

Unit 1

ä 2.7 Functions

Model example

F ocus on English

We have already used functions included in Processing such as line(), size() and stroke(), but we can also write our own functions.

Code for sketch Ex_02_02

trail: a long line or series of marks that are left by something (or someone) as it moves

Functions are used to set instructions that are going to be executed many times. The use of functions makes programming easier and reduces the chance of having errors in the code.

2 PROCESSING

Functions accept parameters and they can return values. The parameters of a function are variables that it uses to operate.

Definition of variables inside and outside of functions Variables defined inside a function are considered as being local to the function and are not available for other functions of the programme. Variables defined outside a function (normally at the start of the programme) are considered to be global and are available for the whole programme. This may seem like an advantage, but there is a risk that their values may be changed at some point in the programme without us realising it. This may cause unexpected results and mistakes.

The ellipse() and ellipseMode() functions The ellipse() function has four parameters, and the ellipseMode() function changes the mode in which they are interpreted. There are four possibilities:

➜ CENTER. This is the default option. The first two ellipse() The setup and draw functions There are two particularly interesting functions that are used together in many sketches. These functions are setup() and draw(). Maybe you have noticed these functions if you have tried some of the examples that come with Processing. They are used in the following way:

➜ setup() is typed at the start of a sketch just after the global variables which are going to be used. It is used to start the work environment. For example, in setup(), we can set the size of the graphics window using size() and decide if the edges of the shapes are going to be softened to make them look more realistic using smooth(), or not, with noSmooth().

➜ draw() creates a loop that repeats automatically. This means if we want our programme to keep running, we just need to type the code inside draw(). Open Processing and go to File → Examples. Then go to Java Examples → Libraries → Getting Started with processing → 02_Start → Ex_02_02. The example is from Getting Started with Processing, by Casey Reas and Ben Fry. This simple example shows how the setup() and draw() functions are used, and also introduces a simple control structure. The sketch shows a trail* of circles that follow the mouse pointer. If we only move the mouse pointer over the window, the circles are filled in with white, but if we hold down the left mouse button, they are filled in with black. You can see the code and the result of running sketch Ex_02_02 on the next page.

Exemple 3

void setup() { size(480, 480); // Modified for a square screen smooth(); // Original size (480, 120) } void draw() { if (mousePressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); }

parameters are the coordinates of the centre of the ellipse, and the other two are the width and height (the diameters).

Functions The ellipseMode() function

Suggested methodology

ellipseMode(RADIUS); fill(179,223,31); // Green ellipse(50,50,30,30); ellipseMode(CENTER); fill(199,51,255); // Pink ellipse(50,50,30,30);

➜ RADIUS. The first two ellipse() parameters are the coordinates of the centre of the ellipse, and the other two are half of the width and height (the radii).

• One aspect of Processing which can be hard for students to understand is the need to use local variables whenever possible. This is because modifications to global variables can cause possible unexpected effects at different points in a programme.

➜ CORNER. If the ellipse was placed in a rectangle, the first two ellipse() parameters are the coordinates of the top left corner of the rectangle, and the other two are its width and height.

➜ CORNERS. The first two ellipse() parameters are the coordinates of the top left corner of the rectangle, and the other two parameters are the coordinates of its lower right corner.

The arc() function There are two ways to use the arc()function: arc(x, y, width, height, start, stop) arc(x, y, width, height, start, stop, mode)

ellipseMode(CORNER); fill(31,188,223); // Blue ellipse(25,25,50,50); ellipseMode(CORNERS); fill(228,234,16); // Yellow ellipse(25,25,50,50);

The second way adds the parameter mode, which allows three shapes:

➜ OPEN (automatic setting). This leaves the arc open. ➜ CHORD. This draws a line from the start to the end of the arc. ➜ PIE. This draws a line from the start of the arc to the centre of the ellipse, and another line from there to the end of the arc.

• The setup() and draw() functions are very similar to setup() and loop() in Arduino. It’s useful for the students to understand the differentiating characteristics of both of them. setup(), for example, is only executed once when the sketch starts, and draw() is a loop that is executed continuously until the execution window is closed. • One advantage of using functions is that we do not have to understand how they work, we just have to know how to use them. We can think of a function as a box with internal mechanisms that act on the data. • It is useful to know that we can write our own functions. These are used to do things which will be executed several times. It makes the programming simpler and reduces errors. A simple explanation of how to create functions can be found in this link: https://happycoding.io/tutorials/processing/creating-functions

Processing (V)

Unit 1

ä 2.8 Control structures. Decisions

2 PROCESSING Understand, think, investigate...

If a programme were just a list of instructions to be executed from start to finish, it would be useful but a little simple. There can be circumstances that require our programme to change course. Control structures allow the program to make a decision about which code to execute. Selection and decision structures detect these kinds of situations, and there are two of these structures in Processing: if else and switch case.

Questions bag

23 Type the following code and write an analysis of the function of the programme in your notebook.

int widthV=500; int heightV=400; int red=100; int green=180; int blue=140; int thicknessLine=3; size(widthV,heightv); stroke(red,green,blue); strokeWeight(thicknessLine); ellipse(widthV/2,heightV/2,widthV/2,heightV/2);

if else if (test) {instructions in case the test evaluates to true} else {instructions in case the test evaluates to false}

target

four concentric circles and a bullseye in the centre, a target. The background should be black, the bullseye should be white and each of the three concentric circles should be in the RGB additive primary colours. Use variables and mathematical operations to calculate the dimensions of the circles. Remember to include comments in the code.

open a new sketch and enter the code below. Try it first with the Smooth() function and then change it for the noSmooth() function. size(800,600); smooth(); // Activate smooth ellipse(400,300,500,500);

background grey, and draw a 20 × 20 pixel square which is green when the mouse button is not pressed, and red when it is pressed. Where would you change the background colour in the code? And where would you change the colour and shape of the object that follows the mouse cursor? square_series

We can also add on if else sequences: if (test) {instructions} else if (another test) {more instructions} else {other instructions}

Answers

The following sketch shows an ellipse positioned with a mouse pointer. If the pointer is over the left half of the window, the ellipse is filled in with black. If the pointer is placed over the right half of the window, it changes to white.

smooth() The smooth() function is already activated automatically, but it is a good habit to add it to the setup() function. The diagram on the left shows a circle with the smooth function, and the one on the right shows the noSmooth() function. circle

26 Change the previous Ex_02_02 sketch example to make the

When the test evaluates as false, the else specifies a block of code to execute.

Model example

24 Type the code for a sketch that draws a square window with

25 Check how the circles change in the previous example by using the noSmooth() function. If there is not an obvious difference,

if else if structures In the if-else structure, if the test evaluates as true, the instructions enclosed within the if block are executed.

void setup(){ size(300,300); smooth(); } // End setup() void draw(){ background(150) ; // A medium grey if(mouseX<150 ) // The middle of the window { fill(0); ellipse(mouseX,mouseY,50,50); } // End if mouseX else { fill(255); ellipse(mouseX,mouseY,50,50); } // End else } square_series

square_series

Understand, think, investigate...

27 Type the exact code from the if else example on the left. What happens if you type the background() function in setup() instead of in draw()?

28 Change the code in the example for the window to have 500 × 200 pixels and imagine it is split into five equal blocks. Imagine that when you move the mouse cursor over the first block, the ellipse is filled in black, the three blocks in the middle are filled in red, green and blue, and the last block is filled in white. Clue: you will have to add a series of if else, and each one has a condition.

Cooperative learning The ‘Questions bag’ worksheet can be used when completing these activities.

23 This sketch uses the first six lines to initialise the different variables that we will need later: the first two set the dimensions of the window and, in the last line of the sketch, they also centre the ellipse and set the diameters. The red, green and blue variables are used for the RGB colour levels of stroke(). The last variable is used for the line thickness which will be used to draw objects.

24 Sample code: int widthV=500; // Set the width and height of the window int heightV=500; int colorMax=255; // Maximum value of colours size(widthV,heightV); // Create the graphics window background(0); // Black background noStroke(); // draw without a line fill(colorMax,0,0); // First circle red fill /* All the circles will be centred and the first one will have the same diameter as the one in the window */ ellipse(widthV/2,heightV/2,widthV,heightV); fill(0,colorMax,0); // Second circle green fill /* The proportions can vary */ ellipse(widthV/2,heightV/2,2*widthV/3,2*heightV/3); fill(0,0,colorMax); // Third circle blue fill ellipse(widthV/2,heightV/2,widthV/3,heightV/3); fill(colorMax); // Central circle white fill ellipse(widthV/2,heightV/2,widthV/10,heightV/10);

25 By using the smooth() function, the borders of shapes appear smooth. This technique is called anti-aliasing. There are different levels of smoothing which can be applied as a parameter of the function, for example smooth(4);

26 The code should be similar to the following: // Example 02-02 from «Getting Started with Processing» // by Reas & Fry. O’Reilly / Make 2010 // Modified by Ignacio Hoyos // 2015, April void setup() { size(480, 120); background(100); smooth(); } void draw() { if (mousePressed) { fill(255,0,0); } else { fill(0,255,0); } rect(mouseX, mouseY, 20, 20); } The change in background colour should go in setup(), while the changes in the colour and shape of the object should go in draw().

Processing (V)

Unit 1

ä 2.8 Control structures. Decisions

2 PROCESSING Understand, think, investigate...

Questions bag

23 Type the following code and write an analysis of the function of the programme in your notebook.

if else if (test) {instructions in case the test evaluates to true} else {instructions in case the test evaluates to false}

target

When the test evaluates as false, the else specifies a block of code to execute. We can also add on if else sequences: if (test) {instructions} else if (another test) {more instructions} else {other instructions}

Control structures. Decisions

Model example

24 Type the code for a sketch that draws a square window with

25 Check how the circles change in the previous example by using the noSmooth() function. If there is not an obvious difference,

if else if structures In the if-else structure, if the test evaluates as true, the instructions enclosed within the if block are executed.

26 Change the previous Ex_02_02 sketch example to make the background grey, and draw a 20 × 20 pixel square which is green when the mouse button is not pressed, and red when it is pressed. Where would you change the background colour in the code? And where would you change the colour and shape of the object that follows the mouse cursor? square_series

square_series

Understand, think, investigate...

Answers

27 Type the exact code from the if else example on the left. What happens if you type the background() function in setup() instead of in draw()?

Understand, think, investigate... 27 The background is not repainted when the ellipses are drawn, so they leave a trace on the canvas.

28 The code should be similar to the following: void setup(){ size(500,200); smooth(); } void draw(){ if(mouseX<100){ fill(0); } else if(mouseX>=100 && mouseX<200){ fill(255,0,0); } else if(mouseX>=200 && mouseX<300){ fill(0,255,0); } else if(mouseX>=300 && mouseX<400){ fill(0,0,255); } else if(mouseX>=400){ fill(255); } background(150); // If it is removed it leaves a trace ellipse(mouseX,mouseY,50,50); }

Unit 1

2 PROCESSING

switch case This is used when there are more than two possible values to choose between:

Understand, think, investigate...

switch (expression) { case tag_1: instructions; // The keys are not necessary break; case tag_2: other instructions; break; default: instructions if the previous cases are not met; }

29 Type the code from the model example for switch case. What happens if you define the variable letter in setup()? And what happens if you define the variable letter outside of both functions setup() and draw()?

30 What do you need to do if you want to leave a trail of coloured ellipses along the graphic window?

31 Change the code from the switch case example so you can change the colour of the ellipse by pressing the numbers from 1 to 5, and the colour of the background by pressing the numbers from 6 to 9.

32 Change the code in the if else example on the previous page so that the window measures 500 x 500 pixels, and imagine it split into four quadrants. Make the ellipse change to one of the four colours from Parcheesi (red, green, yellow and blue) when it enters each of the corresponding quadrants. Make the background change to white by pressing the “W” key, and to black by pressing “K”, allowing for both lower and upper case letters.

Model example This code draws an ellipse where the mouse pointer is positioned. If we press the R, G, or B keys on the keyboard (in capitals or lower case), the fill colour of the ellipse becomes red, green or blue respectively. If we press any other key, the fill changes to white. void setup(){ size(500,200); smooth(); } // End setup() void draw(){ char letter = key; // Read keyboard character background(150); // Medium grey background switch(letter){ case 'r': // If we press ‘r’ or ‘R’ case 'R': fill(255,0,0); // Fill red break; case 'g': // If we press ‘g’ or ‘G’ case 'G': fill(0,255,0); // Fill green break; case 'b': // If we press ‘b’ or ‘B’ case 'B': fill(0,0,255); // Fill blue break; default: fill(255); // If we press other, fill white } // End switch ellipse(mouseX,mouseY,50,50); } // End draw()

ä 2.9 Control structures. Loops A loop is a structure that contains a series of instructions to be executed again and again under a certain condition. There are two loops in Processing: the while loop and the for loop.

The while loop The while loop executes a series of instructions continuously while the expression is true. The designers of Processing advise us to use it carefully, as the code inside the loop will be executed until it finds an exit condition. This could cause the mouse and keyboard actions to be outdated and may even block the Processing environment.

while (expression) { Instructions in the loop are executed while the expression in brackets is true. One of the instructions must change the loop control variable so that the control expression becomes false. }

Model example void setup(){ size(500,200); smooth(); background(150); // Medium grey background noStroke(); // Shapes without borders } // End setup() void draw(){ int i = 50; // Loop control variable // will be used to vary the X coordinate while(i<width-25){ ellipse(i,height/2,25,25); // We draw the // ellipses in the coordinates that mark i and // (height/2) this way they will be vertically // centred i=i+50; // We increase i to exit the loop } // End while } // End draw()

C REATE

Maths

Find out how Processing can be used in mathematics and geometry. Research examples from the Processing Library and see what structures you already know.

Understand, think, investigate...

Processing (VI) Answers

33 Type the code from the example, analyse the draw() function and answer the following questions: a) What happens if we change the size of the window to 300 x 100? b) What happens if we change the while condition to (i<1000)? c) And what if we change the condition to (i>1)?

34 Change the code in the while example so the height of the ellipses fit to the height of the window.

35 Search for an explanation of while using the keywords: processing org reference while Input the example that appears there, explain each line and the function of the instructions.

36 Change the example by inputting the following variations: line(30, i, 80-i, i); line(0, i, 80-i, i); line(0, 80+i, 80-i, i); line(0, 80+i, 80, i);

37 Now create two new variations and explain what they do.

Linguistic plan You can download the Language bank Create! worksheet at anayaeducacion.es to help with the activity on page 25.

Understand, think, investigate... 29 The code from the example changes the fill colour of the ellipse depending on how we press the keys. If we define the variable letter in setup(), when we try to execute the sketch, it returns an error: Cannot find anything named ‘letter’. If we define the variable outside of setup() and draw(), the programme is executed, but does not respond to the keys pressed changing the fill colour of the ellipse. It doesn’t do what we would expect.

30 The simplest solution is to define background() in setup(). 31 Students should assign the colours white, black, red, green and blue to the numbers 0 to 4 for the fill and from 5 to 9 for the background. The code could be similar to the following: void setup(){ size(500,200); smooth(); } // End setup() void draw(){ char letter = key; // Read key character background(150); // Intermediate grey background switch(letter){ case '0': // If we press '0' fill(0); // Black fill break; case '1': // If we press '1' fill(255); // White fill break;

case '2': // If we press '2'

Unit 1

2 PROCESSING

Understand, think, investigate...

switch case This is used when there are more than two possible values to choose between:

switch (expression) { case tag_1: instructions; // The keys are not necessary break; case tag_2: other instructions; break; default: instructions if the previous cases are not met; }

30 What do you need to do if you want to leave a trail of coloured ellipses along the graphic window?

31 Change the code from the switch case example so you can change the colour of the ellipse by pressing the numbers from 1 to 5, and the colour of the background by pressing the numbers from 6 to 9.

C REATE

Maths

Find out how Processing can be used in mathematics and geometry. Research examples from the Processing Library and see what structures you already know.

Understand, think, investigate...

fill(255,0,0); // Red fill break; case '3': // If we press '3'

fill(0,255,0); // Green fill break;

34 Change the code in the while example so the height of the ellipses fit to the height of the window.

35 Search for an explanation of while using the keywords: processing org reference while Input the example that appears there, explain each line and the function of the instructions.

36 Change the example by inputting the following variations: line(30, i, 80-i, i); line(0, i, 80-i, i); line(0, 80+i, 80-i, i); line(0, 80+i, 80, i);

37 Now create two new variations

case '4': // If we press '4' fill(0,0,255); // Blue fill break;

and explain what they do.

case '5': // If we press '5' background(0); // Black background break; case '6': // If we press '6' background(255); // White background break; case '7': // If we press '7' background(255,0,0); // Red background break; case '8': // If we press '8' background(0,255,0); // Green background break; case '9': // If we press '9' background(0,0,255); // Blue background break; default: fill(255); // If we press another key, white fill and background(150); // Intermediate grey background } // End switch ellipse(mouseX,mouseY,50,50); } // End draw()

32 The code could be similar to the following: void setup(){ size(500,500); smooth(); } // End setup() void draw(){ char letter = key; // Read key character background(150); // Intermediate grey background switch(letter){ // Change background case 'W': case 'w': // If we press 'W' or 'w' background(255); // White background break; case 'K': case 'k': // If we press 'K' or 'k' background(0); // Black background break; default: background(150); // If we press another key, intermediate grey background } // End switch if(mouseX<250 && mouseY<250){ fill(255,0,0); // Red fill } else if(mouseX>=250 && mouseY<250){ fill(0,255,0); // Green fill } else if(mouseX<250 && mouseY>=250){ fill(0,0,255); // Blue fill } else if(mouseX>=250 && mouseY>=250){ fill(255,255,0); // Yellow fill } ellipse(mouseX,mouseY,50,50); } // End draw()

Control structures. Loops

Unit 1

2 PROCESSING

switch case This is used when there are more than two possible values to choose between:

Understand, think, investigate...

switch (expression) { case tag_1: instructions; // The keys are not necessary break; case tag_2: other instructions; break; default: instructions if the previous cases are not met; }

30 What do you need to do if you want to leave a trail of coloured ellipses along the graphic window?

31 Change the code from the switch case example so you can change the colour of the ellipse by pressing the numbers from 1 to 5, and the colour of the background by pressing the numbers from 6 to 9.

C REATE

Maths

Find out how Processing can be used in mathematics and geometry. Research examples from the Processing Library and see what structures you already know.

Understand, think, investigate... 33 Type the code from the example, analyse the draw() function and answer the following questions: a) What happens if we change the size of the window to 300 x 100? b) What happens if we change the while condition to (i<1000)? c) And what if we change the condition to (i>1)?

34 Change the code in the while example so the height of the ellipses fit to the height of the window.

Students need to see that choosing the incorrect control conditions for a loop can cause unexpected effects, from the function never being executed to it becoming an infinite loop. The Language bank Create! activity in this unit links up with the students' maths studies. Hand out the worksheet and get students to research how maths and coding functions can work together.

35 Search for an explanation of while using the keywords: processing org reference while Input the example that appears there, explain each line and the function of the instructions.

36 Change the example by inputting the following variations: line(30, i, 80-i, i); line(0, i, 80-i, i); line(0, 80+i, 80-i, i); line(0, 80+i, 80, i);

Answers

37 Now create two new variations and explain what they do.

Linguistic plan You can download the Language bank Create! worksheet at anayaeducacion.es to help with the activity on page 25.

Understand, think, investigate... 33 • The first line of the draw() function creates an integer numerical variable and initialises it. As indicated in the comments, it will be used to control the execution of the loop, as well as modifying the x coordinate at each step while the ellipses are drawn. • The next line of code is a while loop. The control condition indicates that the loop will need to be repeated while the value i is less than the width of the window minus 25 pixels. • Next, a circumference of 25 pixels is drawn at the coordinates indicated by the value of i for the x coordinate and in the middle of the window for the y. This second coordinate stays constant while the loop is executed. • The value of i is then increased by 50 units. This will make it so that as the execution progresses, the output condition is reached. a) The number of ellipses drawn reduces to five, but they are still centred.

b) The ellipses are still centred vertically, but the programme tries to continue by drawing past the right-hand limit of the window.

c) An infinite loop is created. In this case, the execution leaves a blank screen.

34 This activity is designed for students to work on practising using relative dimensions. As only the height of the window is mentioned, the line of code that we modify could be: ellipse(i,height/2,25,height/8); This modification will return the original result for the window dimensions 500 x 200. The students can propose different formulas. For the dimensions 500 x 100, the execution would be:

For the dimensions 500 x 400, the execution would be:

35 The code for the example is the following: int i = 0; while (i < 80) { line(30, i, 80, i); i = i + 5; } This example uses the default window size in order to draw vertical parallel lines. The first instruction creates an integer variable, i, and initialises it at 0. The second instruction creates a while loop. It will exit the loop when i > = 80. The body of the loop is formed by two instructions: –T he first one traces a line from x = 30, y = i to x = 80, y = i. The lines will always be 50 pixels long, starting and ending at the same x coordinates. The thing that changes in the loop is the value of the y coordinate. –T he second instruction in the loop increases the value of i by 5 units, which will enable it to exit the loop after sixteen repetitions.

36 This activity shows that by simply changing one of the parameters of an instruction as basic as line can have surprising effects. a) For line(30, i, 80-i, i); b) For line(0, i, 80-i, i);

c) For line(0, 80+i, 80-i, i); d) For line(0, 80+i, 80, i);

37 Students’ own work.

Unit 1

2 PROCESSING

Guided practice

The for loop The for loop executes a series of instructions while it fulfils a specific test condition. Apart from the block of instructions to be repeated, the for loop is made up of three parts which are typed between brackets: initialisation of the control variable, test and update of the control variable. The three parts are separated by semi-colons ;.

for (initialisation; test; update) { Instructions in the loop are executed while the test in brackets is true. This loop changes the control variable at the end of each iteration automatically, and we decide the increment value (update). }

Tutorial videos for Processing

In this guided practice, we are going to see how we can put one for loop into another (nest* it in another). We’re going to draw a matrix of circles in 3 rows and 5 columns. In each row, the circles will show different tones of one of the primary colours, RGB. We are going to solve each one of the parts for this exercise step by step, and then we will see how it all works together.

https://processing.org/tutorials/

1 First of all, we are going to make a row without colour: void setup(){

Answers

size(600,100); smooth(); noStroke(); // Shapes without borders } // End setup() void draw(){ // The loop control variable // can be defined in the for brackets

Model example

for(int i=0;i<5;i=i+1){

void setup(){ size(500,500); smooth(); background(117,221,143); // Light green background noStroke(); // Shapes without borders } // End setup()

fill(255/(i+1)); // We use i for

Understand, think, investigate...

// a gradient from black to // white

diagonal gradients

ellipse((i+1)*100,50,70,70); // Ellipses } // End for

F ocus on English nest: to organise information so that information is recognised as separate, but is included or contained in a larger part of information

} // End draw() void draw(){ // The loop control variable // can be stated in brackets for(int i=0;i<width;i=i+10){ fill(i/2); // We use i for a gradient from black to white ellipse(i,i,12,10); // We draw the ellipses forming // a diagonal line } // End for } // End draw()

guided practice

38 • The code of the first for sketch is:

2 The next step is to make three rows. We have to change the size of the window to do this. We can also take advantage of this to use a different colour in each one of the rows. void setup(){ size(600,300);

40 Now make the lines appear at

Processing language reference page and input the first three sketch examples.

a 45° angle like those in the example. Use the setup() and draw() functions to adjust the dimensions of the window, and declare the variables where you think they should be declared.

the code in the second example to make the lines vertical and parallel.

noStroke(); // Shapes without borders

38 Search for the explanation of for on the

Explain what the difference is between the three versions of the code.

for (int i = 0; i < 40; i = i+1) {

smooth();

Understand, think, investigate...

39 Change

Processing (VII)

In the following link, you can find several tutorial videos that explain the common levels: beginner, intermediate and advanced. You may find them to be very helpful.

} // End setup() void draw(){ // The loop control variable // can be stated in brackets

line(30, i, 80, i);

for(int i=0;i<5;i=i+1){ fill(255/(i+1),0,0); // We use i for the //red gradient ellipse((i+1)*100,50,70,70); // Ellipses } // End first for

} Its execution produces 40 adjacent horizontal lines, which looks a bit like a filled rectangle. • The code of the second for sketch is: for (int i = 0; i < 80; i = i+5) { line(30, i, 80, i); } Its execution is like the previous example of the while loop from activity 36. • The code of the third for sketch is: for (int i = 40; i < 80; i = i+5) { line(30, i, 80, i); } Its execution is similar to the previous example. The only difference is that the loop starts at 40 instead of 0, so it is executed less times and the first line drawn is not at y = 0, but y = 40.

39 The conditions of the loop are not modified. The only thing changed is: line(i, 30, i, 80);

40 Sample code:

Unit 1

2 PROCESSING

Guided practice

Tutorial videos for Processing

In the following link, you can find several tutorial videos that explain the common levels: beginner, intermediate and advanced. You may find them to be very helpful.

size(150,100);

void setup(){ size(600,100); smooth(); noStroke(); // Shapes without borders } // End setup() void draw(){

smooth();

// The loop control variable // can be defined in the for brackets

Model example

for(int i=0;i<5;i=i+1){

void setup(){ size(500,500); smooth(); background(117,221,143); // Light green background noStroke(); // Shapes without borders } // End setup()

fill(255/(i+1)); // We use i for // a gradient from black to // white

diagonal gradients

ellipse((i+1)*100,50,70,70); // Ellipses } // End for

} // End setup()

F ocus on English nest: to organise information so that information is recognised as separate, but is included or contained in a larger part of information

guided practice

void draw(){

2 The next step is to make three rows. We have to change the size of the window to do this. We can also take advantage of this to use a different colour in each one of the rows. void setup(){

// The control variable of the loop

size(600,300); smooth();

Understand, think, investigate...

noStroke(); // Shapes without borders

38 Search for the explanation of for on the

40 Now make the lines appear at

Processing language reference page and input the first three sketch examples.

a 45° angle like those in the example. Use the setup() and draw() functions to adjust the dimensions of the window, and declare the variables where you think they should be declared.

Explain what the difference is between the three versions of the code.

39 Change

the code in the second example to make the lines vertical and parallel.

void setup(){

https://processing.org/tutorials/

1 First of all, we are going to make a row without colour:

} // End setup() void draw(){ // The loop control variable

// can be declared in the parenthesis

// can be stated in brackets for(int i=0;i<5;i=i+1){ fill(255/(i+1),0,0); // We use i for the //red gradient ellipse((i+1)*100,50,70,70); // Ellipses } // End first for

for(int i=0;i<width-50;i=i+5){ line(i,80,i+50,30); // we draw the diagonal lines } // End for } // End draw()

2 PROCESSING

Result for Ellipses_colour_for

shop TECHNOLOGY Work for(int i=0;i<5;i=i+1){ fill(0,255/(i+1),0); // We use i for green // gradient ellipse((i+1)*100,150,70,70); // We draw the // ellipses } // End second for for(int i=0;i<5;i=i+1){ fill(0,0,255/(i+1)); // We use i for the // blue gradient ellipse((i+1)*100,250,70,70); // We draw the // ellipses } // End third for } // End draw()

PROJECT PRESENTATION 1st iteration

2nd iteration

3 As we can see in the code above, it is possible to re-use the i variable. However, we could have also chosen other names for the control variables for the second and third loops. However, it is easy to notice that we repeated the code in the first loop three times, apart from a few small differences. An alternative is to use two nested loops (a loop within a loop), so that one is responsible for varying coordinate x, and the other is responsible for varying coordinate y.

3rd iteration

void setup (){ size (600,300); smooth (); noStroke (); // Shapes without borders } // Endsetup()

Result for Ellipses_colour_for_nested

void draw (){ for (int j=0;j<3;j=j+1){ for (int i=0;i<5;i=i+1){ if (j==0){fill(255/(i+1),0,0);} else if (j==1){fill(0,255/(i+1),0);} else if (j==2){fill(0,0,255/(i+1));} ellipse ((i+1)*100,(j+1)*75,70,70); // We draw the elipses } // End internal for. Controls coordiante x } // End external for. Controls coordinate y } // End draw()

Understand, think, investigate... 41 Change Ellipses_colour_for_nested so that the grey scale appears on the first line. You will also have to change the size of the window.

42 There is a deliberate separation of the axis in the Ellipses_colour_for_nested example, and it is different to the previous Ellipses_colour_for example. Make any changes that are needed so the result is the same as that of the Ellipses_colour_for.

43 Increase the number of ellipses per line to 10. You will have to change their diameters. It is also a good idea to change the size of the window so the ellipses fit better and the background colour does not stand out too much.

44 How would you make the size of the ellipses and the spaces between them adjust to the size of the window?

Processing (VIII)

Unit 1

Fractal drawings

There are many figures in nature made up of fractals. Look at the shape of a Roman cauliflower, for example.

Fractals are geometric figures of repeated shapes. Imagine you draw a triangle, then you choose one of its sides to draw the same triangle but smaller. As you are drawing the small triangle, you repeat the process again, and again. Each time you reduce the scale, you make a new iteration. This geometric figure is a Koch Curve. Copy this Processing programme and see the result.

// Fractal diamonds; M.Blazquez, I.Hoyos & J.Santos, 2019 void setup() { size(500, 500); // Screen set at 500x500 pixels } void draw() { background(220,200,220); // Background colour // violet stroke( 0 , 0 , 200 , 50 ); // Outline colour attributes fill( 0 , 0 , 255 , 70 ); // Fill color attributes translate(width / 2, height / 2); // Move to centre // of canvas draw_fractal(250); // Draw fractal function r=250 } // Start draw fractal function void draw_fractal(float r) { quad(-r,0,0,r,r,0,0,-r); // base diamond if (r < 1) // smallest diamond to have 1-pixel sides return; // diamond matrix moved down pushMatrix(); // create transformation matrix translate(0, r / 4); // move origin down 1/4 of r draw_fractal(r / 2); // recursive call reducing // diamond by 1/2 popMatrix(); // close transformation matrix // repeat the process moving the diamonds up pushMatrix(); translate(0, -r / 4); draw_fractal(r / 2); popMatrix(); // repeat the process moving the diamonds right pushMatrix(); translate(r / 4, 0); draw_fractal(r / 2); popMatrix(); // repeat the process moving the diamonds left pushMatrix(); translate(-r / 4, 0); draw_fractal(r / 2); popMatrix(); }

Guided practice Nesting loops is an advanced topic for third year students. They should not start this subsection without having done the activities on the previous pages, and having understood everything concerning coordinates and operations for modifying the position and the proportions of the objects drawn.

Answers

Understand, think, investigate... 41 A possible solution is: void setup(){ size(600,400); smooth(); noStroke(); // Borderless shapes } // End setup() void draw(){ for(int j=0;j<4;j=j+1){ for(int i=0;i<5;i=i+1){ if(j==0){fill(255/(i+1));} else if(j==1){fill(255/(i+1),0,0);} // Make use of i for the colour gradient else if(j==2){fill(0,255/(i+1),0);} else if(j==3){fill(0,0,255/(i+1));} ellipse((i+1)*100,j*100+50,70,70); // Draw the ellipses } // End internal for. Controls x coordinate } // End external for. Controls y coordinate } // End draw()

2 PROCESSING

Result for Ellipses_colour_for

PROJECT PRESENTATION 1st iteration

2nd iteration

3rd iteration

void setup (){ size (600,300); smooth (); noStroke (); // Shapes without borders } // Endsetup()

Result for Ellipses_colour_for_nested

Understand, think, investigate... 41 Change Ellipses_colour_for_nested so that the grey scale appears on the first line. You will also have to change the size of the window.

44 How would you make the size of the ellipses and the spaces between them adjust to the size of the window?

42 Sample code:

Unit 1

Fractal drawings

There are many figures in nature made up of fractals. Look at the shape of a Roman cauliflower, for example.

void setup(){ size(600,300); smooth(); noStroke(); // Borderless shapes } // End setup() void draw(){ for(int j=0;j<3;j=j+1){ for(int i=0;i<5;i=i+1){ if(j==0){fill(255/(i+1),0,0);} // Makes use of i for the colour gradient else if(j==1){fill(0,255/(i+1),0);} else if(j==2){fill(0,0,255/(i+1));} ellipse((i+1)*100,j*100+50,70,70); // Draw the ellipses } // End internal for. Controls x coordinate } // End external for. Controls y coordinate } // End draw()

43 A possible solution can be found on the Anaya Education web page. Another solution is given here by modifying the draw()function: void draw(){ for(int j=0;j<3;j=j+1){ for(int i=0;i<10;i=i+1){ if (j==0) {fill(255/(0.5*i+1),0,0);} else if(j==1){fill(0,255/(0.5*i+1),0);} else if(j==2){fill(0,0,255/(0.5*i+1));} ellipse((i+1)*width/11,(j+1)*75,width/15,width/15); // Draw the ellipses } // End internal for. Controls x coordinate } // End external for. Controls y coordinate } // End draw() In the second loop, which corresponds to the number of circles in each line, the value of 5 is replaced with 10. To make the gradients more progressive, the value of the i variable can be multiplied by 0.5 in the fill instructions. Finally, the diameter of the circumferences is adjusted to the canvas by using the width variable, a variable of the system with the width of the canvas. It is used to determine the distance between the centres of the shapes and their diameters. The students can find the value they need to use through mathematical reasoning, or by trial and error.

44 In this task, students work out a formula that automatically adjusts the dimensions of the ellipses and the coordinates they are drawn at. All the calculations must be made in relation to the dimensions of the window and the number of ellipses that are going to be drawn.

2 PROCESSING

Result for Ellipses_colour_for

Fractal drawings Fractals are geometric figures of repeated shapes. Imagine you draw a triangle, then you choose one of its sides to draw the same triangle but smaller. As you are drawing the small triangle, you repeat the process again, and again. Each time you reduce the scale, you make a new iteration. This geometric figure is a Koch Curve. Copy this Processing programme and see the result.

PROJECT PRESENTATION 1st iteration

2nd iteration

3rd iteration

void setup (){ size (600,300); smooth (); noStroke (); // Shapes without borders } // Endsetup()

Result for Ellipses_colour_for_nested

There are many figures in nature made up of fractals. Look at the shape of a Roman cauliflower, for example.

Understand, think, investigate... 41 Change Ellipses_colour_for_nested so that the

43 Increase the number of ellipses per line to 10.

grey scale appears on the first line. You will also have to change the size of the window.

You will have to change their diameters. It is also a good idea to change the size of the window so the ellipses fit better and the background colour does not stand out too much.

Technology Workshop. Fractal drawings

Unit 1

44 How would you make the size of the ellipses and the spaces between them adjust to the size of the window?

acion.es bank at anayaeduc in the resource your portfolio. Go to Portfolio n about how to make to find informatio

This project gets students to look deeper into the concept of fractal geometry and to modify code in order to produce new and surprising results. You can suggest that the more advanced students research other fractals and write the code that generates them. To see examples of how to generate fractals in Processing, you can go to the following webpages: https://natureofcode.com/book/chapter-8-fractals/ https://en.wikipedia.org/wiki/Generative_art

Unit 1

ise

review and pract

Any geometric figure can be copied by using a fractal, and Processing lets you implement any curve from simpler shapes. Go to the official Processing website and run the Recursive Tree project by Daniel Shiffman. Move the mouse to the left and right to change the angle.

LibreCAD 1 Open LibreCad and draw the views of an object the same as below. Then, try to draw this object in perspective view in the same file.

Change the programme code to get different iterations and figures.

The programme represents a simple tree-shaped structure using recursion. The branching angle is calculated based on the horizontal location of the mouse.

float theta; void setup() { size(400, 400); } void draw() { background(0); frameRate(30); stroke(0, 255, 0); strokeWeight (2); // Angle of 0 to 90 degrees according to the position // of the mouse float a = (mouseX / (float) width) * 90f; theta = radians(a); //Convert to radians // Start the tree from the lower area translate(width/2,height); line(0,0,0,-120); // Draw a line of 120 pixels // Move to the end of the line translate(0,-120); // Start the recursive branching branch(120); } void branch(float h) { stroke(0, 255, 0); h *= 0.66; // Each branch will be two thirds of the // previous one // All the recursive functions must have an exit // condition: length is 2 pixels or less if (h > 2) { pushMatrix(); // Save current state rotate(theta); // Rotate by theta line(0, 0, 0, -h); // Draw branch translate(0, -h); // Move to the end of the branch branch(h); // Generate two new branches popMatrix(); // Restore the state of the matrix // Repeat the same, branching to the left pushMatrix(); rotate(-theta); line(0, 0, 0, -h); // Draw branch translate(0, -h); // Move to the end of the branch branch(h); popMatrix(); } }

Processing 2 The next figure shows an object in cavalier perspective. Copy it in LibreCad and draw the views of the object next to it.

4 When you are developing a programme, and you want a certain action to be repeated three times, what type of structure do you have to use? Justify your answer. a) a procedure; b) a function; c) a decision; d) non-conditional loop; e) conditional loop.

5 List four outstanding technical characteristics of Processing.

6 What is Processing mainly used for? Do you think it can be used in other fields?

7 When applications are developed with Processing, what operating system can you use them in? What tool is used to export applications?

8 What is the graphic window used to draw in Processing called?

9 Explain the error in this code and how it can be 3 Look at the following piece drawn in LibreCad. It is a square with 90 mm sides and four holes. The centres of the holes coincide with the radii of curvature of the rounded corners. The holes have a diameter of 20 mm, while the rounded corners have an arc with a 40 mm diameter. Copy the shape and take the measurements so you would be able to produce the part.

corrected: line(10, 15; 120, 100).

10 What expression lets us close an arc with a straight line? What instruction can you use to trace a line from the beginning of an arc to the centre of the ellipse it comes from, and then from that point to the other end of the arc? (Clue: the final shape will look like a pie slice)

acion.es bank at anayaeduc in the resource your portfolio. Go to Portfolio n about how to make to find informatio

Review and practise

Unit 1

ise

review and pract

LibreCAD 1 Open LibreCad and draw the views of an object the same as below. Then, try to draw this object in perspective view in the same file.

Change the programme code to get different iterations and figures.

The programme represents a simple tree-shaped structure using recursion. The branching angle is calculated based on the horizontal location of the mouse.

LibreCAD 1 The students should have the following:

Processing 2 The next figure shows an object in cavalier perspective. Copy it in LibreCad and draw the views of the object next to it.

5 List four outstanding technical characteristics of Processing.

6 What is Processing mainly used for? Do you think it can be used in other fields?

7 When applications are developed with Processing, what operating system can you use them in? What tool is used to export applications?

8 What is the graphic window used to draw in Processing called?

corrected: line(10, 15; 120, 100).

front

side

plan

2 The students should have the following:

front

plan

3 The students should have the following:

side

acion.es bank at anayaeduc in the resource your portfolio. Go to Portfolio n about how to make to find informatio

Processing

Unit 1

ise

review and pract

LibreCAD

4 A conditional loop would be used. It would have a control variable which would be increased

1 Open LibreCad and draw the views of an object the same as below. Then, try to draw this object in perspective view in the same file.

Change the programme code to get different iterations and figures.

The programme represents a simple tree-shaped structure using recursion. The branching angle is calculated based on the horizontal location of the mouse.

three times until the reference value were reached (or exceeded).

5 Some of the possible characteristics that students could mention are: Processing 2 The next figure shows an object in cavalier perspective. Copy it in LibreCad and draw the views of the object next to it.

5 List four outstanding technical characteristics of Processing.

6 What is Processing mainly used for? Do you think

what operating system can you use them in? What tool is used to export applications?

8 What is the graphic window used to draw in Processing called?

corrected: line(10, 15; 120, 100).

Students can use ’The What If’ thinking technique to complete activity 16.

11 How many colours does Processing use? If you

22 What difference can you see between these two

24 Look at the following code. Copy it into Processing

work in greyscale, what expression do you have to use and how many values of grey tones can you choose between black and white?

code blocks which have the same instructions? Would the same shapes be made?

and make comments on each line to explain their functions.

13 Look at the following code. Change it so that the line will be as thin as possible. size(450,300); stroke(75,90,100); strokeWeight(90); rect(0,0,400,200);

14 Make a program that draws a six-point star on a 500 by 500 sized canvas.

15 Explain how you can insert a comment in a Processing program when it is: 1

//---- Code 2 ---size (500,500); line (50,200,450,200); ellipse (250,250,300,300);

23 Look at the composition below, it is made on a 500 pixel × 500 pixel canvas and is made up of simple shapes joined at the vertices. Measure the position of each vertex on the image with a ruler. Then, calculate the position of each vertex as if it were in the Processing environment, so that you could make the same composition. Hint: all the measurements are multiples of 25. ex 23

The What if. Float type data can be saved in a variable declared as int. What happens with the data that is saved?

25 Look at this code, it simulates the effect of gravity on a ball. Answer the following questions: 1

What type of variables are X and Y?

4 What happens to the ball if we change the instruction velocity = velocity*-0.85 for the expression velocity = velocity*-0.25?

17 What disadvantage is there to saving a value that will never have more than 10 different values in a variable declared as long?

5 Write the code in Processing and make comments explaining the functional nature of the programme.

18 What’s the difference between a global variable and a local variable?

//---- Code ---float x = 240; float y = 0; float velocity = 0; float gravity = 0.3;

19 Explain what a simple decision structure is. Write an example in which, depending on the value of an int-type variable, a square or a circle is drawn.

20 Which decision structure is used when there are more than two options? Write an example using comments.

while (condition) { // Action instructions }

int C=0; void setup() { size(400, 400); smooth(); } void draw() { for (C=0; C<width; C=C+40) { fill(C); ellipse (width/2, width/2, (width-C), (width-C)); } } 1

Indicate what lines correspond to: the block for declaring variables, the general configuration of the programme and to the repeating loop.

2 What are the measurements of the shape’s canvas? 3 What does the variable C mean in the programme? What type is it? 4 Copy the code into Processing and execute it. Write comments that explain what the programme does. 5 How can you make a softer gradient?

• It enables applications to be created for the web, like a Java applet and also programming in JavaScript Mode. • It enables applications to be created for mobile phones by using Android Mode.

• It makes printing quality documents and graphics.

6 The main focus of Processing is artistic. Nevertheless, as it is written in Java, it can interact with an infinite number of systems and devices, like Arduino boards.

7 The Processing code is high-level and independent from the platform. The tool related to the exportation capacity is the same Java language.

8 The canvas.

void draw() { background(255); fill(0,0,255); stroke(0); anayaeducacion.es Find your study resource in the resource bank.

• It integrates OpenGL for acceleration in 3D.

• We can import fonts for use in our sketches.

if (y > height) { velocity = velocity * -0.85; y = height; } }

26 Look at the following code:

void setup() { size(480, 480); }

21 What is the function of the expression below?

void draw(){ background(30,125,30); line(250,25,250,475); if(mouseX<250) { fill(200,25,25); rect(mouseX,mouseY,50,100); } else fill(25,25,200); rect(mouseX,mouseY,50,100); } }

3 What happens if we change the value of the variable for gravity from the initial value 0.3 to 0.9?

3 several lines and is a documentation comment.

ellipseMode(CENTER); ellipse(x, y, 25, 25); y = y + velocity; velocity = velocity + gravity;

void setup(){ size(500,500); }

2 What instruction determines the velocity of the ball?

several lines;

2 a single line;

• You can create interactive programmes with 2D, 3D and PDF output.

• We can connect hardware such as Arduino and Wiring to it.

Unit 1

//---- Code 1 ---size (500,500); ellipse (250,250,300,300); line (50,200,450,200);

• It’s well-documented and with a large amount of books available.

• It has more than 100 libraries which go right into the core of the software.

Developing thinking

the instruction: background (a, b, c) where a, b and c are values assigned to the three additive primary colours. What are they? In what position is each of them in the expression? What range of numbers can each one take? Make a quick calculation and indicate the number of different composite colours that can be made.

• It’s available for GNU/Linux, Windows and Mac OS X.

it can be used in other fields?

7 When applications are developed with Processing,

12 When you change the colour of a canvas, you use

• It’s free to download and open-source.

9 It contains a semicolon after the second number, 15, which must be erased. 10 It is closed by using the CHORD mode at the end of the call and the function. PIE mode traces a line from the start of the arc to the centre of the ellipse generating it and, from there, another line to the end of the arc.

11 Processing uses RBG colours, 8 bits for each of the components. It also enables greyscale, with 256 tones which go from 0 (black) to 255(white). Colours are used in functions such as fill(), background() or stroke(). • Expression for greyscale: a single value between 0 and 255, within the parenthesis. • For RGB colours: three values separated by commas, each of them between 0 and 255, within the parenthesis.

12 The letters a, b and c correspond to the RGB colours. Namely, a would be red; b, green, and c, blue. The range of each one goes from 0 to 255. The number of colours would be 256 x 256 x 256 = 16 777 216

13 strokeWeight() would have to be modified. • If 0 is written between parenthesis, there would be no border around the shape. • If 1 is written, the border would have a thickness of one pixel.

14 Possible code: background(230,230,250); // lavender fill(148,0,211); // dark violet beginShape(); strokeWeight(4); strokeJoin(ROUND); strokeCap(SQUARE); vertex(42, 374); vertex(196, 356); vertex(256, 498); vertex(317, 356); vertex(472, 374); vertex(380, 248); vertex(472, 125); vertex(317, 144); vertex(256, 0); vertex(198, 144); vertex(42, 126); vertex(137, 248); endShape(CLOSE);

15 Processing would admit three types of comments:

Unit 1

11 How many colours does Processing use? If you

22 What difference can you see between these two

24 Look at the following code. Copy it into Processing

work in greyscale, what expression do you have to use and how many values of grey tones can you choose between black and white?

code blocks which have the same instructions? Would the same shapes be made?

and make comments on each line to explain their functions.

12 When you change the colour of a canvas, you use the instruction: background (a, b, c) where a, b and c are values assigned to the three additive primary colours. What are they? In what position is each of them in the expression? What range of numbers can each one take? Make a quick calculation and indicate the number of different composite colours that can be made.

13 Look at the following code. Change it so that the line will be as thin as possible. size(450,300); stroke(75,90,100); strokeWeight(90); rect(0,0,400,200);

14 Make a program that draws a six-point star on a 500 by 500 sized canvas.

15 Explain how you can insert a comment in a Processing program when it is: 1

//---- Code 1 ---size (500,500); ellipse (250,250,300,300); line (50,200,450,200); //---- Code 2 ---size (500,500); line (50,200,450,200); ellipse (250,250,300,300);

on a ball. Answer the following questions: 1

What type of variables are X and Y?

3 What happens if we change the value of the variable for gravity from the initial value 0.3 to 0.9?

3 several lines and is a documentation comment. The What if. Float type data can be saved in a variable declared as int. What happens with the data that is saved?