How do I change the outline color (stroke) of my shape after drawing it? - colors

I'm coding in Processing for the first time (previously familiar with Java) and I'm trying to make a grid of triangles where when I click one, it changes the fill and stroke to a different color. The fill is changing but the stroke remains the default color. Here is my code:
void setup() {
size(800, 600); // size of canvas
triangles = new ArrayList<TriangleClass>(); // Create an empty ArrayList
int L = 50; // length of triangle side
double halfStep = L * Math.sqrt(3);
// all the code about making the grid
}
void draw() {
background(0);
TriangleClass myCurrentTriangle;
for (int i = 0; i < triangles.size(); i++) {
// get object from ArrayList
myCurrentTriangle = triangles.get(i);
myCurrentTriangle.display();
}
}
void mouseClicked () {
TriangleClass myCurrentTriangle ;
for (int i=0; i < triangles.size(); i++) {
// get object from ArrayList
myCurrentTriangle = triangles.get(i);
myCurrentTriangle.mouseOver();
}
}
class TriangleClass {
double x1, y1, x2, y2, x3, y3; // points
color fill; // fill color
color stroke; // stroke color
float mouseSensorX, mouseSensorY;// check point for dist to mouse
// constructor
TriangleClass(
// ...
stroke = color(174, 208, 234);
fill = color(249, 249, 249);
mouseSensorX = (float) (x1+x2+x3 )/ 3;
mouseSensorY = (float) (y1+y2+y3 )/ 3;
}
void mouseOver() {
if (dist(mouseX, mouseY, mouseSensorX, mouseSensorY) < 17) {
if (fill == color(249, 249, 249)) {
stroke = color(251, 84, 84);
fill = color(251,84,84);
// ... repeated for other colors
}
}
void display() {
// show triangle
stroke(stroke);
fill(fill);
triangle((float) x1, (float) y1, (float) x2, (float) y2, (float) x3, (float) y3);
}
}
// =====================================================================

I believe the problem is the stroke weight. All you need to do it have this line of code at the end of your setup function:
strokeWeight(3);
The larger the number, the larger the outline.

Related

Android Studio Opengl ES get problem with weird color mixturing

Basically I've created a plane and rotate it 5 times to be a cube. I made cube with different colors of each side. And did some rotation with touch event.
Everthing was good so far, but the cube turned out to be like this.
Please help it's been driving me crazy!
My cube code:
public class PhotoCube{
public ArrayList<FloatBuffer> vertexBufferList = new ArrayList<>();
public int[][] lists = {
{0,1,0,0}, //front
{1,0,0,-90}, //top
{0,1,0,-90}, //left
{0,1,0,90}, //
{1,0,0,90}, //bottom
{0,1,0,180} //right
};
// number of coordinates per vertex in this array
static final int COORDS_PER_VERTEX = 3;
static final float[] coords = { // in counterclockwise order:
0.5f, 0.5f, 0.5f, // top right
-0.5f, 0.5f, 0.5f, // top left
-0.5f, -0.5f, 0.5f, // bottom left
0.5f, -0.5f, 0.5f // bottom right
};
static final float[][] colorList = {
{1f,0f,0f,1f},
{0f,1f,0f,1f},
{1f,1f,1f,1f},
{1f,1f,0f,1f},
{1f,0f,1f,1f},
{0f,1f,1f,1f}
};
public PhotoCube() {
final int maxVertices = 6;
for(int[] list:lists){
float[] currentCoords = coords.clone();
for(int i=0;i<12;i+=3){
float x = coords[i];
float y = coords[i+1];
float z = coords[i+2];
double angle = Math.toRadians(list[3]);
currentCoords[i]=(float) ((list[0]==1)?x:(list[1]==1)?x*Math.cos(angle)+z*Math.sin(angle):x*Math.cos(angle)-y*Math.sin(angle));
currentCoords[i+1]=(float) ((list[0]==1)?y*Math.cos(angle)-z*Math.sin(angle):(list[1]==1)?y:x*Math.sin(angle)+y*Math.cos(angle));
currentCoords[i+2]=(float) ((list[0]==1)?z*Math.cos(angle)+y*Math.sin(angle):(list[1]==1)?z*Math.cos(angle)-x*Math.sin(angle):z);
}
ByteBuffer bb = ByteBuffer.allocateDirect(
// (number of coordinate values * 4 bytes per float)
currentCoords.length * 4);
// use the device hardware's native byte order
bb.order(ByteOrder.nativeOrder());
// create a floating point buffer from the ByteBuffer
FloatBuffer vertexBuffer = bb.asFloatBuffer();
// add the coordinates to the FloatBuffer
vertexBuffer.put(currentCoords);
// set the buffer to read the first coordinate
vertexBuffer.position(0);
if(vertexBufferList.size()==maxVertices){
vertexBufferList.remove(0);
}
vertexBufferList.add(vertexBuffer);
ByteBuffer dlb = ByteBuffer.allocateDirect(
// (# of coordinate values * 2 bytes per short)
drawOrder.length * 2);
dlb.order(ByteOrder.nativeOrder());
drawListBuffer = dlb.asShortBuffer();
drawListBuffer.put(drawOrder);
drawListBuffer.position(0);
createProgram();
GLES20.glLinkProgram(mProgram);
// creates OpenGL ES program executables
}
}
public void createProgram(){
// create empty OpenGL ES Program
mProgram = GLES20.glCreateProgram();
int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
vertexShaderCode);
int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,
fragmentShaderCode);
// add the vertex shader to program
GLES20.glAttachShader(mProgram, vertexShader);
// add the fragment shader to program
GLES20.glAttachShader(mProgram, fragmentShader);
}
public void draw(int order) {
final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
// Add program to OpenGL ES environment
GLES20.glUseProgram(mProgram);
// get handle to vertex shader's vPosition member
int positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
// Enable a handle to the triangle vertices
GLES20.glEnableVertexAttribArray(positionHandle);
// Prepare the triangle coordinate data
GLES20.glVertexAttribPointer(positionHandle, COORDS_PER_VERTEX,
GLES20.GL_FLOAT, true,
vertexStride, vertexBufferList.get(order));
// get handle to fragment shader's vColor member
int colorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
// Set color for drawing the triangle
GLES20.glUniform4fv(colorHandle, 1, colorList[order], 0);
GLES20.glDrawElements(
GLES20.GL_TRIANGLES,
drawOrder.length,
GL_UNSIGNED_SHORT,
drawListBuffer);
// Disable vertex array
//GLES20.glDisableVertexAttribArray(positionHandle);
}
}
My Renderer code:
public class MyGLRenderer implements GLSurfaceView.Renderer {
private PhotoCube mPhotoCube;
public final float[] vPMatrix = new float[16];
private final float[] projectionMatrix = new float[16];
private final float[] viewMatrix = new float[16];
private int vPMatrixHandle = -1;
private volatile float mAngleX = 0;
private volatile float mAngleY = 0;
private float[] rotationMX = new float[16];
private float[] rotationMY = new float[16];
private float[] scratch = new float[16];
public MyGLRenderer(Context context){
}
public static int loadShader(int type, String shaderCode) {
int shader = GLES20.glCreateShader(type);
// add the source code to the shader and compile it
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
// Set the background frame color
GLES20.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
mPhotoCube = new PhotoCube();
vPMatrixHandle = GLES20.glGetUniformLocation(mPhotoCube.mProgram, "uVPMatrix");
onDrawFrame(unused);
}
public void onDrawFrame(GL10 unused) {
// Redraw background color
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glEnable(GLES20.GL_BLEND);
GLES20.glBlendFuncSeparate(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA, GLES20.GL_ZERO, GLES20.GL_ONE);
Matrix.setRotateM(rotationMX, 0, -mAngleX, 0, 1, 0);
Matrix.setLookAtM(viewMatrix, 0, 0, 0, 5, 0f, 0f, -5f, 0f, 1.0f, 0f);
// Calculate the projection and view transformation
Matrix.multiplyMM(vPMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
Matrix.multiplyMM(scratch, 0, vPMatrix, 0, rotationMX, 0);
Matrix.setRotateM(rotationMY, 0, -mAngleY, scratch[0], scratch[4], scratch[8]);
Matrix.multiplyMM(scratch, 0, scratch, 0, rotationMY, 0);
vPMatrixHandle = GLES20.glGetUniformLocation(mPhotoCube.mProgram, "uMVPMatrix");
GLES20.glUniformMatrix4fv(vPMatrixHandle, 1, false, scratch, 0);
for(int i=0;i<mPhotoCube.lists.length;i++){
mPhotoCube.draw(i);
}
}
public void onSurfaceChanged(GL10 unused, int width, int height) {
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / height;
// this projection matrix is applied to object coordinates
// in the onDrawFrame() method
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
}
}
Here's my shader code
final String vertexShaderCode =
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"void main() {" +
" gl_Position = uMVPMatrix * vPosition;" +
"}";
final String fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
" gl_FragColor = vColor;" +
"}";
Thank you in advance.
You have to enable the Depth Test Depth test ensures that fragments that lie behind other fragments are discarded:
GLES20.glEnable(GLES20.GL_DEPTH_TEST);
When you enable the depth test you must also clear the depth buffer:
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
However, if you have transparent objects and want to use Blending, the depth test must be disabled and you must draw the triangles of the meshes in sorted order from back to front. Also see OpenGL depth sorting

Processing- What could be possible errors of svg file not displayed?

I'm trying to display an svg image with Processing, but it would only show a blank white space. I don't think there is any problem with the code as it works perfectly when I change the shape to ellipse. Do I have to modify any code below to display the svg file, or is there any other possible reasons why it wouldn't show? Thanks in advance!
Table table;
PFont f;
PShape leaf;
color [] c = {color(225, 50, 50), color(225, 100, 0), color(225, 225, 0), color(0, 150, 0), color(0), color(125)};
int i=0;
void setup() {
size(1100, 500);
background(255);
table=loadTable("P3_data.csv", "header");
leaf= loadShape("leaf.svg");
leaf.disableStyle();
}
void draw() {
stroke(255);
strokeWeight(0.1);
for (TableRow row : table.rows()) {
int friend= (row.getInt("Friend"));
int travel= (row.getInt("Travel"));
int selfimprovement= (row.getInt("Self-improvement"));
int club= (row.getInt("Club"));
int schoolwork= (row.getInt("Schoolwork"));
int money= (row.getInt("Money"));
int total= 0;
int [] Daily= {friend, travel, selfimprovement, club, schoolwork, money};
for (int k=0; k<6; k++) {
total +=Daily[k];
}
println (total);
for (int j=0; j<6; j++) {
for (int m=0; m< Daily[j]; m++) {
fill(c[j]);
ellipse((i%120)*10+10, (i/120)*40+10, 3*total, 4*total);
//shape(leaf, (i%120)*10+10, (i/120)*40+10, 3*total, 3*total);
total --;
}
}
if (i>1095) {
break;
}
i++;
}
save("sketch.png");
}
See the documentation of disableStyle()
Shapes are loaded with style information that tells them how to draw (the color, stroke weight, etc.) The disableStyle() method of PShape turns off this information. The enableStyle() method turns it back on.
If you want to display the SVG with its style, the you have to remove the disableStyle call:
leaf = loadShape("leaf.svg");
leaf.disableStyle();
If you want to change the stroke and fill color of the shape generated form the *svg" file, then indeed you have to disable the style:
leaf= loadShape("leaf.svg");
leaf.disableStyle();
In this case the shape is drawn with the current fill and stroke color. This means that all the shape is filled with the same fill color and drawn with the same stroke color:
for (int m=0; m< Daily[j]; m++) {
stroke(0, 0, 255); // blue
fill(255, 0, 0); // red
shape(leaf, (i%120)*10+10, (i/120)*40+10, 3*total, 3*total);
total --;
}

Exporting video from processing 3

I am using processing-3.2.2 for audio visualization. I have the code to play the visualiser but I don't know how to save it as a video(.mp4) file.
Here's what I wrote:
import ddf.minim.*;
import ddf.minim.analysis.*;
Minim minim;
AudioPlayer player;
AudioMetaData meta;
BeatDetect beat;
int r = 200;
float rad = 70;
void setup()
{
size(500, 500);
//size(600, 400);
minim = new Minim(this);
player = minim.loadFile("son_final.mp3");
meta = player.getMetaData();
beat = new BeatDetect();
player.play();
//player.play();
background(-1);
noCursor();
}
void draw()
{
float t = map(mouseX, 0, width, 0, 1);
beat.detect(player.mix);
fill(#1A1F18,50);
noStroke();
rect(0, 0, width, height);
translate(width/2, height/2);
noFill();
fill(-2, 10);
if (beat.isOnset()) rad = rad*0.9;
else rad = 70;
ellipse(0, 0, 2*rad, 2*rad);
stroke(-1, 50);
int bsize = player.bufferSize();
for (int i = 0; i < bsize - 1; i+=5)
{
float x = (r)*cos(i*2*PI/bsize);
float y = (r)*sin(i*2*PI/bsize);
float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize);
float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize);
line(x, y, x2, y2);
}
beginShape();
noFill();
stroke(-1, 50);
for (int i = 0; i < bsize; i+=30)
{
float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize);
float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize);
vertex(x2, y2);
pushStyle();
stroke(-5);
strokeWeight(2);
point(x2, y2);
popStyle();
}
endShape();
if (flag) showMeta();
}
void showMeta() {
int time = meta.length();
textSize(50);
textAlign(CENTER);
text( (int)(time/1000-millis()/1000)/60 + ":"+ (time/1000-millis()/1000)%60, -7, 21);
}
boolean flag =false;
void mousePressed() {
if (dist(mouseX, mouseY, width/2, height/2)<150) flag =!flag;
}
void keyPressed() {
if(key=='e')exit();
}
I know I can import MovieMaker library but I don't know how to use it in this code. Please suggest some changes.
Thank you.
You can use the Video Export library for that. More info here: http://funprogramming.org/VideoExport-for-Processing/
Then all you'd do is create an instance of VideoExport and then call videoExport.saveFrame() at the end of your draw() function.
import com.hamoid.*;
VideoExport videoExport;
void setup() {
size(600, 600);
videoExport = new VideoExport(this, "basic.mp4");
}
void draw() {
background(#224488);
rect(frameCount * frameCount % width, 0, 40, height);
videoExport.saveFrame();
}
There are a ton of resources online. I recommend googling "Processing video export" for a ton of results. Then try something out and post an MCVE (not your entire project) showing exactly where you're stuck.

how to apply gradient effect on Image GDI

How can I apply gradient effect on image like this image in c#. I have a transparent image with black drawing I want to apply 2 color gradient on the image is this possible in gdi?
Here is the effect i want to achieve
http://postimg.org/image/ikz1ie7ip/
You create a PathGradientBrush and then you draw your texts with that brush.
To create a bitmap filled with a gradient brush you could do something like:
public Bitmap GradientImage(int width, int height, Color color1, Color color2, float angle)
{
var r = new Rectangle(0, 0, width, height);
var bmp = new Bitmap(width, height);
using (var brush = new LinearGradientBrush(r, color1, color2, angle, true))
using (var g = Graphics.FromImage(bmp))
g.FillRectangle(brush, r);
return bmp;
}
So now that you have an image with the gradient in it, all you have to do is to bring over the alpha channel from your original image into the newly created image. We can take the transferOneARGBChannelFromOneBitmapToAnother function from a blog post I once wrote:
public enum ChannelARGB
{
Blue = 0,
Green = 1,
Red = 2,
Alpha = 3
}
public static void transferOneARGBChannelFromOneBitmapToAnother(
Bitmap source,
Bitmap dest,
ChannelARGB sourceChannel,
ChannelARGB destChannel )
{
if ( source.Size!=dest.Size )
throw new ArgumentException();
Rectangle r = new Rectangle( Point.Empty, source.Size );
BitmapData bdSrc = source.LockBits( r, ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb );
BitmapData bdDst = dest.LockBits( r, ImageLockMode.ReadWrite, PixelFormat.Format32bppArgb );
unsafe
{
byte* bpSrc = (byte*)bdSrc.Scan0.ToPointer();
byte* bpDst = (byte*)bdDst.Scan0.ToPointer();
bpSrc += (int)sourceChannel;
bpDst += (int)destChannel;
for ( int i = r.Height * r.Width; i > 0; i-- )
{
*bpDst = *bpSrc;
bpSrc += 4;
bpDst += 4;
}
}
source.UnlockBits( bdSrc );
dest.UnlockBits( bdDst );
}
Now you could do something like:
var newImage = GradientImage( original.Width, original.Height, Color.Yellow, Color.Blue, 45 );
transferOneARGBChannelFromOneBitmapToAnother( original, newImage, ChannelARGB.Alpha, ChannelARGB.Alpha );
And there you are. :-)

ProcessingJS modify stroke-width in SVG

I would like to dynamically set the stroke-width of an SVG curve from within a ProcessingJS sketch.
So far, the only solution that I have found is to use disableStyle() on the SVG shape and then manually set all of the style attributes like Fill(), stroke(), strokeJoin() and strokeWeight(). However, the opacity of the line seems to render differently when executed this way.
Is there some way to access and modify only the stroke-width and leave the other styles unchanged?
Here is the code that I have so far. It seems to work okay, but it would be nice not to have to manually reset all the style attributes that were in the original svg file.
/* #pjs preload="frog_trajs.svg"; */
PShape trajs;
float zoom_factor = 1.0;
float imgW;
float ingH;
float lineWeight = 1.00;
//panning variables
float centerX;
float centerY;
boolean active = false;
PFont f;
void setup()
{
size(900, 600);
frameRate(20);
centerX = width/2;
centerY = height/2;
trajs = loadShape("frog_trajs.svg");
trajs.disableStyle();
imgW = trajs.width;
imgH = trajs.height;
}
void draw()
{
background(255);
//here, the styles are reset, with lineWeight dynamically updated by mouseScrolled()
shapeMode(CENTER);
strokeJoin(ROUND);
strokeWeight(lineWeight);
stroke(#EF25B2,170);
noFill();
shape(trajs,centerX,centerY,imgW,imgH);
}
void mouseScrolled()
{
if(active){
if(mouseScroll > 0)
{
//zoom out;
zoom_factor = 1 - mouseScroll*0.01;
}
else
{
//zoom in;
zoom_factor = 1 - mouseScroll*0.01;
}
lineWeight = lineWeight/zoom_factor;
}
}
void mouseOver(){
active = true;
}
void mouseOut(){
active = false;
}

Resources