I’m new to programming, and my objectives are easy to explain: I’m interested in designing a simple program in Sketch that illustrates a user interface that is easy to understand, uses a true or false condition to flip a coin where heads shows one picture and tails shows another picture. I’m overwhelmed about how to begin this project.
I keep reading examples, tutorials, and other learning resources, which are interesting, but I’m still confused with how to develop the program. If there’s someone who could assist me or recommend a tutorial explaining how to create a simple program like I’m a little kid (I’m not being sarcastic), I would appreciate the help.
It is great you are starting with programming. My suggestion is to explore the examples that comes with Processing. Can you run the examples there? You can access this examples easily from the Processing IDE. You just need to go to File >> Examples... If you check the examples, it is very likely one of those examples could be a good starting point for your project. If you find one that you like, you can make a copy of the folder and then you can start adding code to modify the example to your need. Another page to explore would be Examples / Processing.org
You can also try The Coding Train Channel by Daniel Shiffman where he explains different coding concepts from scratch.
For your project, I suggest you become familiar with keyPressed(), PImage and random() as explained in the Reference. How familiar are you with these functions? The first task is to get two images of your like and display them in the sketch. The second task is to click on one of the images to show or hide it. The third step is to use a random function to simulate coin flipping: heads shows the image(s) and tail hides it(them). After you are done these three steps, you can evaluate what you would like to add next. Sounds doable?
One thing: Do you want to use Java or javascript (JS)? Using JS will allow you to run on the browser. There is an extra effort to get started with js as you need to know a bit of html. The good news is that there are quickstart guides as well as online editors that you could use. This project will work well in either Processing flavor (you can even go Python but worth discussing in another post).
Thank you for replying. I will keep exploring tools, examples, tutorials, etc. until I figure them out.
In the meantime, I’m familiarizing myself with the functions you recommended for my coding project. I saw a couple of these functions in another project, but I don’t think I’ve used them.
I tried each function individually, and they’re operable. I’m getting somewhere, right? I’ve included an image of my progress so far, although it appears there are a lot of errors when I combined all three functions into Sketch. If someone could assist me further I would appreciate it.
Screenshots are good to show visuals product of your code(showcase) or to show glitches that you see in your display from your code(debugging purposes). In your case, it is better to copy and paste your code in the forum. Use three back ticks before and after your code so it is formatted properly in the forum, like this:
Finally, I noticed in your code you have multiple draw() and setup() functions. This is not legal. You are allowed to have only one setup and draw function within your current scope. What you should do is merge all the setup code into one one setup function. Do the same for all the draw functions.
I suggest you explore the intro courses from Dan Shiffman. He does a great job explaining how to start in Processing.
I’m watching the tutorials you recommended to see if I can figure out how to make this a great programming experience. I implemented some code. Maybe we can start from here:
size(500,500);
background(176, 204, 226);
stroke(138, 138, 125);
int i;
i = int(random(2));
if (i == 0) {
textSize(100);
textAlign(CENTER);
text("HEADS",250,250);
}
else {
textSize(100);
textAlign(CENTER);
text("TAILS",250,250);
}
I’m still interested in trying the functions you recommended. How can the above function work with the functions below?
PImage img;
int value = 0;
void setup() {
img = loadImage("icecreamcone.jpg");
image(img, 0, 0);
}
void draw() {
fill(value);
rect(25, 25, 50, 50);
image(img, 0, 0);
}
// Click on the image to give it focus,
// and then press any key.
void keyPressed() {
if (value == 0) {
value = 255;
} else {
value = 0;
}
}
for (int i = 0; i < 100; i++) {
float r = random(50);
stroke(r*5);
line(50, i, 50+r, i);
}
Since there are only two possibilities after the coin flips from a random number, I have two pictures in the folder that executes the sketch.
Thanks for the advice so far, Kf. Any assistance is greatly appreciated.
I will place your first code in your second code with some minor modifications first, so you can see what I did. Then, the second code shows my implementation consolidating the code and improving readability.
First try
PImage img;
int value = 0;
int i;
void setup() {
size(600, 400);
img = loadImage("fig.jpg");
image(img, 0, 0);
}
void draw() {
fill(value);
rect(0, 0, width, height); //Changed
if (i==1) {
image(img, 0, 0);
}
fill(140);
if (i == 0) {
textSize(100);
textAlign(CENTER);
text("HEADS", 250, 250);
} else {
textSize(100);
textAlign(CENTER);
text("TAILS", 250, 250);
}
}
// Click on the image to give it focus,
// and then press any key.
void keyPressed() {
i = int(random(2));
if (value == 0) {
value = 255;
} else {
value = 0;
}
}
Second try
final boolean HEADS=true;
final boolean TAILS=false;
PImage img;
int backgroundColor = 0; //black
boolean spinningCoinValue;
void setup() {
size(600, 400);
img = loadImage("fig.jpg");
fill(140);
textSize(100);
textAlign(CENTER);
}
void draw() {
background(backgroundColor);
if (spinningCoinValue == HEADS) {
image(img, 0, 0);
text("HEADS", 250, 250);
} else {
text("TAILS", 250, 250);
}
}
// Click on the image to give it focus,
// and then press any key.
void keyPressed() {
spinCoin();
}
void mouseReleased() {
spinCoin();
}
void spinCoin() {
spinningCoinValue = int(random(2))==1 ? HEADS : TAILS;
}
Keep in mind the following notes:
You need to specify a size in setup. Otherwise you will get a 100x100 sketched which is very tiny
Order matters in draw. If you draw an image first and then a rectangle, then the rectangle will show up on top of the image.
Use background to define the background color of your sketch. Notice you can also use background to set a background image. You can find more in the reference.
Important to focus in code readability. Using i as a name of a variable is not as good as using a descriptor of what the variable stores.
The ? : in the spinCoin() function is a ternary operator, a simplified version of if-else statement. It comes handy sometimes.
Keep checking other examples and keep trying new things.
Thank you for taking the time to rework my coding project and compare it with the code I was having difficulty with. I think your instructions are straight forward and helpful, too. Hopefully I can get my brain rewired to think in code, so I can handle these simple coding tasks on my own.
