Subcategories

• Tutorials

  Step-by-step guide for building mini-projects

  76
  Topics
  93
  Posts

  

  Introduction

  In an earlier tutorial, you learned how to build a 3 by 3 by 3 Rubik’s Cube. However, that cube can not be played. In this tutorial, you will build a game that can be played by multiple people together: they can all use the same “seed”, which gives them the same random state of the cube.

  e.gif

   
  This tutorial is fairly long. It will be broken into 2 parts:

  How to build a cube that the player can play with How to automatically rotate the cube to generate a new puzzle

   
   

  Part 1 - The Rubik’s Cube

   
   

  Step 1 - Prepare the Sprites

   

  Create a new project on the CreatiCode playground, and name it “Playable Rubik’s Cube”. Remove the “Sprite1” with the dog costumes, and rename the “Empty1” sprite as “Cubes”.

   
   

  Step 2 - Initialize the Scene

   

  As usual, start with a simple scene such as “Empty”, and add the 3D axis. Note that we will make each cube about the size of 1, so the 3D axis length is also very small:

  08c0c1dc-b1e5-4f12-b7e9-b8851457c6de-image.png

   
   

  Step 3 - The"Add Cubes" Block

   

  Now let’s define a new block to add the cubes. Make sure you check “Run without screen refresh”, so it will not update the screen until all cubes are added, which will be a bit faster.

  86d3483f-7a09-4ae7-b2a5-1921b9757453-image.png

   
  Also, run this block after initializing the scene:

  5bc5546a-9d8e-4017-afe0-e3d3c7db0c93-image.png

   
   

  Step 4 - Use a 3-layer For-Loop To Add and Move the Cubes

   

  This step is already explained in the previous tutorial, so we will quickly go through it. We need to create 3 new variables “x”, “y” and “z”, and use 3 for-loops to make them iterate from -1 to 0 and then to 1. These 3 variables will then be used to place each cube in the corresponding position. For example, the first box will be placed at x of -1, y of -1, and z of -1.

  d5f86eb5-3762-469e-99fd-04f0298acef2-image.png

   
  In addition, we are using the size of 0.98 instead of 1, so that there is a small gap between the boxes. Otherwise, the 27 boxes will appear to be one big box. Feel free to pick any colors you like.

  If you zoom in, you will see them like this:

  ed20fde9-eb18-4199-aa65-fe5b8c858619-image.png

   
   

  Step 5 - Assign the ID 1 to 27 to the Boxes

   

  To make it easier for us to refer to these boxes, we will name them using the numbers 1 to 27. We can use a new variable "ID’, set it to 1 initially, and increase it by 1 after we add each box.

  27571587-9039-4f72-bb47-d2b0c9085456-image.png

   
  You can verify they are all added correctly using the object list at the bottom right:

  e3.gif

   
  Note that the box at the center of the cube has the ID of 14, which is exactly the middle between 1 and 27.

   
   

  Step 6 - Fix the Camera

   

  Obviously, we need to move the camera much closer to the cube. More importantly, we need to make sure the user won’t be able to rotate or shift the camera, since the user input will be used to control the boxes themselves. We can achieve both goals with the following block:

  e3.gif

   
  The camera distance is set to 8. The v-angle of 60 will make the camera look down at the cube, so it can see the top face of the cube. The h-angle of 45 ensures that we see 2 side faces symmetrically. Both the key input and point input is set to “No”, so the user can not control the camera using the keyboard or the pointer.

   
  When you run this block, the camera will have a fixed view like this:

  d94eca63-19d2-4e01-975e-6f0e0d36aea0-image.png

   
   

  Step 7 - The Camera Control Sprite

   

  Since the users can’t move the camera by the pointer anymore, we need to provide another way for them to look at different parts of the cube. This logic is fairly self-contained, so we will put it in a new sprite called “Camera Control”.

  In the “Cubes” sprite, after adding the boxes, send a message of “add camera controls” to add the camera control:

  723c92ec-3ac5-42fd-8082-31dd2bf718d8-image.png

   
  Then in the “Camera Control” sprite, receive this message to handle it:

  340b2173-a888-4c4f-b106-273b5ad5d271-image.png

   
   

  Step 8 - Add a Button To Rotate Right

   

  First, let’s add a button using the button widget, and place it at the bottom right corner.

  e52eef48-af61-437b-89ad-5fb2ba3b732f-image.png
   
  Since the button is fairly small, it’s better to use an emoji symbol than writing some words on it. You can copy the right arrow emoji here: ▶

  The name of the button is “rightbutton”.

   
   

  Step 9 - Update Button Style

   

  To make the emoji bigger and colorful, we can update its style using this block:

  c4945f4b-f5ac-4ba7-9aad-f6aecf735262-image.png

  Feel free to adjust its style any way you like. Now the button would look like this:

  2088b7d3-c4c2-4050-8d5c-e7d12d5c11f0-image.png

   
   

  Step 10 - 3 More Buttons

   

  Please add 3 more buttons by duplicating these 2 blocks. They will rotate the camera left, or up/down, or to the opposite direction. You can copy the 3 emojis from here: ↕️, ◀ and ↺

  6b207d58-9b4c-411f-ae46-0b62bc2e30ed-image.png

   
  They look like this:

  97569ab3-533a-493a-bc64-e9d9ff32468c-image.png

   
   

  Step 11 - Rotate the Camera Right

   

  When the “rightbutton” is clicked, we should rotate the camera to the right by updating its h-angle. This task appears simple since we just need to set the new h-angle to be the current h-angle minus 90 over a period of 0.2 seconds. Note that when we leave other inputs empty, their existing values will not be affected.

  12caf25a-9220-4ca9-9ce9-a1b641b2fd0e-image.png

   
  However, as we test this button, sometimes it doesn’t work well:

  e3.gif

   
  The reason is that the “camera h-angle” block always reports a degree value between -180 and 180, so its value will suddenly jump from -135 to 135 when we change it by 90 degrees. How can we fix this issue?

   
   

  Step 12 - The “Camera H Angle” Variable

   

  The solution is to use a new variable to store the current h-angle value of the camera, and we can make sure this value never “jumps” when we update it each time.

  First, we need to set it to the initial h-angle of the camera when the program starts, which is 45.

  2ae7a0e9-c97a-4648-b39d-cd8ad145b8d4-image.png

   
  Next, each time we rotate the camera to the right, we need to change its value by 90, and then use the new value to update the camera.

  7fc766db-d7ed-451d-b94a-6a1a7883ee36-image.png

   
  Now we get a smooth rotation no matter how many times we rotate the button:

  e3.gif

   
   

  Step 13 - Handle the Left Rotation

   

  To rotate the camera to the left, the code is very similar:

  1cf5725e-cacb-4ccb-b887-7711fa0d1ab4-image.png

   
   

  Step 14 - Toggle Top and Bottom View

   

  When the ↕️ button is clicked, the camera will toggle between looking at the top face and the bottom face. Obviously, we need to change the “v-angle” of the camera. The v-angle starts at 60, and we need to change it to 120 when the ↕️ button is clicked. And then we need to toggle it back to 60 when the ↕️ button is clicked again. Essentially the next value for the v-angle is always 180 minus its current value. This can be done using these 2 blocks:

  853fc2b5-67e0-425d-b3ac-02f8db61648f-image.png

   
  You can now test these 3 buttons:

  e3.gif

   
   

  Step 15 - The Opposite View

   

  The ↺ button is supposed to rotate the camera both horizontally and vertically, so the player can quickly review the other 3 faces of the cube. We can combine our solution for the previous 3 buttons: the v-angle of the camera will toggle between 60 and 120, and the h-angle will be calculated using the “Camera H Angle” variable:

  6a6f82d5-2472-4a9c-b5d1-d4957ebe7cc8-image.png

   
  Here is the result:

  e3.gif

   
   

  Step 16 - Turn on “Picking” Event

   

  Now we are done with the camera controls, and let’s switch back to the “Cubes” sprite, and start working on rotating the boxes themselves.

  First, to trigger a rotation, the player will need to start by pressing down the pointer on a cube. We can enable the “picking event” using this block:

  90cd40b1-f535-42ae-b141-aee8970e8c72-image.png

   
  Note that the event is triggered when the pointer is pressed down, not when it is released, because we want to handle the “swipe” gesture: we will record the pointer position when it is pressed down, and compare that with the pointer position when it is released. That will tell us how the player wants to rotate the boxes.

   
   

  Step 17 - Store Some Information

   

  When the picking event is triggered, that means the player has just pressed down the mouse pointer (or finger on mobile devices). At this point, we don’t need to rotate any box yet. We just need to store some information about this event, so we can use them later when the pointer is released. Specifically, we should store these 6 values:

  4fd0fb17-339b-41ba-bb66-05317349b673-image.png

   

  start x/y: they will tell us the 2D position of the pointer on the stage where the user has pressed down the pointer picked box: this is the name of the box right under the pointer. This box will determine which boxes will be rotated. picked point x/y/z: they will tell us the 3D position of the exact point on the picked box that was under the pointer. We can use them to help determine which face of the Rubik’s Cube was clicked.

   
   

  Step 18 - Wait for the Pointer Release

   

  Now we just need to wait for the pointer release event. When the picking event is triggered, the mouse point must be down, so “mouse down” is true. Therefore, we can simply use the “wait until” block to wait until the mouse is no longer pressed down:

  eddd1810-682f-4b07-8b2b-98c554e2d5d5-image.png

   
   

  Step 19 - Calculate Swipe Direction

   

  When the mouse pointer is released, we need to determine which way the player wants to rotate the boxes. We can calculate the direction from the point where the pointer is pressed down initially (start x and start y) and the point where the pointer is released (mouse x and mouse y). We will store this information in a variable called “direction”:

  9ce2d939-a192-45fa-8985-64d18d5bc82c-image.png

   
  Now you can try to drag the mouse pointer in a few different directions, and observe the value of the “direction” variable:

  e3.gif

   
   

  Step 20 - Analysis: Swipe Direction vs Rotation Action

   

  Let’s start with the case where the camera looks down at the cube. Overall, there are 8 types of rotation actions we need to handle:

  To keep it simple, we will only allow the player to click on the right side face or the left side face, and we will ignore it if the player clicks on the top or bottom faces. On the right face (the yellow region), when the player swipes perfectly, the direction will be about 4° for rotating up, -176° for rotating down, 60° for rotating right, and -120° for rotating left. On the left face (the white region), the angles are -4° for rotating up, 176° for rotating down, 120° for rotating right, and -60° for rotating left.
   

  82919b81-d18d-4432-a2ae-272d09362516-image.png

   
   

  Step 21 - The First Rotation Action

   

  To start simple, let’s focus on one rotation action first: suppose the player clicks the right side face, and swipes to the right to rotate horizontally.

  We know that the player’s swipe won’t be perfect. Suppose the player swipes to the right/up direction. How do we know if the player wants to swipe up or right? We can find the average angle between 4° and 60°, which is 32°. So if the swipe direction is greater than 32°, we take that as swiping to the right. Similarly, we can find the average angle between 60° and -176° (equivalent to 184°), which is 122°. So if the swiping direction is less than 122°, we claim the player is swiping horizontally.

  022d544f-02ad-48dd-8b07-126938e08bf9-image.png

   
  We can express this idea using the following blocks:

  32b12a25-a64f-4a8c-bd56-ef6426afef38-image.png

   
   

  Step 22 - Swipe to the Left

   

  Similarly, when the player swipes to the left, we can use a similar range: the average of 4° and -120° is -58°, and the average of -120° and -176° is -148°.

  98382869-52b8-49d4-a7f9-1fcdf87307f9-image.png

   

  So we can add another if-else block for this scenario:

  576fe928-3b44-4d3e-964c-b55323387331-image.png

   
   

  Step 23 - The “Horizontal Rotation” Block

   

  Now let’s define the block that’ll carry out the horizontal rotation. It should take one input parameter “angle”, which controls how many degrees to rotate (90° or -90°) .

  64ac0475-0f14-469d-8224-3f899c71cc57-image.png

   
  Once this new block is defined, we can place it in our if-else branches:

  f3b2016e-1841-413d-b56c-8e54c57d6af7-image.png

   
   

  Step 24 - Which Z Layer to Rotate

   

  Each time we make a move on the Rubik’s Cube, we are rotating 9 out of the 27 boxes. For horizontal rotation, we need to know which of the 3 layers needs to be rotated. We can determine that based on the Z position of the cube the player has picked. Therefore, we can select the box named “picked box”, and read its z position.

  a72b1c43-962d-44e6-a5d8-4bd3367d751d-image.png

   
  Now if you try to drag different boxes on the right face, their Z positions will be printed out, which should be -1, 0 or 1.

   
   

  Step 25 - Select by Z

   

  Now we know the Z layer of the 9 boxes we want to rotate horizontally, we need to select all of them and set the center box (ID = 13) to be the parent of all of them. This way, if we rotate the center box around the Z axis, all 9 boxes will be rotated around the Z axis.

  Since this process will go through all 27 boxes, it might be slow. Therefore, we will define another custom block named “select by z”. It will take the z layer as the input, and select all boxes with the same z position. We need to make this block “Run without screen refresh”, so it runs faster.

  1d430667-f324-4c93-b731-86a37b5c32cc-image.png

   
   

  Step 26 - Select Boxes by Z Position

   

  The goal of “select by z” is to go through all 27 boxes (with ID of 1 to 27), and select the 9 of them that have the same Z position as the input argument. That can be done using the following for-loop:

  d84888fd-c291-4982-b0b8-ef98b7336229-image.png

   
  Note that whenever we select a box as the “sprite object”, the “z position” block tells us the z position of that box, so we just need to check if “z position” is the same as the input argument “z”.

   
   

  Step 27 - Set the Center Box as the Parent

   

  To make all 9 boxes in a layer rotate around the Z-axis, we need to assign a parent to all of them. Then we just need to rotate the parent. The best choice is the box at the center, with an ID of 14. This box will never be visible to the user, which means we can rotate it any way we need.

  5ba62874-27a4-49a2-b4ee-8308acd34568-image.png

   
  That completes our “select by z” block.

   
   

  Step 28 - Use the “select by z” Block

   

  Now we go back to work on the “Horizontal Rotation” block. We will first select 9 boxes by the z position of the box the player has picked using the “select by z” block.

  8ca2c515-5327-4671-ad7e-21cc8f82dbbf-image.png

   
   

  Step 29 - Rotate the Center Box Horizontally

   

  After the “select by z” block, the center box is the parent of the 9 boxes. So we can select the center box (using its ID of 14), and then rotate it over a period of 0.2 seconds. After the rotation, we will unlink all its children, so in the future, we can use the center box to rotate some other boxes. We also need to reset the rotation of the center box.

  bf4877dd-428b-4aee-9931-f9ebb083f3a0-image.png

   
  Now we are done with the “Horizontal Rotation” block. To illustrate how it works, here is an example with some boxes set to transparent:

  e3.gif

   
  As shown, when we swipe the mouse pointer, the center box rotates together with all 9 boxes, and then it resets back to the initial rotation by itself.

   
   

  Step 30 - Swiping Up or Down

   

  Now let’s go back to the logic of “when an object from this sprite is picked”. We already handle the case for swiping right or left. Now let’s add the conditions for swiping up and down.

  As shown, if the direction of the pointer is between -58° and 32°, the player is trying to swipe upwards:

  cc791b24-db0e-4370-bd5f-6e344bc14a31-image.png

   
  In our code, we need another if-else block:

  5337e4ce-c1d7-4ea3-b7f4-e4cca3b0b762-image.png

   
   

  Step 31 - Define “select by x” and “select by y” blocks

   

  When we rotate the boxes vertically, depending on the camera position and the box picked, we may need to rotate the boxes around the X or the Y axis. So we need to be able to select 9 boxes based on a given x position or y position. To prepare for that, let’s first define 2 new blocks of “select by x” and “select by y”. They are very similar to the “select by z” block. Make sure you check the “Run without screen refresh” option.

  ec334089-9f46-4b57-b79b-098eeee0b9cc-image.png

   
   

  Step 32 - Decide Whether to Rotate around X or Y Axis

   

  There are a few ways to determine if we need to rotate around the X or the Y axis. One method is to make use of the picked point’s position.

  First, let’s observe the x and y position of the picked point as we rotate the camera around the cube:

  e3.gif

   
  As shown, since we are clicking on a side face, either the x or the y position of the picked point is 1.49 or -1.49. For example, if the box’s x position is 1, and its size is 0.98, then its face is 0.49 units from its center, so its face is at x of 1.49.

  So how do we know whether to rotate around the X axis or Y axis? Let’s look at one example first:

  e3.gif

   
  In this case, we are clicking a side face that’s facing the position X-axis, and the picked point has an x position of 1.49. If we rotate vertically, it must be around the Y-axis, and the 9 boxes must all have the same y position.

  We can implement this logic like this:

  b103f288-a716-4d5f-86cc-165f7532c62b-image.png

   
  This is very similar to the “Horizontal Rotation” block, with a few differences:

  We check the x position of the picked point to make sure the player is swiping on the side face that faces the positive x direction. Note that we can’t simply check if “picked point x = 1.49”, since sometimes the picked point x variable may give us a value like 1.489999. So it is safer to compare it with a slightly smaller value like 1.48. We are selecting all other boxes with the same y position as the picked box, and setting the center box as their parents We are rotating the center box around the Y axis.

   
   

  Step 33 - Use the “Vertical Rotation” Block

   

  Now we can go back to the “when an object from this sprite picked” block, and make use of the “Vertical Rotation” block for swiping up or down:

  63c3cd52-4417-4081-98d5-901dc8d24b57-image.png

   
  And it should be working now when we swipe the side face in the positive X direction:

  e3.gif

   

   
   

  Step 34 - Swiping the Negative X Face

   

  Now let’s continue to implement the “Vertical Rotation” block. For the case when the player swipes the face that is in the negative X direction (picked point x is close to -1.49), the logic is almost the same, except that we need to rotate in the opposite direction:

  2a117ac3-e687-4be9-b512-d57889db585f-image.png

   
  And now we can test that as well:

  e3.gif

   
   

  Step 35 - Swiping the Positive or Negative Y Faces

   

  When the player swipes on the positive or negative Y faces, we need to select 9 boxes with the same x position, and rotate all of them around the X axis:

  babad4a9-56c5-4f93-b33b-dab0918c5971-image.png

   
  As highlighted, the rotation angle needs to be reverted because the X and Y axis rotation works slightly differently.

  By now, the vertical rotation works for all 4 side faces when we swipe on the right half of the stage:

  e3.gif

   
   

  Step 36 - Swiping the Left Half of the Stage

   

  When the player swipes on the left side face of the cube in the stage, the logic is the same. We will look at the direction of the swipe, and decide which way to rotate and by how much. As shown below, the boundaries between the 4 directions are drawn in yellow:

  dd5bd5f7-473e-4b8d-a016-5c71b2083907-image.png

   
  We can duplicate the logic for “start x > 0” and update the conditions. We also need to update the rotation angles for some cases through trial and error:

  76896136-601b-4b9b-8f3d-86b178195f3d-image.png

   
  By now the player can swipe on the left half of the stage as well:

  e3.gif

   
   

  Step 37 - Camera Looking Up

   

  So far we have only handled the case when the camera is looking down, at a v-angle of 60. When the v-angle is 120, the swiping directions will be different:

  cb09ab9c-58a8-4c24-ad88-98823a79df27-image.png

   
  However, since the camera v-angle is also symmetric between 60° and 120° (horizontal view angle is 90°), we find that the directions between the left side and right side switch with each other.

  Therefore, all that we have to do is to add an extra condition like this:

  84b542cd-802a-4404-b4a8-20bfa1ee3ff2-image.png

   
  This new condition says that

  if the v-angle is 60, do the following when the player swipes on the right half of the stage; Or if the v-angle is 120, do the following when the player swipes on the left half

  The other opposite cases will all be covered by the “else” branch, which doesn’t need to be changed. By now, we are finally done with all the user input handling:

  e3.gif

   
   

  Part 2 - Random Puzzle Generator

   
   

  Step 38 - Add the “Randomizer” Sprite

   

  Now let’s add a new sprite called “Randomizer”. It will be used to generate a random puzzle.

  First, when the green flag is clicked, it should add a new button to the stage. The text on the button is “Randomize”.

  c9de1443-8e4a-46bf-a1ee-9b83914e302d-image.png

   
  The button will look like this:

  7d52294f-6b3e-4c33-80ba-c92865ba8ee9-image.png

   
   

  Step 39 - Ask for a Seed Number

   

  When the player clicks the “Randomize” button, we will ask the player to input a “seed number”. This number will be used to generate a random formation of the cube. One thing special is that given the same seed number, the random numbers it generates are the same. This makes it possible for 2 players to use the same seed number on their own computers and get the same puzzle, so that they can complete who will solve it first.

  We can add the following blocks to the “Randomizer” sprite. We will show a label that says “Specify a seed number:”, so the player knows who they need to input. We use the “ask and wait” block to take the player’s answer. Note that the input is empty here, since for 3D projects, the words input here won’t be displayed anyway. Lastly, when we get the number from the player, we will remove the label widget.

  3c17df22-825d-443c-a953-3570139982cd-image.png

   
   

  Step 40 - Generate 40 Random Numbers

   

  Given the seed number, we will use it to generate 40 random numbers between 0 and 1, and store them in a list variable called “numbers”:

  2f154889-058c-4de4-ac36-56c78f811916-image.png

   
  You can try to run this a few times, and confirm that when the seed number is the same (such as 22), the random numbers in the list are always the same from previous runs.

  e.gif

   
   

  Step 41 - The “randomize” Message

   

  After the random numbers are ready, we will send a message of “randomize” from the Randomizer sprite.

  50e5892e-c2d9-4f0f-b526-ecc859688be5-image.png

   
   

  Step 42 - Go Through the Random Numbers

   

  We will handle that message in the “Cubes” sprite. That’s because to rotate the boxes, we have to select them, and they are all created from the Cubes sprite. We can use a variable “i” to go through the list of random numbers, and change the boxes based on each number’s value:

  72de0451-9d4a-4db1-9307-5a62db9ed916-image.png

   
   

  Step 43 - The “Z Rotation” Block

   

  Now we need to define some new blocks to make it easy to rotate the boxes. First, we will define a new block called “Z Rotation”. It will take one input argument “z”, and it will rotate 9 boxes with that z position. As you can see, this block is very similar to the “Horizontal Rotation” block, except we can easily specify which z layer to rotate.

  adcb8266-fe12-41de-b8e7-7cbe67fb9c73-image.png

   
  You can test it using z values of -1, 0 or 1:

  e.gif

   
   

  Step 44 - The “X Rotation” and “Y Rotation” Blocks

   

  Similarly, we can define 2 more blocks to rotate around the X or Y axis:

  f13fbcbf-db6d-4c1d-94d5-7e7a43b193f3-image.png

   
   

  Step 45 - Map Each Random Number to An Action

   

  Now we have defined 3 blocks to rotate the cube around the 3 Axes. That means we can take any of these 9 actions:

  X Rotation (-1) X Rotation (0) X Rotation (1) Y Rotation (-1) Y Rotation (0) Y Rotation (1) Z Rotation (-1) Z Rotation (0) Z Rotation (1)

   
  We need to find a way to map each random number to one of these actions, and make sure for the same random number, the action is the same.

  We know the random numbers are all between 0 and 1. A simple solution is to multiply each number by 10, then round it to a whole number. Then if the number is between 1 to 9, we will take the corresponding action. This way, random numbers are converted to random actions.

  For example, we can start with the action 1 like this. Whenever the “action” is 1, we will rotate the 9 boxes at X of -1.

  2faa3a58-4bb9-46cd-931b-bcb4640756cb-image.png

   
   

  Step 46 - Add All Actions

   

  The other actions are very similar:

  e.gif

   
  Now our randomization code is also complete. You can test it out. Using the same seed 2 times (such as 22) will give you the same random result:

  e.gif

   
   

  Step 47 - Add a Skybox

   

  Now let’s use a better-looking skybox as the background, and hide the 3D axis. Note that we also need to re-configure the camera’s visible range, since the skybox is far away.

  5ce11179-9a0d-4a6a-b716-584f94988502-image.png

   
  Here is a final demo of the game:

  e.gif

   
   

  Next Steps

   

  Congratulations on completing such a fairly complex project. There are still many more enhancements that can be made based on this project. Here are some ideas worth exploring:

  Timer: You can add a timer to show how many seconds have passed since the player starts the game Reversing the Random Moves: you can add another button to automatically take the opposite of the 40 random moves backwards. This will restore the cube back to the initial state step by step. It will make a very cool animation video. Saving Game State: You can add a “save” button to save the current position/rotation of all 27 boxes using the “save private data” block, and another button to “load” the data and restore the position/rotation of these boxes. Recording of a Solution: Whenever the player makes a move, you can save that move in a list or table. Then when the player has solved the puzzle, you can replay the entire process. Tutorial on how to solve a puzzle: You can create a series of tutorials that teach how to solve a puzzle, such as how to move a particular box to a target position. You can set the cube to any position and ask the player to practice solving it. AI to solve a puzzle automatically: You can work on an algorithm that solves any puzzle. To enable that, you would first need to provide information on the colors of the 9 squares on each of the 6 faces. That information can be derived given the position and rotation of each of the 27 boxes.
• 2D Blocks

  How to use each 2D block

  125
  Topics
  126
  Posts

  

  Introduction

  After 2 objects collide, the 2D physics engine calculates where they would go based on their physics properties, such as mass, speed and restitution. In general, the object with a faster speed or larger mass would tend to “dominate” the interaction, pushing the other object away while maintaining its own course. However, we can change that using “dominance group”.

   

  Set Dominance Group

  We can set the dominance group of any sprite using this block:

  48ae38e1-2cf2-4ccc-832f-3f0c3a381802-image.png

   
  The new group number can be any value between -127 and 127. By default, every object has a dominance group of 0.

  When two or more objects interact with each other, the object with a higher dominance group will have a “stronger weight” on the result. For example, if 2 objects collide, then the one with a higher dominance group would maintain its course, while the other object will be bounced away.

   
   

  Demo

  In this demo project, there are 2 sprites, one beach ball and one basketball. When these 2 balls collide, and if their dominance groups are both 0, then both of them bounce back:

  b1.gif

   
  However, when we set the dominance group of the beach ball to 1, it will not bounce back:

  b2.gif

   
  You can play with this project or modify it here:

  https://play.creaticode.com/projects/65144b7b78dfe33adbb6e2d8
  
  

• 3D Blocks

  How to use each 3D block

  87
  Topics
  87
  Posts

  

  Introduction

  When there are many objects in a 3D scene, you can iterate through all of them using the following block:

  ace349ad-1982-4da7-b3cc-db38788da9f8-image.png

   
  This block will go through all 3D objects created in the current sprite one by one. The variable dropdown allows you to specify a variable, so that the name of each object is stored in this variable one by one.

  You can use this variable to select that object inside this loop, and then add other blocks to manipulate that object.

   
   

  Example Program

   
  This program will create 3 boxes and move them one by one repeatedly. Note that to move a box, we need to select it as the “sprite object” first, and the “object name” variable tells us the name of each box.

   

  53d80d5c-b1df-4e8c-b203-97b1acb1c949-image.png

   
  This is the result:

  obj.gif

   
  You can try the program here:

  https://play.creaticode.com/projects/3b5253351ee5292751648924
  
  

• Live Books

  Free K-12 books that you can use in combination with the CreatiCode platform to learn coding and technologies. Their content will be continuously updated based on your feedback.

  0
  Topics
  0
  Posts
  No new posts.
• Programming

  How to design and develop a solution program

  1
  Topics
  1
  Posts

  

   

  Prerequisite The For-Loop Block The Repeat Block The Repeat Until Block The Forever Block

   

  What are Loops?

  A “loop” is a block for playing other blocks repeatedly. Below are some loop blocks you can use on the CreatiCode playground;

  
   

  What are Nested Loops?

  When you put one loop inside another loop, it becomes a “nested loop”. You can even have a third loop inside the inner loop.

  
   

  How Nested Loops Work?

  When you run a program with a nested loop, the inner (child) loop will work like a normal loop. However, because of the outer (parent) loop, the inner loop itself will be repeated.

  Here is a step-by-step example:

  Step 1: The main loop is played.

  
   

  Step 2: The Nested loop is started.

  
   

  Step 3: The blocks inside the nested loop are played until the condition of the nested loop is completed.

  
   

  Step 4: The blocks after the nested loop are played (if there are any).

  
   

  Step 5: The main loop is restarted.

  Note: All of the above 5 steps keep repeating until the condition of the main loop is completed.

  For example, as shown below, “repeat until ” is the nested loop, which keeps the monkey moving until it touches the edge of the stage. And “repeat (5)” is the main loop which repeats the nested loop 5 times.

  
   

  Use of Nested Loops

  We use Nested loops when we want to repeat multiple blocks at the same time, until multiple conditions are completed.

  For example, as shown below, nested loops are used to make the monkey move and eat bananas at the same time.

  
   

• Tools

  Design tools, math tools, collaboration tools, programming tools

  19
  Topics
  19
  Posts

  

  You can use the “New Bing” AI to create images for free. This can be used for many purposes, such as game arts, story books, presentations, etc.

  How to get started

   

  There are 2 common ways to get access to the New Bing image creator.
   

  1. Visit the Image Creator Website

  You can use any web browser to open this link: Bing.com/Create

  Type in your request, then click “Join and Create”.

  6cc9b469-893f-4c64-8bcf-8432e6f78576-image.png

   
  You will need to sign in using your Microsoft account, which can be created for free. After that, you will be able to create new images by describing them:

  b1f7aedf-e856-406d-b910-8afc189563b1-image.png

   
  Usually, you will get 4 variations of the image, and you can click on any of them to get the full-resolution version.

   

  2. Use the New Bing Chat

   
  Another way is to use the New Bing Chat on Microsoft’s Edge browser. You can use either a Windows computer or a Macbook.

  After that, visit bing.com, and click on the chat link on top:

  91e10786-3835-48a0-8057-af73950a81ee-image.png

   
  In the chat window, you can not only chat with the AI chatbot but also ask it to draw images for you.

   
  2ccb88bc-7594-45f0-853d-f37f5ba37ef0-image.png

   
  The benefit of using the chat tool is that you can modify your previous requests, and the AI chatbot will automatically generate a new request based on the conversation history.

  For example, suppose the first request is “a dog crossing the street”. After we get the images, we can say “make it wear a hat”. Now the chatbot will create a new request for us, such as “a dog crossing the street wearing a hat”. Note that it understands “make it” means “make the dog”, and it also remembers the dog is “crossing the street”. This feature allows us to continue to refine our requests until we get what we need.

  4d51ee56-c3da-4175-bfeb-ffe85f8ebe47-image.png

   
   

  Image Creation Tip 1 - Give Detailed Descriptions

  To get great images, the most important rule is to describe what you need in great detail. The image generator looks at every word in your request to get "inspiration’ for what to draw in the image.

  For example, we can improve our request to add more details like this: “draw a golden retriever crossing a busy street with many cars”, which gives more details on the dog and the street. And this is what we will get:

  1d4806fa-122e-4967-b784-d5a0629cd7aa-image.png

   
  As you can tell, all the new details are reflected in the result images.

   
   

  Image Creation Tip 2 - Specify a Style

  The “style” of an image refers to the unique way it looks, including the colors, lines, and arrangement of things in the picture. With the same request, when we specify a different style, we would get very different results. You will need to play with different styles to learn when you should use a particular style.

  Below are some commonly used styles:

   

  a dog crossing the street, photorealistic

  0c18964d-d16c-45ef-a792-4d4984561ea5-image.png

   

  a dog crossing the street, watercolor

  c12fab0f-37e0-4b25-91f6-198056006436-image.png

   

  a dog crossing the street, cartoon

  dc8e0d78-76bd-4b80-81db-fae18f73091c-image.png

   

  a dog crossing the street, pencil sketch

  44077fb4-8e5c-4052-b8c0-18d46c916843-image.png

   

  a dog crossing the street, anime

  c15a7903-4a91-450e-aae2-4b91036bad73-image.png

   

  a dog crossing the street, impressionism

  5650408f-c830-413e-abe2-8b020b8c3d79-image.png

   

  a dog crossing the street, digital art

  201f856f-05d2-4dda-b23b-f46d53704dcf-image.png

   

  a dog crossing the street, pixel art

  9d3b175f-9598-4d80-b7a8-5377ba9cc703-image.png

   

  a dog crossing the street, animated

  998b31bf-a295-4896-aa51-1fcc324cfe81-image.png

   

  a dog crossing the street, drawn with crayons

  8bfb4cc2-5dbe-4322-aceb-12ca50d1ac24-image.png

   

  a dog crossing the street, freehand

  105b8e54-dd18-4f1a-ad98-2631b78d13eb-image.png

   

  a dog crossing the street, Minimalistic

  1a5b9d8c-eeed-4eb1-9806-a6908ee4cc6e-image.png

   

  a dog crossing the street, Retro

  9c8d21df-6dfa-41d6-8c51-bfcdc1e5c02c-image.png

   

  a dog crossing the street, storybook

  1f050e97-f8a0-41ec-886c-96161e3638b4-image.png

   
  If you are interested, there are many more styles you can try:

  Abstract Expressionism: A post–World War II art movement in American painting, developed in New York in the 1940s. Abstract Illusionism: A painting style combining the techniques of Trompe-l’œil with abstract painting. Aestheticism: Late 19th-century movement that championed “art for art’s sake”. ASCII Animation: Art of creating moving images via the arrangement of ASCII characters. ASCII Art: Art made out of ASCII text characters. Art Nouveau: Style of decorative art, architecture, and design prominent from the late 19th to early 20th centuries. Arte Povera: Contemporary art movement associated with a group of Italian artists who attacked the values of established institutions of government, industry, and culture. Assemblage: Art that is made by assembling disparate elements. Auto-destructive Art: Form of art coined by Gustav Metzger, where the creation of the artwork results in its destruction. Asemic Writing: Wordless open semantic form of writing. Augmented Reality Art: Art that incorporates the live view of a physical, real-world environment augmented by computer-generated perceptual information. Baroque: An art style of the 17th century characterized by complex forms, bold ornamentation, and contrasting elements. Blackwork: Monochromatic, extremely detailed, design style used in engravings. BioArt: Art practice where humans work with live tissues, bacteria, living organisms, and life processes. Body Art: Art made on, with, or consisting of, the human body. Brutalist: Architectural style characterized by a deliberate plainness, crudity, and transparency that can often be interpreted as austere and menacing. Byzantine: Art made in the Byzantine Empire from the fourth to the fifteenth century. Calligram: Text visually arranged in a way that it forms an image associated with the text’s contents. Camera-less Photography: Images made without a camera by placing objects directly onto the surface of a light-sensitive material and then exposing it to light. Caricature: A representation in which the subject’s distinctive features or peculiarities are deliberately exaggerated to produce a comic or grotesque effect. Cartoon: A simple drawing showing the features of its subjects in a humorously exaggerated way. Ceramic Art: Art made from ceramic materials, which may take forms including art ware, tile, figurines, sculpture, and tableware. Chicano Art: An American art movement encouraging political activism and reinforcing Chicano cultural values. Circles in Art: Use of circles in art can depict wholeness, unity, and infinity. Classicism: Art that is inspired by the principles of ancient Greece and Rome. Collage: Art of assembling different forms, thus creating a new whole. Comic Strip: Sequential art in the form of a series of cartoon images. Conceptual: Art in which the concept or idea involved in the work takes precedence over traditional aesthetic and material concerns. Cosplay: Practice of dressing up as a character from a movie, book, or video game, especially from the Japanese genres of manga and anime. Cubism: Early 20th-century style and movement in art, especially painting, in which perspective with a single viewpoint was abandoned and use was made of simple geometric shapes, interlocking planes, and, later, collage. Cyber Art: Art that uses computer and internet technologies. Dada: An art movement formed during the First World War in Zurich in negative reaction to the horrors and folly of the war. Dark Art: Art that illustrates a disturbing aspect of the artist’s imagination. Decoupage: The art or craft of decorating objects with paper cut-outs. Doodle: A sketch or simple drawing that may have concrete representational meaning or may just be composed of random and abstract lines. Embroidery: Craft of decorating fabric or other materials using a needle to apply thread or yarn. Environmental Art: Art that helps improve our relationship with the natural world. Etching: Printmaking technique that uses chemical action to produce incised lines in a metal printing plate which then hold the applied ink and form the image. Expressionism: A style of painting, music, or drama in which the artist or writer seeks to express emotional experience rather than impressions of the external world. Fantasy: Genre of art that depicts magical or other supernatural themes, ideas, creatures or settings. Fiber Art: Works of art that communicate some sort of message, emotion or meaning and it incorporates fabric or textiles. Figurative: Art that represents or attempts to represent the appearance of things. Fine Art Photography: Photography created in accordance with the vision of the artist as a photographer, using photography as a medium to bring something to life that only lives in the artist’s mind. Frottage: Art technique of obtaining textural impressions on paper. Futurism: An artistic and social movement that originated in Italy in the early 20th century. Generative Art: Art that in whole or in part has been created with the use of an autonomous system. Geometric: Style of art based on the use and application of geometric figures. GIF Art: Artistic creation of animated GIFs. Glitch Art: Artistic use of digital or analog errors for aesthetic purposes. Gothic: Style of architecture and art that developed in the late Middle Ages. Graffiti: Writing or drawings scribbled, scratched, or sprayed illicitly on a wall or other surface in a public place. Graphic: Visual art related to drawing, design, illustration, and printmaking. Henna Art: Body art using a paste, created from the powdered dry leaves of the henna plant. High-Dynamic-Range: Technique used in imaging and photography to reproduce a greater range of luminosity. Holography: Technique to record light scattered from an object, and present it in a way that appears three-dimensional. Hyperrealism: Genre of painting and sculpture resembling a high-resolution photograph. Icon: In Eastern Orthodox Christianity, a flat picture of Jesus, a saint, or an angel that is used as an aid to prayer. Illustration: Decoration, interpretation, or visual explanation of a text, concept, or process. Impressionism: 19th-century art movement characterized by relatively small, thin, yet visible brush strokes. Interactive Art: Form of art that involves the spectator in a way that allows the art to achieve its purpose. Kinetic Art: Art, including sculptures, that contain moving parts or depends on motion for effect. Kawaii Art: Art related to cuteness in the context of Japanese culture. Land Art: Art movement in which landscape and the work of art are inextricably linked. Lettering: Art of drawing letters, used in anything from road signs and posters to logos and ads. Light and Space: A loosely affiliated art movement related to op art, minimalism and geometric abstraction originating in Southern California in the 1960s. Live Coding: Performance art in which the performer creates or modifies algorithms on the fly. Lowbrow: Pervasive pop-culture imagery, often comic/animated or related to “lowbrow” culture. Mail Art: Movement centered on sending small scale works through the postal service. Manga: A style of Japanese comic books and graphic novels. Miniature Art: Art that fits inside a 25mm scale and holds a high level of detail. Mirror Art: Art created with mirrors, often playing with reflection and perspective. Minimalism in Art: Style that uses pared-down design elements. Modern: Style of art that rejects the traditional and historical styles, and has no clear rules. Monochrome: Artwork created in only one color or values of one color. Mosaic: Art made by arranging small pieces of stone, tile, or glass to create an image. Native American Art: Wide category that includes various forms of visual art. Neo-classicism: Western cultural movement in the decorative and visual arts that draws inspiration from the “classical” art and culture of Ancient Greece or Ancient Rome. Neon Art: Art using neon lighting, known for bright and vibrant colors. Noise Music: Genre of music that is characterized by the expressive use of noise. Outsider Art: Art by self-taught or naïve art makers. Papercraft: Collection of art forms employing paper or card as the primary artistic medium. Performance Art: Art form that combines visual art with dramatic performance. Photorealism: Genre of art that encompasses painting, drawing and other graphic media, in which an artist studies a photograph and then attempts to reproduce the image as realistically as possible. Pointillism: Technique of painting in which small, distinct dots of color are applied in patterns to form an image. Pop Art: Art based on modern popular culture and the mass media. Portrait Photography: Photography of a person or group of people that captures the personality by using effective lighting, backdrops, and poses. Post-Impressionism: Art movement that developed in the 1890s. It is characterized by a subjective approach to painting, as artists opted to evoke emotion rather than realism in their work. Psychedelic Art: Art inspired by the psychedelic experience induced by drugs like LSD. Public Art: Art in any media that has been planned and executed with the intention of being staged in the physical public domain, usually outside and accessible to all. Quilling: Art form that involves the use of strips of paper that are rolled, shaped, and glued together to create decorative designs. Renaissance: Period in European art of the 14th, 15th, and 16th centuries. Rococo: Exceptionally ornamental and theatrical style of architecture, art and decoration which combines asymmetry, scrolling curves, gilding, white and pastel colors. Romanticism: Movement that emphasized emotion and individualism as well as glorification of all the past and nature. Scenic Photography: Photography of landscapes, outdoor scenery, such as mountains, forests, and waterfalls. Site-Specific Art: Artwork created to exist in a certain place. Social Practice: Art medium focusing on engagement through human interaction and social discourse. Sound Art: Art which uses sound both as its medium and as its subject. Space Art: Genre of modern artistic expression emerging from knowledge and ideas associated with outer space. Stuckism: International art movement that promotes figurative painting in opposition to conceptual art. Street Art: Visual art created in public locations, usually unsanctioned artwork executed outside of the context of traditional art venues.

   
   

  Image Creation Tip 3 - Specify an Artist

  You can also specify a famous artist with a lot of well-known paintings. Then the image creator AI will try to copy that artist’s style. Here are some examples:

   

  a dog crossing the street, by Monet

  5be927b3-070d-4fd1-9197-3540b1936d8e-image.png

   

  a dog crossing the street, by Picasso

  5ff054e9-527a-4c1a-97ab-f93487b6ecdf-image.png

   

  a dog crossing the street, by Leonardo da Vinci

  da04999c-cae6-45a5-be1c-a7894df34ad6-image.png

   
   
  In case you are interested, here is a list of famous artists:

  Leonardo da Vinci: Italian Renaissance polymath, known for his detailed and scientifically accurate depictions in his works like “Mona Lisa” and “The Last Supper”. Michelangelo: Italian sculptor, painter, and architect, famous for his realistic human sculptures and detailed anatomical drawings in the Sistine Chapel. Rembrandt van Rijn: Dutch artist known for his innovative use of light and shadow in his Baroque-era portraits, self-portraits, and biblical scenes. Claude Monet: French painter who is known as the father of Impressionism, particularly recognized for his plein-air landscape painting. Pablo Picasso: Spanish painter and sculptor, co-founder of the Cubist movement, known for his contribution to Symbolism and Surrealism. Vincent van Gogh: Dutch post-Impressionist painter whose works, characterized by bold colors and dramatic, impulsive and expressive brushwork, contributed to the foundations of modern art. Pierre-Auguste Renoir: Leading French painter in the development of the Impressionist style, known for his depictions of people in intimate and candid compositions. Edgar Degas: French artist famous for his pastel drawings and oil paintings of ballerinas. Paul Cézanne: French artist and Post-Impressionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century. Caravaggio: Italian painter noted for his realistic depiction of the human state, both physical and emotional, and his revolutionary use of light. Frida Kahlo: Mexican painter known for her many portraits, self-portraits, and works inspired by the nature and artifacts of Mexico. Johannes Vermeer: Dutch Baroque period painter who specialized in domestic interior scenes of middle-class life. Henri Matisse: French artist, known for his use of color and his fluid and original draughtsmanship, a leading figure in modern art. J.M.W. Turner: English Romantic painter, printmaker and watercolorist, known for his expressive colorization, imaginative landscapes, and turbulent marine paintings. Salvador Dalí: Spanish Surrealist artist, best known for his bizarre and striking images in his surrealist work. Raphael: Italian Renaissance painter and architect, known for his perfect and serene depictions influenced by his love of classical antiquity. Katsushika Hokusai: Japanese ukiyo-e painter and printmaker of the Edo period, best known for his series “Thirty-Six Views of Mount Fuji”. Jackson Pollock: American painter, a major figure in the abstract expressionist movement, known for his unique style of drip painting. Wassily Kandinsky: Russian painter and art theorist, credited with painting one of the first recognized purely abstract works. Édouard Manet: French modernist painter known for his realist and impressionist styles, he was a pivotal figure in the transition from Realism to Impressionism. Gustav Klimt: Austrian symbolist painter, known for his paintings, murals, sketches, and other objets d’art, his primary subject was the female body. Marc Chagall: Russian-French artist of Belarusian Jewish origin, known for his colorful and dreamlike depictions of Jewish life and folklore. Egon Schiele: Austrian painter, a protege of Gustav Klimt, known for his intense figurative works and self-portraits. Francis Bacon: Irish-born British figurative painter known for his raw, unsettling imagery. Peter Paul Rubens: Flemish artist and diplomat from the Duchy of Brabant in the Southern Netherlands (modern Belgium), known for his extravagant Baroque style. Georgia O’Keeffe: American artist, known for her paintings of enlarged flowers, New York skys[censored]ers, and New Mexico landscapes, she was an important contributor to American modernism. Grant Wood: American painter, known for his paintings depicting the rural American Midwest, particularly “American Gothic”. Joan Miró: Spanish painter, sculptor, and ceramicist, known for his surrealist and symbolic works. Diego Velázquez: Spanish painter, the leading artist in the court of King Philip IV, known for his technique of loose brushstrokes and for creating a realistic depiction of human skin tones. Jan van Eyck: Flemish painter, one of the early innovators of what became known as Early Netherlandish painting, known for his innovative approach to secular realism and optical effects. Edvard Munch: Norwegian painter, his best-known work, “The Scream” (1893), has become an iconic image of existential angst. Jean-Michel Basquiat: American artist of the 1980s known for his raw, Neo-Expressionist pieces focusing on dichotomies such as wealth versus poverty, integration versus segregation, and inner versus outer experience. Thomas Gainsborough: English portrait and landscape painter, draughtsman, and printmaker, known for his elegant portraits and romantic landscapes. Sandro Botticelli: Italian painter of the Early Renaissance, known for his mythical and religious works, most notably “The Birth of Venus” and “Primavera”. Titian: Italian painter, the most important member of the 16th-century Venetian school, known for his versatile range in different art genres and his application and use of color. Mary Cassatt: American painter and printmaker, known for her works about the social and private lives of women, with a focus on the intimate bonds between mothers and children. Andy Warhol: American artist who was a leading figure in the visual art movement known as pop art, his works explore the relationship between artistic expression, celebrity culture, and advertising. Tintoretto: Italian painter and a notable exponent of the Venetian school, known for his large-scale narrative works with dramatic lighting effects. Willem de Kooning: Dutch-American abstract expressionist artist known for his high-energy, gestural technique. Roy Lichtenstein: American pop artist, known for his use of comic strip and advertising imagery. Paul Klee: Swiss-born artist known for his color theory, and his deeply individual style was influenced by movements in art that included expressionism, cubism, and surrealism. Henri Rousseau: French post-impressionist painter known for his primitive style and depictions of jungle scenes. Norman Rockwell: American author, painter, and illustrator, known for his works of social commentary and nostalgia. Albrecht Dürer: German painter, printmaker, and theorist of the German Renaissance, known for his high-quality woodcuts and establishing its recognized form. Paul Gauguin: French post-Impressionist artist, known for his experimental use of color and synthetist style that were distinct from Impressionism. Yayoi Kusama: Japanese contemporary artist, known for her infinity nets, dots and pumpkin motifs, and large-scale installations. Kazimir Malevich: Russian avant-garde artist and art theorist, founder of the art movement Suprematism, which focused on basic geometric forms. Edward Hopper: American realist painter, known for his oil paintings of contemporary American life. Gerhard Richter: German visual artist, known for his abstract as well as photorealistic paintings, glass pieces, and photography. David Hockney: English painter, draughtsman, printmaker, stage designer, and photographer, a crucial contributor to the pop art movement of the 1960s. Amedeo Modigliani: Italian Jewish painter and sculptor who worked mainly in France, known for his modern style characterized by elongation of faces and figures. Artemisia Gentileschi: Italian Baroque painter, known for her depictions of powerful women from myths, allegories, and the Bible. Frida Kahlo: Mexican artist known for her many portraits, self-portraits, and works inspired by the nature and artifacts of Mexico. René Magritte: Belgian surrealist artist known for his witty and thought-provoking images. Lucian Freud: British painter and draftsman, known for his impastoed portraits and figure paintings. Bruegel the Elder: One of the most significant artists of Dutch and Flemish Renaissance painting, known for his landscapes and peasant scenes. Jean-Antoine Watteau: French painter whose brief career spurred the revival of interest in color and movement, known as the “Watteau style”. Giorgione: Italian painter of the Venetian school in the High Renaissance from Venice, whose career was cut off by his death at a little over 30. Pierre Bonnard: French painter and printmaker, known for his intense use of color, as well as his complex compositions. Barnett Newman: American artist known for his Color Field paintings and for being one of the leading figures in abstract expressionism. Piero della Francesca: Italian painter of the Early Renaissance known for his serene humanist depictions. Nicolas Poussin: French painter in the classical style known for his clarity, logic, and order, and favors line over color. Fra Angelico: Italian painter of the Early Renaissance known for his depictions of the life of Christ, Virgin Mary, and the Saints. Mark Rothko: American painter known for his abstract paintings composed of luminous, soft-edged rectangles of color. Donatello: Italian sculptor of the Renaissance known for his work in bas-relief, a type of shadow relief that uses subtle gradations of light and shadow to suggest depth. John Constable: English Romantic painter known for his landscape paintings of Dedham Vale, the area surrounding his home. Tiziano Vecelli (Titian): Italian painter during the Renaissance, considered the most important member of the 16th-century Venetian school. John Singer Sargent: American painter, considered the “leading portrait painter of his generation” for his evocations of Edwardian-era luxury. Eugène Delacroix: French Romantic artist known for his dramatic historical and political scenes. James McNeill Whistler: American artist known for his subtle and delicate paintings and etchings, and for his outspoken art theories. Cy Twombly: American painter, sculptor, and photographer known for his large-scale, graffiti-like paintings. Jan Vermeer: Dutch Baroque Period painter who specialized in domestic interior scenes of middle-class life. Hans Holbein the Younger: German artist and printmaker known for his stunning and detailed portrait works. Robert Rauschenberg: American painter and graphic artist known for his combines, a term he coined for his own creations that merged painting and sculpture. J.A.D Ingres: French Neoclassical painter known for his portraits, historical and mythological works. Piet Mondrian: Dutch painter and theoretician known for being one of the pioneers of 20th-century abstract art. Élisabeth Vigée Le Brun: French portrait painter of the late eighteenth century known for her distinctive style that differed from the traditional cold and aloof portraits of the period. Giovanni Bellini: Italian Renaissance painter known for his contribution to the Venetian school of painting. Winslow Homer: American painter and printmaker known for his marine landscapes. Yves Klein: French artist known for his monochrome works, especially his trademark, ultramarine pigment. Dante Gabriel Rossetti: British poet, illustrator, painter and translator known for his role in the Pre-Raphaelite Brotherhood. Anselm Kiefer: German painter and sculptor known for his large-scale and controversial themes. Hieronymus Bosch: Dutch/Netherlandish draughtsman and painter known for his detailed panels and intricate use of symbolic and iconographic content. Diego Rivera: Prominent Mexican painter and muralist known for his frescoes helping establish the Mexican Mural Movement in Mexican art. Joseph Mallord William Turner: English Romantic painter, printmaker and watercolourist known for his expressive colourisations, imaginative landscapes and turbulent marine paintings. Joshua Reynolds: English painter known for his portraits and as a founder and first president of the Royal Academy. Camille [censored]arro: Danish-French Impressionist and Neo-Impressionist painter known for his landscape and rural and urban French scenes. Edward Burne-Jones: British artist and designer closely associated with the later phase of the Pre-Raphaelite movement. L.S. Lowry: English artist known for his stylized, simplistic depictions of the industrial districts in North West England. Fernand Léger: French painter, sculptor, and filmmaker who was deeply influenced by modern industrial technology and Cubism. Jacques-Louis David: French painter in the Neoclassical style, considered to be the preeminent painter of the era. Tom Thomson: Influential Canadian artist of the early 20th century who directly influenced a group of Canadian painters known as the Group of Seven. Hans Memling: German painter who moved to Flanders and worked in the tradition of Early Netherlandish painting. Giorgio de Chirico: Greek-born Italian artist known for his Metaphysical painting style of dream-like scenes with unexpected juxtapositions of objects. Andre Derain: French artist, painter, sculptor and co-founder of Fauvism with Henri Matisse. Clyfford Still: American painter, one of the leading figures in the first generation of Abstract Expressionists. Caspar David Friedrich: 19th-century German Romantic landscape painter, generally considered the most important German artist of his generation. Ernst Ludwig Kirchner: German expressionist painter and printmaker and one of the founders of the artists group Die Brücke. Georges Seurat: French post-Impressionist artist known for inventing the painting techniques known as chromoluminarism and pointillism. Käthe Kollwitz: German artist known for her works focusing on the hardships of the working class and the horrors of war.

   
   

  Exercises

  To reinforce what you have learned, try to create some images for these tasks:

  Create a cover screen for one of the Scratch projects you have created before, such as games or stories.

  Create an image to represent one of your favorite books or stories.

  Create an image for one of your favorite cartoon characters, like superman or batman.