Creators – Painting

watercolors-854491_640

This week we looked at making a painting program.

We started with three built in P5.js variables:

  • mouseIsPressed – true whenever the mouse button is held down
  • mouseX – contains the X position of the mouse pointer
  • mouseY – contains the Y position of the mouse pointer

We put the call to background() in the setup() function because we didn’t want to clear the background every frame. After that, in the draw() function, we just needed to draw an circle at the mouse’s position every time the mouse button was pressed.

This gave us an very basic painting program in just a few lines of code!

Toolbar

We then looked at the idea of a toolbar to contain buttons for selecting colours and the size of the brush.

We first need to decide where it would be (the left side of the screen) and we created a variable toolbarSize to store the width of it.

In the draw() function we then added a check not to draw an circle if we were inside the toolbar area.

We then added a new function called mouseClicked(). This is a special function name (like setup() and draw()) that P5.js will call at the appropriate time. In this case its called when the mouse is clicked (button pressed down and the released).

Colour and Sizes

We created two arrays to store a list of colours and brush sizes at the top of our script:

let colours = ['black', 'white', 'red', 'blue', 'green'];
let sizes = [5, 10, 20, 40, 80, 160];

To draw the toolbar, we made a new function called drawToolbar() and put a call to it in our draw() function. In the new function, we looped over the colours array, drawing a new button, filled with the respective colour and then another loop over sizes drawing a square with a circle inside to represent the brush size. We needed to scale those circles to make them fit inside our buttons.

Detecting Selected Button

Since everything in our toolbar was toolbarSize high, to determine what had been clicked on, we just needed to divide mouseY by toolbarSize to get the index of the button that had been clicked on. We looked at that index, if it was less than the number of colours, we must have clicked on a colour. If greater, it had to be a size (or beyond the end).

Selected colours and selected sizes were stored in two variables called currentColour and currentSize respectively and used within the draw() function when creating our circles.

Featured Artwork

Mark suggested that people draw a portrait of me to test our new program and there were some brilliant renderedings. Three people were kind enough to share theirs with me so that I could put them here. I think they’re great!

Download

The files for this week can be found on our GitHub repository.

Week 8 2018 Explorers – Paint Program

Hi everybody,

our drawing program. We made good use of costumes this week to make it look like we were dipping our paint brush in each of the different colours.

We also used a variable similarly to how we used in the Piano Game we made. We made it into a slider and then code select the Pen Size we wanted.

Here are the notes in PDF. CDA-S7-Week_08-Paint.PDF

 

 

Martha

 

Explorers Week 8 – Making a Start on a Paint Program

Hi everybody,

No notes this week, I will wait until we complete the game this Saturday.

Hope you all enjoyed the visit from Medtronic, we really appreciate the volunteers coming out to see us and showing us all the really interesting and exciting things they do….and the lollipops were lovely too.

See you all next week and we will complete our Painting program

Martha

 

Creators – Blender

blender-socket

This week we did some basic modelling in Blender. Blender is a very powerful 3D graphics package that is free and open-source. It is supported across all major desktop platforms.

Blender is so large and fully featured that it can be quite intimidating to learn. Knowledge of a few shortcut keys for common operations can really improve the experience of working with the program. We were indebted to Giuliano D’Angelo’s wonderful Blender shortcut infographic for providing us with some quick reference in this regard:

http://www.giudansky.com/design/51-blender-map

Moving About and Zooming

The first thing we covered in Blender was moving about. Practically speaking, Blender requires a three button mouse to operate. In Blender the middle mouse button (MMB) is used to control the view. Used on its own, it tilts the camera. When used with the SHIFT key, it pans the camera instead. CTRL and the MMB are use to zoom, but this is also more often achieved by scrolling the mouse wheel.

Object Mode and Edit Mode

We used Blender in two modes: Object Mode and Edit Mode. The TAB key can be used to switch between these. In Object Mode we can create, select and reposition objects but we cannot do any detailed editing on them. In Edit Mode, we can do any detailed editing we require on the currently selected object. Note that selecting items in Blender is done with the right mouse button (RMB).

blendereditobjectanim

Continue reading

Scratch Beginners – Week 8- Stop Motion Videos


Last Saturday, we had a fantastic time creating very simple stop motion videos in scratch by taking pictures of small figurines in sequence and then uploading the pictures from cameras and phones to the computer. We then started Scratch and added the very first picture as a SPRITE from a file. All the subsequent pictures were then added as new costumes to this sprite!

We did have to do a very simple code for the sprite – when the GREEN FLAG is pressed the sprite FOREVER uses the NEXT COSTUME command and WAITS .1 seconds. The computer then moves from the first costume down to the last, very quickly, but not so quickly that we can’t see it happen! The result looks like we have taken a video. Check out the scratch.mit.edu website for the demo that I used – Julie Animation. Search the site for cdathenry1516 games.animation code 2

Next week, we will take a look at Paint.net,which is a drawing program. I will quickly go through the menus but the best way to learn a program like this is to use it and experiment with it. We will use it to try to delete the backdrop from some of our pictures that were taken last week to see if we can make it transparent. When we do, we will be able to see our own backdrops in behind our characters.

Please download the Paint.net program from www.getpaint.net/download.html. Please be careful of ADS. Only download from the recommended site. I will bring a copy on a belt.

PAINTNET

 

Next week, the Moms and Dads should bring along a camera or phone along with the lead to download the pictures to your laptop.

Julie

 

Advanced Scratch – Week 8 – Planning for Christmas

Dear Santa,

I would like a nice new game for Christmas.

I would like it to be a Christmas game where you have to catch the presents in the fireplace

Just to make it easier, here are some more things that I would like it to do.

  1. It needs to look like my living room with a nice window and lovely fire place.
  2. At Christmas, when you look out the window it is normally snowing.
  3. We normally have our tree in the corner, with a nice set of lights on it.
  4. Santa normally flies across the top of the house and drops the presents down the chimney, lately he has not had a good aim, so we will need to be able to move the fireplace left and right.
  5. If we catch the presents, we can move them to under the tree.
  6. I don’t want the game to last more than two minutes.
  7. And when it ends I want to know what all the Presents are.

So you might need to think about the following:

  1. What to put on the Stage and what to use Sprites for.
  2. Whether one Sprite should be in front of another Sprite. This is something that we have not done before.
  3. How many costumes each Sprite needs
  4. Do you want to use one Sprite for all the Presents and just change the size and colour.
  5. Stamping could be used to get the Presents under the Tree.
  6. How to do the Snow and the Flashing Lights on the Tree.

Beginners Scratch – Challenge 7 – Buid Your Own Game!

These are the notes from our seventh challenge in Season 2 of Scratch Beginners, CoderDojo Athenry.

The challenge this week was to work on your own game. The coding concepts for this challenge are:

  1. Using the Scratch skills you have acquired for your own games
  2. Creativity and imagination
  3. Designing your own program.

A key point in developing your own game is to start simple, get the first idea tested and working, and then start adding more. We also spoke about the usefulness of planning on paper, rather than jumping straight into coding (which can be a tough one to sell!)

Here are the notes from the day (PDF): CDA-S2-Challenge07-YourGame.pdf

If you want to check how we did things in previous challenges, you can find the programs here: http://scratch.mit.edu/galleries/view/183379

We will continue to work on our own games next week, and I will post a link to a gallery of games that ninjas have produced.