I am trying to write a program where the text is growing so that the larger the number, the larger the font size.
I have an array from 0-9 showing on my screen but struggle to have the growth of the font size.
Does anyone have a hint for me?
My current code is:
int[] numbers = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
void setup() {
size(800, 500);
}
void draw() {
background(28, 130, 42);
for (int i = 0; i < numbers.length; i++) {
textSize(32);
fill(51, 102, 104);
text(""+(i), 100+(i)*50, height/2);
}
}
textSize(32) is hardcoded and not dynamic, do something like this:
for (int i = 0; i < numbers.length; i++) {
textSize(3 * i + 3);
// Your code that draws to screen
}
I've changed 32 to 3 * i + 3 so your textSize will range from 3-30.
Ofcourse this can be anything you want, just make sure it's some calculation based on i, as the loop continues i will increase and fontSize will too.
Try to use this function, where 'fontSize' is the value of the array (times n, depending on how big you want your font).
.setFont(new Font("TimesRoman", Font.PLAIN, fontSize));
Related
Maybe this is only my problem, but I simply can't find this while searching on Google, and it shouldn't be that hard.
I'm looking for a Class/API for 2D plotting.
I need a method in which I give a series of int or double values, and it plots them in a 2-coordinate plane, and draws the plane on a JFrame or JPanel.
Here's a method:
public void plot(String ints, Graphics g) {
ints = "put all nums here (e.g. 4,3;9,1;1.1,2)";
String[] Part1 = ints.split(";");
String coor1 = Arrays.(Part1[0]);
String coor2 = Arrays.(Part1[2]);
g.drawLine(50, 0, 2, heightOfFrame);
g.drawLine(0, 50, widthOfFrame, 2);
g.drawLine(45, 40, 10, 2);
g.drawLine(40, 45, 2, 10);
int coord1 = Integer.parseInt(coor1) * 10;
int coord2 = Integer.parseInt(coor2) * 10;
g.drawOval(coord1-1, coord2-1, 2, 2);
}
In theory, this should work - though I haven't tested it - so please tell me about any bugs in this and I'll fix it.
BTW: this only covers 0 and 1 x and y; but it's the general idea to get you started.
I'm stitching a bitmap from a layout array, that puts the a larger bitmap together as a guide. Using multiple bitmaps into one bitmap. What I rotate the whole bitmap, my solution is to restitch it but have the array account for this rotation. The making of the bitmap is determined by the order of the array. The stitching assumes that the array starts from zero and that is the first index or the left top most corner and then goes to the right to the end and goes to beginning of the next row. I would like to have a 90, 180, 270, and 360 functions to call on. I'm thinking 360 is easy I iterate backwards. I'm using 11 by 11 which is constant.
For example
0, 1, 3, 4
5, 6, 7, 8,
9, 10, 11, 12
13, 14, 15, 16
when I rotate 90
4, 8, 12, 16
3, 7, 11, 15
1, 6, 10, 14
0, 5, 9, 13
Try this. This may have performance impact but its a simple solution.
import java.util.Arrays;
public class RotateMatrix {
public static void main(String[] args) {
int original[][] = { { 0, 1, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 },
{ 13, 14, 15, 16 } };
printArray(original);
System.out.println("After 90 Degree");
printArray(rotate(original, 90));
System.out.println("After 180 Degree");
printArray(rotate(original, 180));
System.out.println("After 270 Degree");
printArray(rotate(original, 270));
System.out.println("After 360 Degree");
printArray(rotate(original, 360));
}
private static int[][] rotate(int[][] original, int angle) {
int[][] output = original;
int times = 4 - angle/90;
for(int i=0; i<times; i++){
output = rotate(output);
}
return output;
}
private static int[][] rotate(int[][] original) {
int n = original.length;
int m = original[0].length;
int[][] output = new int[m][n];
for (int i = 0; i < n; i++)
for (int j = 0; j < m; j++)
output[j][n - 1 - i] = original[i][j];
return output;
}
private static void printArray(int[][] array) {
for (int i = 0; i < array.length; i++) {
System.out.println(Arrays.toString(array[i]));
}
}
}
This rotates the array anti-clockwise direction just as in your example. However if you want to change this to clockwise just change int times = 4 - angle/90; to int times = angle/90; in rotate(int[][] original, int angle) method.
I'm trying to make a graph in processing, but keep getting the "ArrayIndexOutOfBounds" error. I am having a hard time understanding the concept of the map() syntax, could anyone clear it up for me? I'm not sure what every number is supposed to stand for within map(x,y,z,a,b);
String[] name = {
"1st:",
"5th:",
"10th:",
"15th:",
"20th:",
"25th:",
"30th:"
};
int[] temperature = {
81,
82,
84,
85,
87,
88,
90
};
void setup(){
size(200,200);
}
void draw(){
int x=0;
for(int i=0;i<10;i++){
if(mouseX>x && mouseX<=x+40){
fill(255,40,40);
}else{
fill(50);
}
float h = map(temperature[i], 0, 100, 0, 200);
rect(x+4,height-h,32,h);
x+=40;
}
}
Your arrays have 7 elements, but you iterate 10 times.
for(int i=0;i<10;i++){
...
float h = map(temperature[i], 0, 100, 0, 200);
}
Either you fill up your arrays with additional 3 elements, or better: Instead of the number 10 you should use i < temperature.length() as condition in for-loop.
I've been trying to figure this out for a while, and it's driving me mad. As most people know, if you draw 10 rectangles next to each other, ranging from white to black in equal steps of HSV brightness, they will not be perceived equal to the eye. Here's an example of that:
And the code in Processing:
void setup()
{
size(600, 150);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);
translate(50, 50);
noStroke();
for(int i = 0; i < 10; i++)
{
fill(0, 0, i * 10);
rect(i * 50, 0, 50, 50);
}
}
As you can see, the contrast between some of the darker tiles is perceived much bigger than with some of the white tiles.
Many people have pointed this out. In his book The Art of Color, Josef Albers describes (based on the Weber-Fechner law) that you should instead increase the brightness in exponential steps. It was later proved that Albers did some nasty miscalculations, and the idea of using a constant logarithmic increase in brightness proved true only within very limited bounds. There has been a lot of papers on this, but many of them are very hard for me to read, and most of them ties to physical aspects of the retina.
So my question is:
Given any color, how do I calculate the perceived equal steps in brightness from HSV brightness 0 to 100?
Even better, how do I calculate the perceived equal steps in brightness from any one color to any other color?
I'm generating files for print via code, and I need to do this in Processing. Any example in any language will do though.
For other people looking to do this in Processing, here's the answer. The Toxiclibs TColor class ships with LAB -> RGB conversion, so it wasn't hard. As you can see in the screenshot, the difference is clear.
import toxi.color.*;
import toxi.geom.*;
void setup()
{
size(600, 250);
colorMode(RGB, 1, 1, 1);
background(1);
noStroke();
translate(50, 50);
// RGB: 10 rects where perceived contrast is NOT equal in all squares
for(float i = 0; i < 10; i++)
{
fill(i / 10.0, i / 10.0, i / 10.0);
rect(i * 50, 0, 50, 50);
}
// LAB: 10 rects where perceived contrast IS equal in all squares
translate(0, 50);
for(int i = 0; i < 10; i++)
{
float[] rgb = TColor.labToRGB(i * 10, 0, 0);
TColor col = TColor.newRandom().setRGB(rgb);
fill(col.toARGB());
rect(i * 50, 0, 50, 50);
}
}
And here's the output:
so I'm trying to reproduce this graphics program here for my java class.
This is what I've come up with so far:
import processing.core.PApplet;
public class Assignment09b extends PApplet {
// Create arrays to stort the x & y values of the mouse
int [] xArray = new int [100];
int [] yArray = new int [100];
public void setup(){
//Runs at 60Fps
size(500, 500);
}
public void draw(){
//Changes the background each frame
background(0);
//Stores the x&y values of the mouse in the arrays
for (int i = 0; i < xArray.length; i++){
xArray[i] = this.mouseX;
yArray[i] = this.mouseY;
}
//SHOULD print out the snake using series of ellipses
for (int i = 0; i < xArray.length; i++){
//Generates a random color each time
fill(random(255), random(255), random(255));
ellipse(xArray[i], yArray[i], 25, 25);
}
}
}
I have a few ideas as to what the problem might be:
Because I'm in a loop, its just spawning one ellipse really quickly but I don't know how to have it spawn them simultaneously
It might be an issue with the frame rate speed maybe?
I'm an incompetent programmer :/
Please guys can you please give me some advice as to what I may be doing wrong or not at all. Thank you!
The problem is you're setting all the values at the same time here:
//Stores the x&y values of the mouse in the arrays
for (int i = 0; i < xArray.length; i++){
xArray[i] = this.mouseX;
yArray[i] = this.mouseY;
}
You only want to update 1 element in the array and have the others shift by one: the 'oldest' value goes out, the new value comes in. You can manually use a reverse for loop (from the end of the array to the front excepting the 1st element) or use arrayCopy:
private void updateArrays(int x,int y){
arrayCopy(xArray, 0, xArray, 1, xArray.length-1);//shift all elements backwards by 1
arrayCopy(yArray, 0, yArray, 1, yArray.length-1);//so x at index 99 goes 98, 98 to 97, etc. excepting index 0
xArray[0] = x;//finally add the newest value
yArray[0] = y;//at the start of the array (so in the next loop it gets shifted over by 1) like the above values
}
which makes the full listing:
import processing.core.PApplet;
public class Assignment09b extends PApplet {
// Create arrays to stort the x & y values of the mouse
int [] xArray = new int [100];
int [] yArray = new int [100];
public void setup(){
//Runs at 60Fps
size(500, 500);
}
public void draw(){
//Changes the background each frame
background(0);
updateArrays(mouseX,mouseY);
//SHOULD print out the snake using series of ellipses
for (int i = 0; i < xArray.length; i++){
//Generates a random color each time
fill(random(255), random(255), random(255));
ellipse(xArray[i], yArray[i], 25, 25);
}
}
private void updateArrays(int x,int y){
arrayCopy(xArray, 0, xArray, 1, xArray.length-1);//shift all elements backwards by 1
arrayCopy(yArray, 0, yArray, 1, yArray.length-1);//so x at index 99 goes 98, 98 to 97, etc. excepting index 0
xArray[0] = x;//finally add the newest value
yArray[0] = y;//at the start of the array (so in the next loop it gets shifted over by 1) like the above values
}
}
Since this is an exercise I recommend playing with for loops and arrays more.
It's something you'll end up using quite a lot and worth practicing/getting the hang of.
Goodluck!
var xArray = new Array(100);
var yArray = new Array(100);
function setup(){
createCanvas(500, 500);
}
function draw(){
//Changes the background each frame
background(0);
updateArrays(mouseX,mouseY);
//SHOULD print out the snake using series of ellipses
for (var i = 0; i < xArray.length; i++){
//Generates a random color each time
fill(random(255), random(255), random(255));
ellipse(xArray[i], yArray[i], 25, 25);
}
}
function updateArrays(x,y){
arrayCopy(xArray, 0, xArray, 1, xArray.length-1);//shift all elements backwards by 1
arrayCopy(yArray, 0, yArray, 1, yArray.length-1);//so x at index 99 goes 98, 98 to 97, etc. excepting index 0
xArray[0] = x;//finally add the newest value
yArray[0] = y;//at the start of the array (so in the next loop it gets shifted over by 1) like the above values
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>